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

Answer 1

Theres a fle 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;
}