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://stackoverflow.com/a/46448407/1788961

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"
});

Solution 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>

Solution 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;
}

Comments

[Faisal Ashfaq]

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

[squarecandy]

@FaisalAshfaq see the filtering example I added.

[Pixel]

@Cray 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