Отображать миниатюры галереи продуктов woocommerce в одной строке в виде слайдера ⇐ Php

[Anonymous]

На странице одного продукта woocommerce миниатюры галереи по умолчанию отображаются под активным изображением в строках. В настоящее время у меня отображается по 4 изображения в строке.
Я считаю, что Woocommerce использует flexslider для слайдера страницы продукта.
Итак, поскольку нас будет много изображений для каждого продукта, я хочу добавить слайдер в галерею продуктов, избегая при этом использования другого плагина. В результате в галерее товаров все изображения будут отображаться только в одной строке.
Как flexslider2
Какого наилучшего способа достичь? этот? - Можно ли это сделать с помощью чистого CSS или нужно будет добавить навигацию по ползунку с помощью фильтров WordPress и CSS?
[img]https:// i.sstatic.net/ymMPr.jpg[/img]



CSS
flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;

border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}

.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}

.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 5px 1% 0 0;
min-width: 100px;
}

.flex-control-thumbs img {
width: 100%;
display: block;
opacity: 0.8;
cursor: pointer;
}

.flex-control-thumbs img:hover {
opacity: 0.5;
}

.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}

.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}

Внешний HTML из WC

• 
• 
• 
• 
• 
• 

// Добавьте ползунковую навигацию с помощью фильтров WordPress.
add_filter( 'woocommerce_single_product_carousel_options', 'cuswoo_update_woo_flexslider_options' );
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function cuswoo_update_woo_flexslider_options( $options ) {

$options['directionNav'] = true;

return $options;
}

ОБНОВЛЕНИЕ
Вот CSS для элементов управления навигацией / для Fliter выше (следующее и предыдущее изображения).
ul.flex-direction-nav {
position: absolute;
top: 30%;
z-index: 99999;
width: 100%;
left: 0;
margin: 0;
padding: 0px;
list-style: none;}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {visibility:visible;content: '\f105';
font-family: FontAwesome;margin-right: 10px;font-size: 70px; }
a.flex-prev::before {
visibility:visible;
content: '\f104';
font-family: FontAwesome; margin-left: 10px;font-size: 70px;}


Подробнее здесь: https://stackoverflow.com/questions/701 ... -as-slider