Enhancing the visual presentation of your products can significantly improve the user experience and drive sales.
One effective way to showcase multiple product images is by displaying them as a carousel. A carousel allows visitors to easily browse through a gallery of images without leaving the product page, providing a seamless and interactive shopping experience.
This article will guide you through the steps to display your product's gallery images as a carousel.
Display the Product's Gallery Images as a Carousel without a plugin
Open the Woo Product Images module's settings by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS and add this CSS code
.woocommerce #page-container div.product selector div.images .flex-control-thumbs .slick-slide,
.woocommerce #page-container div.product selector div.images .flex-control-thumbs .slick-dots li {
clear: none !important;
margin: 0;
}
selector .flex-control-thumbs .slick-slide img {
width: auto !important;
margin: 0 auto !important;
}
selector .flex-control-thumbs {
position: relative;
}
selector .flex-control-thumbs span.slick-prev,
selector .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;
}
selector .flex-control-thumbs span.slick-next {
left: auto;
right: 0;
}
selector .flex-control-thumbs .slick-list.draggable {
max-width: 90%;
margin: 0 auto;
}
.woocommerce div.product selector div.images .flex-control-thumbs .slick-dots {
text-align: center;
clear: both;
margin-top: 15px;
}
.woocommerce #page-container div.product selector 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;
}
selector .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;
}
selector .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) {
selector .flex-control-thumbs span.slick-prev,
selector .flex-control-thumbs span.slick-next {
display: none !important;
}
selector .flex-control-thumbs .slick-list.draggable {
max-width: 100%;
}
}In the Advanced Tab → CSS ID & Classes → CSS Class, type in dt_woo_gallery
In the WordPress Dashboard → Divi → Theme Options → Integrations Tab, add this 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('.dt_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>
The result can be seen in the GIF below:
Display the Product's Gallery Images as a Carousel using a plugin
Install and activate the Product Gallery Slider, Additional Variation Images for WooCommerce plugin
Go to WordPress Dashboard → Codeixer → Product Gallery
Click on the Advanced Options Tab
Enable the Divi Page Builder option
Click on the Save button
The result can be seen in the GIF below:
