Create "WooCommerce Product Carousel" In Divi

Build dynamic, high-converting WooCommerce product carousels directly inside the Divi Visual Builder without writing code.

Key store capabilities include:

Dynamically feature products using automated criteria (Recent, Featured, On Sale, Best Selling, or Top Rated) or custom queries.
Choose between smooth Slide or 3D Coverflow transition effects.
Enable interactive dot pagination and navigation arrows.
Display sleek text overlays over product imagery.
Complete visual control over product titles, pricing, star ratings, sales badges, and Add-to-Cart buttons.

The Woo Product Carousel Divi module is available for both Regular and Fullwidth Divi sections.

Pre-Requisites

Select WooCommerce Products As Carousel Items

Select which WooCommerce products to display in your carousel:
- Open the module Content tab.
- Expand the WooCommerce Products accordion section.
- Configure the following query options:
  - Listing Criteria: Choose how products are selected for the carousel:
    - Recent Products: Automatically display your newest inventory additions.
    - Featured Products: Display products marked as “Featured” in WooCommerce.
    - Sale Products: Showcase currently discounted items.
    - Best Selling Products: Feature your store’s top sellers based on order volume.
    - Top Rated Products: Display items with the highest customer review ratings.
    - Custom Product Filter: Build custom filtering rules:
      - Product Categories: Select products from specific store categories.
      - Order By: Choose the field used to sort products:
        
        No Order: Default database order without sorting.
        
        Product ID: Sort by internal WordPress product ID.
        
        Author: Sort by the product author account name.
        
        Title: Sort alphabetically by product title.
        
        Slug: Sort by URL slug.
        
        Date: Sort by published date.
        
        Last Modified Date: Sort by recent updates.
        
        Random: Randomize product order on page refresh.
        
        Menu Order: Sort by custom menu ordering values set in the product editor.
        
        ID Order In “Include Products”: Follow the exact sequence of IDs entered in the Include Posts By IDs list below.
      - Order Direction: Sort in Ascending (A-Z, oldest first) or Descending (Z-A, newest first) order.
      - Include Posts By IDs: Enter a comma-separated list of product IDs to display specific items exclusively.
      - Exclude Posts By IDs: Enter a comma-separated list of product IDs to omit specific items.
  - Total Products In Carousel: Limit total items shown in the carousel (enter -1 to include all matching products).

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Set “Content Types” For Carousel Item

Choose which product details and elements display on each carousel card:
- Each product card can display:
  - Product Image
  - Product Title
  - Short Description
  - Star Rating Stars & Review Count
  - Regular & Sale Prices
  - Sales Badge & Discount Percentage Tag
  - Action Button (Add to Cart / View Product)
- To toggle these elements, navigate to the Content tab and open the Content section:
  - Show Image: Toggle ON to display product images.
  - Show Title: Toggle ON to display product titles.
  - Show Description: Toggle ON to show product short descriptions.
  - Show Rating Stars: Toggle ON to display customer star ratings.
  - Show Price: Toggle ON to show product pricing.
  - Show Sales Badge: Toggle ON to display promotional sale badges on discounted items:
    - Show Discount Percent Text In Badge: (Visible when Sales Badge is ON) Toggle ON to show calculated discount percentages (e.g., “20% OFF”).
    - Badge Suffix Text: (Visible when Sales Badge is ON) Add custom suffix text to the badge label (e.g., “OFF” or “SALE”).
  - Show Button: Toggle ON to display CTA action buttons linking directly to the product permalink page:
    - Button Text: Custom button label (e.g., “Shop Now” or “View Product”).
    - Link Target: Choose Same Window or New Tab.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Carousel Settings

Configure transition animations, playback speeds, and responsive behavior:
- Effect: Select transition style:
  - Slide: Classic horizontal slide animation.
  - Coverflow: 3D perspective depth effect with additional controls:
    - Enable Coverflow Slide Shadow: Toggle drop shadows for inactive slides and customize Shadow Color.
    - Coverflow Rotate: Set rotation angles for side slides.
    - Coverflow Depth: Fine-tune z-axis 3D depth.
- Slides Per View: Set how many product cards display simultaneously (set independent values for desktop, tablet, and mobile).
- Space Between Slides: Pixel spacing between adjacent product cards.
- Initial Slide: Starting slide index (first slide index is 0).
- Centered Slides: Toggle YES to center active products in the viewport.
- Enable Loop: Toggle YES for infinite continuous looping.
- Autoplay: Toggle YES to advance slides automatically:
  - Autoplay Delay: Duration between transitions (in milliseconds).
  - Pause On Hover: Toggle YES to pause transitions when visitors hover over products.
