All Collections
Divi Documentation
Customizing Divi
Turn "Woo Images" into a carousel
Turn "Woo Images" into a carousel

Turn product gallery images into a carousel

Marius avatar
Written by Marius
Updated this week

To turn WooCommerce product gallery images into a carousel using Divi's Woo Product Images module, follow these steps.

Method 1: Manually Code The Gallery

Step 1

Edit the product in question and Add a custom class called cs_woo_gallery to the module:

Step 2

Go to Divi -> Theme Options -> Integration -> Add code to the < head > of your blog and add the following code:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<script async src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<script>

jQuery(document).ready(function($){

setTimeout(function(){

jQuery('.cs_woo_gallery .flex-control-thumbs').slick({

slidesToShow: 3,

slidesToScroll: 3,

arrows: true,

prevArrow: '<span style="font-size:35px;" class="slick-prev et-pb-icon">&#x34;</span>',

nextArrow:'<span style="font-size:35px;" class="slick-next et-pb-icon">&#x35;</span>',

dots: true

});

}, 500);

});

</script>

Step 3

Go to Divi -> Theme Options -> Custom CSS and add the following code:

.woocommerce #page-container div.product .cs_woo_gallery div.images .flex-control-thumbs .slick-slide,

.woocommerce #page-container div.product .cs_woo_gallery div.images .flex-control-thumbs .slick-dots li {

clear: none !important;

margin: 0;

}

.cs_woo_gallery .flex-control-thumbs .slick-slide img {

width: auto !important;

margin: 0 auto !important;

}

.cs_woo_gallery .flex-control-thumbs {

position: relative;

}

.cs_woo_gallery .flex-control-thumbs span.slick-prev, .cs_woo_gallery .flex-control-thumbs span.slick-next {

position: absolute;

top: 25%;

left: 0;

transform: translateY(-50%);

background: #000;

width: 40px;

height: 40px;

line-height: 40px;

text-align: center;

color: #fff;

z-index: 99;

cursor: pointer;

}

.cs_woo_gallery .flex-control-thumbs span.slick-next {

left: auto;

right: 0;

}

.cs_woo_gallery .flex-control-thumbs .slick-list.draggable {

max-width: 90%;

margin: 0 auto;

}

.woocommerce div.product .cs_woo_gallery div.images .flex-control-thumbs .slick-dots {

text-align: center;

clear: both;

margin-top: 15px;

}

.woocommerce #page-container div.product .cs_woo_gallery div.images .flex-control-thumbs .slick-dots li {

position: relative;

display: inline-block;

width: 20px;

height: 20px;

margin: 0 5px;

padding: 0;

cursor: pointer;

float: none;

}

.cs_woo_gallery .flex-control-thumbs .slick-dots li button {

font-size: 0;

line-height: 0;

display: block;

width: 20px;

height: 20px;

padding: 5px;

cursor: pointer;

color: transparent;

border: 0;

outline: none;

background: transparent;

}

.cs_woo_gallery .flex-control-thumbs .slick-dots li button:before {

content: '•';

font-size: 22px;

line-height: 20px;

position: absolute;

top: 0;

left: 0;

width: 20px;

height: 20px;

text-align: center;

opacity: .25;

color: black;

}

@media only screen and (max-width: 767px){

.cs_woo_gallery .flex-control-thumbs span.slick-prev, .cs_woo_gallery .flex-control-thumbs span.slick-next {

display: none !important;

}

.cs_woo_gallery .flex-control-thumbs .slick-list.draggable {

max-width: 100%;

}

}

That will transform the Woo Product Images module into a carousel:

Note: some child themes have slick.js already integrated, so in that case, we can use this code instead and wrap the function to avoid conflict:

<script>

jQuery.noConflict();

jQuery( document ).ready(function() {

setTimeout(function(){

jQuery('.cs_woo_gallery .flex-control-thumbs').slick({

slidesToShow: 3,

slidesToScroll: 3,

arrows: true,

prevArrow: '<span style="font-size:35px;" class="slick-prev et-pb-icon">&#x34;</span>',

nextArrow:'<span style="font-size:35px;" class="slick-next et-pb-icon">&#x35;</span>',

dots: true

});

}, 500);

});

</script>

Method 2: Use 3rd Party Plugins

The plugin automatically works and functions just like the method mentioned earlier, turning the gallery into a Carousel:


This is WooCommerce's official plugin for turning your product gallery into a carousel. Please note that it's not a free plugin, so it's a good idea to reach out to their support team before making a purchase. You can ask any pre-sales questions here.

A live demo of that plugin can be seen here.

Did this answer your question?