Слайдер для миниатюр товаров в WooCommerce

Я создал собственную тему для своего магазина WooCommerce.
На данный момент я внес очень мало изменений в существующие файлы шаблонов.

Но я хочу изменить вид слайдера изображений на странице товара.
В данный момент я использую базовый вывод с некоторыми базовыми стилями.

Проблема в том, что миниатюры отображаются в нескольких строках, если они не помещаются в одном ряду.

Что мне нужно, это слайдер для миниатюр.
Я пытался изменить файл шаблона product-thumbnails.php, Но он использует функцию под названием wc_get_gallery_image_html, Я не знаю, как это изменить.

Тогда я понял, что WooCommerce использует плагин FlexSlider. И этот плагин может предоставить то, что я хочу / нужно.

Посмотреть здесь: http://flexslider.woothemes.com/thumbnail-slider.html

Я просто не знаю, как я мог бы добавить это поведение к слайдеру изображения моего продукта.

Я видел, что есть пример JS и HTML-код в приведенном выше примере. Но я не знаю, как я мог бы адаптировать его к своему ползунку, потому что мой вывод HTML выглядит по-другому, и переименование идентификаторов не работает.

РЕДАКТИРОВАТЬ:

Я нашел способ добавить опции в слайдер. Ответ отсюда: https://stackoverflow.com/a/46448407/1788961

Я добавил следующий код (и он работает), чтобы добавить опции в мой слайдер:

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

Проблема в том, что мне нужно добавить опции и к миниатюрам. Есть ли способ сделать это?

На данный момент вывод HTML выглядит так:

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

РЕДАКТИРОВАТЬ: Смотри выше, часть ниже не работает.
Вот что я попробовал:

$('.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"});