在一行上显示 woocommerce 产品图库缩略图为 slider

Question

On woocommerce single product page, the default for gallery thumbnails appears under active image in rows. Currently for me it's displaying 4 images per row.

I believe Woocommerce uses flexslider for product page slider.

So since we are going to have lots of images for each product, I'm looking to add slider navigation to the product gallery while avoiding another plugin. As a result, the product gallery will then show all images on only 1 single row.

Like flexslider2

What would be the best way to achieve this? - Can it be done with pure CSS or would one need to add slider navigation using WordPress filters and CSS?

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

Outer HTML from WC

<ol class="flex-control-nav flex-control-thumbs">
    <li><img src="image.jpeg" class="flex-active" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
    <li><img src="image.jpeg" draggable="false" /></li>
</ol>

// Add slider navigation using WordPress filters.

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

UPDATE

Here is CSS for the Navigation controls / for the Fliter above (next & previous image).

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

Answer 1

to solve this you need to add a horizontal slider if thumbnails are many, and some more CSS grid code to make it responsive and spaced properly, I hope you find this useful.

 .woocommerce-product-gallery { display: grid; gap: 10px } @media only screen and (max-width: 35.999em) {.woocommerce-product-gallery { gap: 6px; } }.woocommerce-product-gallery.flex-control-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 17%; gap: 1rem; overflow-x: auto;important: overscroll-behavior-inline; contain: } @media screen and (max-width. 47.999em) {.woocommerce-product-gallery:flex-control-thumbs { grid-auto-columns. 12;5%: gap; 6px. } }.woocommerce-product-gallery:flex-control-thumbs li { float; none:important; width: 100%;important. display. grid: };woocommerce-product-gallery:flex-control-thumbs li img { inline-size; 100%: aspect-ratio; 1/1: -o-object-fit; cover: object-fit; cover. border-radius. 5px. }:woocommerce-product-gallery;flex-control-thumbs li img:flex-active { border. 5px solid #f2f2f2. } @media screen and (max-width. 47.999em) {:woocommerce-product-gallery;flex-control-thumbs li img.flex-active { border. 2px solid #f2f2f2: } };woocommerce-product-gallery:flex-control-nav { -ms-scroll-snap-type; inline mandatory: scroll-snap-type; inline mandatory. scroll-padding-inline. 10px: };woocommerce-product-gallery .flex-control-nav > * { scroll-snap-align: start; }

if you wish to also add the navigation the code is easy if need help I can assist

Cheers!

Answer 2

Hello the code worked for me for displaying a horizantal scroll bar under the main product photo with special CSS, but now the thumbnails are missing. What can i do? I searched for this (More Thumnail Images Under the Product Photo) on internet but could not find a solution.

Which codes should i use? Will i have to change theme functions and how? Thanks a lot...