To turn WooCommerce product gallery images into a carousel using Divi's Woo Product Images module, follow these steps:
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">4</span>',
nextArrow:'<span style="font-size:35px;" class="slick-next et-pb-icon">5</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">4</span>',
nextArrow:'<span style="font-size:35px;" class="slick-next et-pb-icon">5</span>',
dots: true
});
}, 500);
});
</script>