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

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

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
    Product Carousel Item Module - Divi Product Carousel
    Product Carousel Item Module - Divi Product Carousel
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 3 - Setup Carousel Settings

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
      • Carousel General Settings - Divi Product Carousel
        Carousel General Settings - Divi Product Carousel
      • Slide to start on - Set the default slide number starting which, the carousel will start its motion
    • Carousel Responsive Settings
      • Carousel Responsive Settings - Divi Product Carousel
        Carousel Responsive Settings - Divi Product Carousel
      • 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
        • Carousel Motion Settings - Divi Product Carousel
          Carousel Motion Settings - Divi Product Carousel
        • 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
        • Carousel Navigation Settings - Divi Product Carousel
          Carousel Navigation Settings - Divi Product Carousel
        • 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

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
      • Product Title Styling - Divi Product Carousel
        Product Title Styling - Divi Product Carousel
      • 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
      • Carousel Slide Styling - Divi Product Carousel
        Carousel Slide Styling - Divi Product Carousel
      • Vertical Alignment
      • Make Height Equal
      • Margin
      • Background Color
      • Border & Border Radius
      • Box Shadow
    • Carousel Navigation Styling
      • Carousel Navigation Styling - Divi Product Carousel
        Carousel Navigation Styling - Divi Product Carousel
      • 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.