phphtmlcsswordpresswoocommerce

Display woocommerce product gallery thumbnails on one row as slider

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?

enter image description here

enter image description here

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

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