Product Carousel

Product Carousel places WooCommerce products in a responsive slider. It uses the same product-card system as Product Grid, so product elements, actions, and styling can remain consistent between the two modules.

Product sources

Choose products from the shared sources, including Latest, Featured, On Sale, Best Selling, Top Rated, specific categories, tags or products, Current Loop, Current Category, Current Tag, and Related Products. Product count, order, inclusions, exclusions, and stock visibility are also available.

Use Current Loop or Related Products inside the appropriate Divi Theme Builder template.

Carousel layout

Use Content → Carousel Layout to control how products fill the available space:

• Slides Per View sets how many product columns are visible.

• Slides To Scroll sets how far the carousel moves at once.

• Rows creates a multi-row carousel.

• Column and row gaps control spacing.

• Carousel Edge padding and alignment can create a peek of the next slide.

• Equal Height aligns slide and card heights when product content varies.

Most layout values can be adjusted independently for desktop, tablet, and phone.

Behavior

Choose how customers move through the carousel:

• Loop repeats the carousel continuously.

• Rewind returns to the beginning after the last slide.

• Mouse drag and touch swipe support direct navigation.

• Snap drag settles on a slide; Free Drag allows looser movement.

• Autoplay advances automatically using your chosen interval and pause behavior.

Navigation arrows

Show previous and next arrows, then choose their position, icons, size, and appearance in the Design tab. Make sure the arrows remain easy to reach without covering important product content.

Pagination

The carousel supports:

• Dots for direct page selection

• Fraction for a current/total indicator

• Progress for a visual progress bar

The relevant Design controls appear only for the pagination type in use.

Optional header

Add a heading, description, and product count above the carousel. Navigation can also be placed in the header, which works well for featured-product sections and category highlights.

Product cards

Product images, categories, brands, titles, prices, ratings, badges, swatches, Wishlist, Quick View, and Add to Cart behave consistently with Advanced Shop Grid. Variable products can open Quick View for option selection or lead to the product page.

For a detailed explanation of shared product-card features, see Advanced Shop Grid Module. For saved-product behavior, see Wishlist Module.

Design tips

Set Slides Per View and gaps first, then adjust the card design. Test long titles, sale prices, ratings, and products without images to confirm that Equal Height gives the intended result.

If the carousel preview is missing, confirm that Product Carousel is enabled under Divi Ecommerce → Modules, verify WooCommerce is active, and reload the Visual Builder.