Setup and Style Divi Product Carousel

The Product Carousel For Divi plugin provides a dedicated Divi module for cycling through your WooCommerce product catalog.

Use the Product Carousel Divi module inside the Divi Visual Builder to showcase unlimited products, customize autoplay and motion settings, and design every carousel element visually.

Pre-Requisites

• A WordPress Website
• Divi Theme or Divi Builder
• WooCommerce Plugin
• Product Carousel For Divi Plugin

Add Product Carousel Module On Divi Page

1. Open any page in the Divi Visual Builder.
2. Search for Product Carousel in the Divi module list and insert it into your layout row.
3. The Product Carousel Settings panel will automatically open.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add WooCommerce Products To Divi Module

1. In the module settings modal, navigate to the Content Tab.

2. Click Add WooCommerce Product to add a new product carousel item.

3. This opens the Product Carousel Item settings window.

4. Click Add Image to select or upload a featured product image.

5. Click the green tick icon to save the item settings.

6. Repeat these steps to add additional products to your carousel.

   

   Product Carousel Item Module - Divi Product Carousel

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Setup Carousel Settings

1. Configure your carousel motion, display, and navigation controls to match your website needs:

   • Carousel General Settings

     • 

       Carousel General Settings - Divi Product Carousel

     • Slide to Start On: Select the initial product slide displayed when the page loads.

   • Carousel Responsive Settings

     • 

       Carousel Responsive Settings - Divi Product Carousel

     • Number of Visible Items: Set how many product cards are displayed simultaneously across Desktop, Tablet, and Mobile screens.

     • Products to Scroll: Choose the number of product slides that scroll per transition (Default is 1).

   • Carousel Motion Settings

     • 

       Carousel Motion Settings - Divi Product Carousel

     • Infinite Loop Sliding: Enable infinite looping so the carousel scrolls continuously.

     • Enable Autoplay: Enable automatic slide transitions upon page load.

     • Autoplay Speed (ms): Set the duration in milliseconds between automatic slide movements.

     • Pause Autoplay On Hover: Pause the carousel motion when a visitor hovers their cursor over a product card.

     • Transition Animation: Choose smooth sliding or fading transition styles.

     • Animation Speed: Adjust the speed of transition movements.

   • Carousel Navigation Settings

     • 

       Carousel Navigation Settings - Divi Product Carousel

     • Show Prev/Next Arrows: Display previous and next navigation arrows on the left and right sides of the carousel.

     • Show Dots Navigation: Display pagination dots at the bottom of the carousel.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Carousel Styling Settings

1. Customize product typography, slide container styling, and navigation controls visually:

   • Product Title Styling

     • Go to Design Tab > Product Title

     • 

       Product Title Styling - Divi Product Carousel

     • Set padding around titles.

     • Customize font family, font weight, text alignment, font size, line height, text color, and text drop shadows.

   • Carousel Slide Styling

     • Go to Design Tab > Carousel Slide

     • 

       Carousel Slide Styling - Divi Product Carousel

     • Adjust vertical alignment of product elements.

     • Enable Make Height Equal to ensure all product cards maintain uniform height.

     • Customize slide margins, background color, borders, rounded corners, and box shadows.

   • Carousel Navigation Styling

     • 

       Carousel Navigation Styling - Divi Product Carousel

     • Customize background and icon colors for arrow buttons and active pagination dots.

   • Custom CSS Target Elements
     • Product Container
     • Image Container
     • Featured Image Wrapper
     • Title
     • Arrow Navigation Controls
     • Pagination Dots Controls

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial