Setup And Style Divi Product Carousel

The WP Tools Divi Product Carousel plugin provides a divi module for cycling through WooCommerce product.

Use the Product Carousel divi module on the Divi Visual Builder page to add unlimited images, customize the carousel settings and custom style the carousel elements

Pre-requisites

1. A WordPress website
2. Divi Theme by Elegant Themes
3. WP Tools Divi Product Carousel plugin

Tools

1. Computer

Total Duration : 9 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Add Product Carousel Module On Divi Page

1. Edit a page in Divi Visual Builder
2. Search for Product Carousel in the divi module list
3. You will see the Product Carousel Settings

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Add WooCommerce Products To Divi Module

1. On divi module settings, goto Content Tab
2. Click on Add WooCommerce Product
3. This will open "Product Carousel Item" settings.
4. Click on Add Image and select/upload a image.
5. Click on the tick icon as per the screenshot below
6. Repeat the steps for other images

   

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 3 - Setup Carousel Settings

1. Setup carousel settings as per your needs. Set the start slide, carousel motion settings and show/hide arrow/dot navigation

   • Carousel General Settings

     • 

     • Slide to start on - Set the default slide number starting which, the carousel will start its motion
   • Carousel Responsive Settings

     • 

     • Number of visible items - Number of images to show on desktop, tablet and phone
       • Products to scroll - Set the number of products/slides that can scroll at a given time. Default is 1
         • Carousel Motion Settings

       • 

       • Infinite loop sliding - Toggle ON to set the carousel to scroll infinitely
       • Enable Autoplay - Toggle ON to start playing carousel when loaded
       • Autoplay Speed in milliseconds - Speed of the carousel slide
       • Pause Autoplay On Focus - Toggle ON to stop the carousel when a mouse pointer hovers over it
       • CSS3 Animation - Set the type of animation for a carousel slide
       • Animation Speed - Set the speed of the animation
     • Carousel Navigation Settings

       • 

       • Show Prev/Next Arrows - Toggle ON to show the previous and next arrows on the left and right of the carousel
       • Show Dots Navigation - Toggle ON to show the dots navigation at the bottom of the carousel

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - Carousel Styling Settings

1. Style the image slide, arrow / dot navigation elements and add custom css for HTML selectors for the carousel.

   • Product Title Styling
     • Go the Design Tab

     • 

     • Set padding
     • Set font, font weight, font style, text alignment, text color, text size, letter spacing, line height and text shadow
   • Carousel Slide Styling
     • Go the Design Tab > Carousel Slide

     • 

     • Vertical Alignment
     • Make Height Equal
     • Margin
     • Background Color
     • Border & Border Radius
     • Box Shadow
   • Carousel Navigation Styling

     • 

     • Set background color for Dot And Arrow Navigation
   • Custom CSS
     • Product Container
     • Image Container
     • Featured Image Container
     • Title
     • Arrow navigation + before
     • Dot navigation + before
     • Dot active + before

FREE DOWNLOAD

Start your FREE trial. No credit cards required.