Slider for product thumbnails in WooCommerce

Question

I've built an own theme for my WooCommerce store. At the moment I've made very few changes to the existing template files.

But I want to change the view of the image slider on the product page. At the moment, I'm using the basic output with some basic styling.

The problem is, that the thumbnails are shown in multiple rows if there are not fitting in a single row.

What I need, is a slider for the thumbnails. I tried to change the template file product-thumbnails.php. But it uses a function called wc_get_gallery_image_html. I don't know how to change that in a good way.

Then I realized that WooCommerce uses the FlexSlider plugin. And this plugin could provide waht I want/need.

See here:

http://flexslider.woothemes.com/thumbnail-slider.html

I just don't know, how I could to add that behavior to my product image slider.

I saw that there is an example JS and HTML code in the example from above. But I don't know how I could adapt it to my slider because my HTML output looks a lot different and renaming the IDs doesn't work.

EDIT:

I found a way to add options to the slider. The answer is from here:

https://mcmap.net/q/1774878/-navigation-arrows-in-woocommerce-3-x-product-gallery-slider

I added the following code (and it's working) to add options to my slider:

// Update WooCommerce Flexslider options
add_filter('woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options');

function ud_update_woo_flexslider_options($options)
{

  $options['directionNav'] = true;
  $options['sync'] = '.flex-control-thumbs';

  return $options;
}

The problem is, that I need to add options to the thumbnails as well. Is there any way to do that?

At the moment the HTML output looks like this:

<div
  class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images"
  data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out;">
  <a href="[path]" class="woocommerce-product-gallery__trigger">🔍</a>
  <div class="flex-viewport" style="overflow: hidden; position: relative; height: 400px;">
    <figure class="woocommerce-product-gallery__wrapper"
      style="width: 2600%; transition-duration: 0s; transform: translate3d(-1911px, 0px, 0px);">
      <div data-thumb="[path]" class="woocommerce-product-gallery__image flex-active-slide" data-thumb-alt=""
        style="width: 637px; margin-right: 0px; float: left; display: block; position: relative; overflow: hidden;">
        <a href="[path]">
          <img width="600" height="400" src="[path]" class="" alt="" title="[title]" data-caption="" data-src="[path]"
            data-large_image="[path]" data-large_image_width="2000" data-large_image_height="1333" srcset="[path]"
            sizes="(max-width: 600px) 100vw, 600px" draggable="false">
        </a>
        <img src="[path]" class="zoomImg"
          style="position: absolute; top: 0px; left: 0px; opacity: 0; width: 2000px; height: 1333px; border: none; max-width: none; max-height: none;">
      </div>
      <div data-thumb="[path]" class="woocommerce-product-gallery__image" data-thumb-alt=""
        style="width: 637px; margin-right: 0px; float: left; display: block; position: relative; overflow: hidden;">
        <a href="[path]">
          <img width="600" height="400" src="[path]" class="" alt="" title="[title]" data-caption="" data-src="[path]"
            data-large_image="[path]" data-large_image_width="2000" data-large_image_height="1333" srcset="[path]"
            sizes="(max-width: 600px) 100vw, 600px" draggable="false">
        </a>
        <img src="[path]" class="zoomImg"
          style="position: absolute; top: -578.46px; left: -7.48901px; opacity: 0; width: 2000px; height: 1333px; border: none; max-width: none; max-height: none;">
      </div>
      <!-- ...more items... -->
    </figure>
  </div>

  <ol class="flex-control-nav flex-control-thumbs">
    <li><img src="[path]" draggable="false" class="flex-active"></li>
    <li><img src="[path]" draggable="false" class=""></li>
    <!-- ...more items... -->
  </ol>
</div>

EDIT: See above, the part below is not working. This is what I've tried:

$('.flex-control-thumbs').flexslider({
  animation: "slide",
  controlNav: false,
  animationLoop: false,
  slideshow: false,
  itemWidth: 210,
  itemMargin: 5,
  asNavFor: '.woocommerce-product-gallery__wrapper'
});

$('.woocommerce-product-gallery__wrapper').flexslider({
  animation: "slide",
  controlNav: false,
  animationLoop: false,
  slideshow: false,
  sync: ".flex-control-thumbs"
});

Analytic

Any idea how to replace the <ol class="flex-control-nav flex-control-thumbs"> and <li> structure with something else? I want to use my own grid system for the thumbs – Policyholder

Further to the above I have realised that the entire <ol...> markup structure is rendered by WooCommerce JavaScript (via single-product.min.js). It doesn't look as though this is designed to be replaced entirely. – Policyholder

@Cray, Have you found the solution for the thumbnail slider? – Soninlaw

@Soninlaw unfortunately not – Analytic

@Cray, Thanks for the reply, Then how you solved this issue? (I know this post is old) – Soninlaw

@Soninlaw I didn't. I live with it ;) – Analytic

Answer 1

Best way forward is to create your own slider instead of using woocomerce built in one. Tried different ways of customisation but in vain. I customised template files and added my own structure in product-thumbnails.php

<div class="pd-gallery-slider">
    <div class="swiper-container">
       <div class="swiper-wrapper">
        <?php
            foreach($attachment_ids as $attachment_id) {
                $image_url = wp_get_attachment_url($attachment_id);
                ?>
                <div class="swiper-slide pd-gal-slide fx fx-jc fx-ac">
                    <a class="fx fx-wrap fx-ae" data-fancybox="gallery" href="<?php echo $image_url; ?>" style="background: url(<?php echo $image_url; ?>) center no-repeat;background-size:cover;">
                        <img src="<?php echo $image_url; ?>" alt="gallery">
                    </a>
                </div>
            <?php }
        ?>
    </div>
    <div class="gal-btn-prev fx"></div>
    <div class="gal-btn-next fx"></div>
</div>

Refer

Is there any stylesheet required? – Prowl

@muhammad usman no, you can define your styles as per design. – Refer

Answer 2

Theres a file in the WooCommerce directory which has all the settings of Product Thumbnail slider where you can edit the settings.

wp-content/plugins/woocommerce/includes/class-wc-frontend-scripts.php

$params = array(
    'i18n_required_rating_text' => esc_attr__( 'Please select a rating', 'woocommerce' ),
    'review_rating_required'    => get_option( 'woocommerce_review_rating_required' ),
    'flexslider'                => apply_filters(
        'woocommerce_single_product_carousel_options', array(
            'rtl'            => is_rtl(),
            'animation'      => 'slide',
            'smoothHeight'   => true,
            'directionNav'   => false,
            'controlNav'     => 'thumbnails',
            'slideshow'      => false,
            'animationSpeed' => 500,
            'animationLoop'  => true, // Breaks photoswipe pagination if true.
            'allowOneSlide'  => false,
        )
    ),
);

You can change the FlexSlider attributes by using the filter, like this:

add_filter( 'woocommerce_single_product_carousel_options', 'customslug_single_product_carousel_options', 99, 1 );
function customslug_single_product_carousel_options( $options ) {
    $options['animation'] = 'fade';
    $options['animationSpeed'] = 400;
    return $options;
}

Trinitarianism

Hmm, that's a good way around. Any idea how to override this file so when woocommerce updates this one is not overwritten? – Verticillate

@FaisalAshfaq see the filtering example I added. – Nahuatl

@Analytic where you able to enable the flexslider on the thumbnails as you asked? Couldnt get it to work from this answer, it changes only the main product image, not the thumbnails – Woolfolk