- Transition Duration: Slide animation speed (in milliseconds).
- Show Arrows: Toggle YES to display Next/Previous navigation arrows:
  - Show Arrows On Hover: Toggle YES to reveal arrows exclusively on mouse hover.
- Show Dots Pagination: Toggle YES to enable dot pagination indicators.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Style Carousel Elements

Comprehensive visual styling options for all product carousel elements:
- Content Tab:
  - Background: Set background colors or gradients for the overall carousel wrapper.
- Design Tab:
  - Carousel Wrapper: Outer container margins and padding.
  - Slide:
    - Equal Height: Toggle YES to enforce uniform card heights across all products.
    - Background: Solid color, gradient, or background image.
    - Border & Radius: Rounded corners and border styling.
    - Box Shadow: Drop shadow effects for product cards.
  - Title: Choose heading levels (h1-h6), font family, size, weight, color, and line height.
  - Description: Customize body text typography and colors.
  - Button:
    - Use Custom Styles For Button: Toggle YES to customize button typography, background colors, borders, icons, and hover states.
    - Button Alignment: Align buttons left, center, or right.
    - Box Shadow: Apply custom drop shadows to buttons.
  - Content Wrapper:
    - Content Vertical Alignment: Align text and buttons to the top, center, or bottom of cards.
    - Overlay Content Over Image: Toggle YES to position product text directly over product images:
      - Content Visibility: Choose Show Always or Show Only On Hover.
    - Content Padding & Background: Custom padding and overlay background colors.
  - Arrow Navigation: (Requires Show Arrows enabled):
    - Arrow Size & Color: Icon dimensions and color.
    - Arrow Background: Fill color for arrow buttons.
    - Arrow Position: Pre-defined placement options (Middle & Enclosed, Outside, Overlapping, Top Right/Center/Left, Bottom Right/Center/Left).
    - Border & Radius: Rounded edges or circular buttons.
  - Dot Navigation: (Requires Show Dots enabled):
    - Dot Position: Align pagination left, center, or right.
    - Active & Inactive Dot Colors: Custom colors and opacity for active vs inactive dots.
    - Dot Dimensions: Adjust width, height, and border radius.
Pro Tip: Combine Dot Width, Dot Height, and Dot Border Radius to craft custom circular, square, rectangular, or line-style pagination indicators.

Pro Tip: Apply 50% border radius to arrow navigation containers to create perfectly circular navigation buttons.
WooCommerce specific styling elements:
- Pricing Wrapper: Container wrapping product price text:
  - Set horizontal price text alignment.
- Final Selling Price: Style font family, size, color, and weight for the current selling price.
- Retail Price (If Product On Sale): Style typography and strikethrough color for original retail prices on sale items.
- Star Rating:
  - Alignment: Horizontal star alignment (Left, Center, Right).
  - Fill Color: Color of active rated stars (e.g., gold/yellow).
  - Empty Color: Color of unrated star outlines.
- Rating Text: Typography and color styles for review count text next to stars.
- Sales Badge: Style promotional badges:
  - Orientation: Position badge at Top Left, Top Right, Bottom Right, or Bottom Left.
  - Background: Badge background color or gradient.
  - Border Radius & Style: Rounded corners and border outlines.
- Sales Badge Text: Typography, font size, and text color within sales badges.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Setup Demo Data

Install sample WooCommerce products to test your carousel layouts:
- Install & activate the free WooCommerce plugin.
- Import sample product data by following the official WooCommerce Sample Data Guide.
  - Download sample_products.csv
  - Download sample_products.xml

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Demo Page Layouts

Import pre-designed Divi builder layouts for the Woo Product Carousel module to quickly launch your store design.
How to import a demo layout:
- Create or edit a page in the Divi Visual Builder.
- Click the Ellipsis (…) icon at the bottom center to expand the page settings toolbar.
- Click the Portability (⇅) icon.
- Select the Import tab in the modal window.
- Choose your downloaded layout .json file from your computer.
- Check Replace existing content if you wish to overwrite current page content.
- Click Import Divi Builder Layout to complete import.
- Save your page once loaded.
Explore available layout downloads below:

Download - Coverflow Carousel Cards

Coverflow 3D carousel card layout for WooCommerce products.

Download - Fixed Overlay

Fixed overlay design layout for WooCommerce Product Carousel.

Download - Sliding Carousel

Clean sliding product carousel layout with images, prices, and star ratings.

Download - Overlay On Hover

Modern product carousel revealing text elements and action buttons on mouse hover.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial