Product Carousel Overview

The DiviMerc Product Carousel module lets shoppers browse WooCommerce products in a sliding row on your Divi site. You can choose which products to show, what appears on each product card, and whether shoppers can browse using arrows or dots.

Content Tab #

Use this tab to set the product source, choose which details and buttons appear on each card, and configure slide movement and navigation.

Content #

• Product Source: Choose from All Products, Latest Products, Featured Products, On Sale, Best Selling, Top Rated, Specific Category, Specific Tags, Specific Products, Use Current Loop, Related Products, Upsells, or Cross-sells. The default is Latest Products.

• Included Categories: Select the product categories to include. (Available when Product Source is set to Specific Category.)
• Included Tags: Select the product tags to include. (Available when Product Source is set to Specific Tags.)
• Included Products: Search for and select individual products. (Available when Product Source is set to Specific Products.)
• Product Count: Set how many products to load.
• Offset: Skip a set number of products from the start of the list.
• Order By: Choose WooCommerce’s default sorting, latest, popularity, average rating, price from low to high or high to low, name, or random. (Available when Product Source is set to any option other than Latest Products, Best Selling, or Top Rated.)
• Exclude Categories: Leave out products in the selected categories.
• Exclude Tags: Leave out products with the selected tags.
• Exclude Products: Leave out individually selected products.
• Hide Out of Stock Products: Leave out products that are out of stock.

Elements #

• Product Image: Show the main product image and link it to the product page.
  • Secondary Image on Hover: Show the first gallery image when a shopper hovers over the card. Products without a gallery image keep their main image.
  • Image Position: Place the image at the Top, Left, or Right of the card. Set the position separately for desktop, tablet, and phone.
  • Image Size: Choose the WordPress image size to load: Medium, Medium Large, Large, or Full.
  • Image Aspect Ratio: Choose Original, Square (1:1), Portrait (4:5), Portrait (3:4), Portrait (2:3), Landscape (4:3), Landscape (3:2), Wide (16:9), or Custom. The default is Portrait (4:5).
    • Custom Image Aspect Ratio: Enter a ratio such as 5:4 or 5/4.
• Product Name: Show the product name and link it to the product page.
• Short Description: Show the product’s short description as plain text.
  • Description Length: Limit the short description to a maximum of 80 words.
• Product Rating: Show the product’s average rating as stars. (Displays when the product has reviews.)
• Review Count: Show the number of reviews the product has received.
  • Count Format: Use {count} for the number of reviews, {label} for review or reviews, and {rating} for the average rating.
• Product Price: Show the product’s WooCommerce price.
• Product Attributes: Show the product’s attribute names and values, such as Color: Red, Blue.
• Stock Status: Show WooCommerce’s availability text, such as In stock, Out of stock, or a backorder message.
• Product Add To Cart: Show the WooCommerce action button on each card. Its label and action depend on the product type and availability. For example, an in-stock simple product can show Add to cart, while a variable product can show Select options.
• Quick View: Show a button that opens the product in a popup. (Available when the Quick View extension is enabled.)

Carousel Settings #

• Slides Per View: Set how many cards are visible at once, from 1 to 12.
• Slides to Move: Choose how many cards move at a time.
• Slide Gap: Set the space between cards for desktop, tablet, and phone.
• Arrows: Show previous and next buttons.
  • Arrow Position: Place the arrows On the edge, Inside, Outside, Top Left, Top Right, Bottom Left, or Bottom Right. Set the position separately for desktop, tablet, and phone.
  • Reveal Arrows On Hover: Reveal the arrows on hover or keyboard focus. On touch screens, the arrows stay visible.
  • Previous Arrow Icon: Choose an icon for the previous arrow. An empty field uses the default chevron.
  • Next Arrow Icon: Choose an icon for the next arrow. An empty field uses the default chevron.
• Dot Navigation: Show one navigation dot per view below the carousel.
• Loop: Let the carousel wrap from the last view to the first and from the first view to the last.
• Center Slide: Keep the active slide in the center of the carousel.
• Mark Active Slide Early: Apply the new active slide’s styling as soon as the carousel starts moving.
• Autoplay: Move the carousel automatically. This option is off by default.
  • Autoplay Delay: Set how long each view stays visible before advancing.
  • Pause On Hover: Pause automatic movement while a shopper hovers over the carousel.
  • Transition Speed: Set how long the movement between views takes.
• Lazy Load Images: Choose Off to load all slide images with the page, Nearby slides to load images near the current view, or One after another to load images in sequence after the page loads.
• Preload Views: Set how many views ahead to preload, from 1 to 5. (Available when Lazy Load Images is set to Nearby slides.)

Meta #

• Category: Show the product categories.
  • Primary Category Only: Turn this on to show only the product’s parent category. Turn it off to show subcategories as well.
• Brand: Show the product’s brand on the card if it has a WooCommerce brand assigned.
  • Link Product Brands: Link the brand name to its archive page.
• Product SKU: Show the product SKU.

Badges #

• Badge Position: Choose Over Image or On Content. Select On Content to move the badges using Element Order.
• Sale Badge: Show a badge on products that are on sale.
  • Sale Badge Type: Choose Default to display Sale, Discount Percent to show a percentage such as -21%, or Save Amount to show an amount such as Save $10. For variable products, the badge uses the largest applicable discount.
• New Badge: Show a New badge on recently published products.
  • New Badge Days: Set how many days a product qualifies for the New badge, from 1 to 365.
• Featured Badge: Show a badge on products marked as featured.
• Low Stock Badge: Show Low Stock. (Displays when the product manages stock and its quantity is at or below the WooCommerce low stock threshold.)
• Low Quantity Stock Badge: Show the number of units left, such as Only 3 left. (Displays when the product meets the same stock conditions as Low Stock Badge.)
• Custom Badge: Show the text entered in Custom Badge Text under Product data > General. (The field appears when the Product Badge module is enabled. The badge displays on simple or variable products with custom badge text.)

Add To Cart Action & Behaviour #

This section appears when Product Add To Cart is enabled.

• Show Add To Cart Icon: Displays a cart icon before the button text by default.
  • Add To Cart Icon: Choose a different icon.
  • Only Icon: Hide the visible button text while keeping it available to screen readers.
    • Out of Stock Icon: Choose the icon for out-of-stock products or selected variations. The default is a cross.
• Variable Product Action: Clicking Select options opens the product page by default. Choose Quick View to let shoppers select a variation in a popup.
• Ajax Add To Cart: Enabled by default. Shoppers can add simple products and variations selected through card swatches without reloading the page.
  • Loading State: Show a spinner or text while the product is being added. The spinner is the default.
    • Loading Text: Customize the message shown when Text is selected. The default is Adding….
• Already-In-Cart State: Enabled by default. If the product or selected variation is in the cart, the button shows In cart or your custom label from Add to Cart Labels & Rules. Clicking it opens the product page.
  • Show Icon: Replaces the regular button icon with a checkmark by default.
    • In-Cart Icon: Choose a different icon when Show Icon is enabled.

Variation Swatches #

• Variation Swatches: Let shoppers select options like color or size directly on the card. The selection can update the image, price, SKU, and stock status. (Displays on variable products with matching variation attributes.)
  • Attributes to Show: Set how many variation attribute rows to display, from 0 to 10. Set it to 0 to show all variation attributes.
  • Show Attribute Name: Show an attribute name, such as Color or Size, above its swatches.
  • Swatch Attribute: Choose the attribute to display. Auto selects the first configured color or image attribute.
  • Fallback Attribute: Choose which attribute to show if a product doesn’t have the selected swatch attribute.
  • Max. Swatch Items to Display: Set the maximum number of swatches per row, from 1 to 20. Extra values appear as a +N link to the product page. 
  • Swatch Tooltip: Show the configured tooltip or attribute value on hover and keyboard focus. 
  • Button Out of Stock: Choose Fade, Cross (X), Diagonal line, Strikethrough, or Hide for unavailable button swatches. 
  • Color & Dual Color Out of Stock: Choose Fade, Cross (X), Diagonal line, or Hide for unavailable color/dual color swatches. 
  • Image Out of Stock: Choose Fade, Cross (X), Diagonal line, or Hide for unavailable image swatches.

Content Over Image #

Available when Product Image is enabled.

• Content Over Image: Place selected product details over the image. Turn off an individual toggle to keep that details in the card’s details area.
  • Position: Place the details at the Bottom, Middle, or Top of the image.
  • Reveal: Choose Always visible or On hover. 
  • Minimum Height: Set the minimum image height separately for desktop, tablet, and phone. (Available when Image Aspect Ratio is set to Original.)
  • Badges: Show badges over the image. (Available when at least one badge is enabled and Badge Position is set to On Content.)
  • Category: Show the product categories over the image. (Available when Category is enabled.)
  • Brand: Show the product brand over the image. (Available when Brand is enabled.)
  • Product Name: Show the product name over the image. (Available when Product Name is enabled.)
  • Product Rating: Show the star rating over the image. (Available when Product Rating is enabled.)
  • Product Price: Show the price over the image. (Available when Product Price is enabled.)
  • Short Description: Show the short description over the image. (Available when Short Description is enabled.)
  • Swatches: Show variation swatches over the image. (Available when Variation Swatches is enabled.)
  • Product Attributes: Show product attributes over the image. (Available when Product Attributes is enabled.)
  • Product SKU: Show the SKU over the image. (Available when Product SKU is enabled.)
  • Stock Status: Show stock availability over the image. (Available when Stock Status is enabled.)
  • Buttons: Show the card’s buttons over the image. (Available when Button Display is set to Always.)

Quick View #

Available when the Quick View extension is enabled and either the Quick View toggle is on or Product Add To Cart is on with Variable Product Action set to Quick View.

• Button Position: Choose Over Image for a visible icon, On Image Hover for a hover-only icon, or With Buttons for a text button in the card’s button area. (Cards without an image use With Buttons.)
• Quick View Icon: Choose the button icon. (Available with Over Image or On Image Hover.)
• Quick View Text: Set the button label. (Available with With Buttons.)

Element Order #

• Element Order: Drag enabled card elements or use the arrows to reorder them. (Badges appear with On Content. Buttons appear with Always when Product Add To Cart is enabled or Quick View is set to With Buttons.)

Empty & Loading State #

• Hide Grid When Empty: Hide the carousel if its product source returns no products on initial load. If shoppers filter the carousel and get no matches, they still see the empty message.
• No Results Message: Set the message shown when no products match.
• No Results Icon: Choose an optional icon to show above the message.
• Loader: Choose Spinner, Dots, Bar, or None. The default is Spinner. (Applies when a Product Filter refreshes the carousel and has no loader of its own.)
• Loading Text: Set the message screen readers announce while products load.
• Loader Color: Set the loader color for desktop, tablet, and phone. 
• Loading Overlay Color: Choose a color to overlay the cards while they reload.
• Products Opacity While Loading: Control how much the cards fade while they reload. Use 0 for fully transparent or 1 for fully visible.
• Loading Overlay Blur: Blur the cards while they reload, from 0 to 20px.

Background: Set the module’s background color, gradient, image, video, pattern, or mask.

Element Label: Rename the module in the Visual Builder.

Design Tab #

se this tab to style the product cards, highlight the active slide, and customize the carousel’s arrows and dots.

Item Card #

• Alignment: Align the card details and element rows to the Left, Center, or Right.
• Vertical Alignment: Place the details at the Top, Middle, or Bottom. Choose Space Between to keep details at the top and push buttons to the bottom.
• Card Minimum Height: Set the minimum card height for desktop, tablet, and phone.

You can also customize the card’s background, border, spacing, and box shadow.

Card Content: Customize the background, spacing, and border of the product details area below or beside the image.

Overlay: Customize the background, spacing, and border of the product details overlay. (Available when Content Over Image and Product Image are enabled.)

Image #

Available when Product Image is enabled.

• Framing: Choose Cover, Contain, Stretch, No framing, or Scale down only.
• Framing Position: Choose which part of the image stays in view when cropped.
• Zoom Image On Hover: Zoom the image slightly on hover or keyboard focus.

You can also customize the image’s border, box shadow, spacing, sizing, background, and filters.

Meta: Customize the typography and spacing of the category, brand, and SKU. You can style the SKU label and value separately. (Each set of controls is available when its corresponding option is enabled under Content > Meta.)

Badges #

• Inline: Place badges side by side and let them wrap. Turn this off to stack them. (Available when Badge Position is set to Over Image.)
• Horizontal Placement and Vertical Placement: Set where badges sit over the image. (Available when Badge Position is set to Over Image.)
• All Badges: Apply shared text, background, and border styles.
• Sale, New, Featured, Low Stock, Low Quantity, and Custom: Set separate text, background, and border styles for each badge type.
• Box Shadow and Spacing: Apply shared shadow and spacing to all badges.

Product Name: Customize the product name’s typography and spacing. (Product Name is enabled by default under Content > Elements.) 

Price: Customize the typography and spacing of the product price, with separate text styles for the sale price and the crossed-out regular price. 

Variation Swatches #

Available when Variation Swatches is enabled.

• Attribute Name Text and Attribute Name Spacing: Style the label above each swatch row and adjust its spacing. (Available when Show Attribute Name is enabled.)
• +N Text: Style the +N link that appears when more swatches are available than the card displays.
• Color & Dual Color: Customize the border, box shadow, and size of color swatches.
• Image: Customize the border, box shadow, and size of image swatches.
• Button: Customize the text, border, box shadow, spacing, and background of button swatches.
• Tooltip: Customize the tooltip text and background. (Applies when Swatch Tooltip is enabled.)
• Out of Stock: Use Out-Of-Stock Opacity to adjust how faint unavailable swatches appear with Fade. Use Cross / Line Color to set the color of the cross or line used to mark them.

Button Container: Adjust the margin and padding around the card’s buttons. (Available when Product Add To Cart is enabled or Quick View is enabled with Button Position set to With Buttons.)

Quick View Button #

Available when Elements > Quick View and the Quick View extension are enabled.

• Horizontal Placement and Vertical Placement: Position the round Quick View button on the image. (Available when Button Position is set to Over Image or On Image Hover.)
• Icon Size and Icon Color: Adjust the size and color of the round button’s icon. (Available when Button Position is set to Over Image or On Image Hover.)
• Button Text: Style the Quick View text label. (Available when Button Position is set to With Buttons.)

You can also customize the button’s border, box shadow, spacing, sizing, and background.

Add To Cart Button #

• Icon Color and Icon Size: Style the icon on the WooCommerce action button. (Available when Show Add to Cart Icon is enabled.)

You can also customize the button’s text style, border, box shadow, spacing, and background.

Out of Stock Button #

Available when Product Add To Cart is enabled.

• Button Opacity: Adjust how opaque the button appears when the product or selected variation is out of stock.
• Icon Color: Set the color of the out-of-stock icon. (Available when Only Icon is enabled.)
• Icon Size: Resize the out-of-stock icon. (Available when Only Icon is enabled.)

You can also customize the button’s text style, background, spacing, border, and box shadow.

Carousel Slides #

• Inactive Slide Scale: Resize the inactive slides.
• Inactive Slide Opacity: Adjust the opacity of inactive slides.
• Active Slide Scale: Resize the active slide.
• Active Slide Background: Set a separate background for the active slide. (Applies to the first visible slide by default or the centered slide when Center Slide is enabled.)

Review & Rating #

Available when Product Rating or Review Count is enabled under Content > Elements.

• Rating Size, Rating Color, and Rating Fill Color: Set the star size and the colors of the empty and filled stars. (Available when Product Rating is enabled.)
• Review Count Text: Style the review count. (Available when Review Count is enabled.)

Short Description: Customize the short description’s typography and spacing. (Available when Short Description is enabled.) 

Attributes Text: Style attribute names and values separately and adjust the spacing around the list. (Available when Product Attributes is enabled.)

Stock Text: Customize the spacing and style the in-stock and out-of-stock text separately. (Available when Stock Status is enabled.)

Arrows #

This section appears when Arrows is enabled.

Default #

• Icon Color: Set the color of the arrow icons.
• Icon Size: Set the size of the arrow icons.

You can also style the arrow buttons using Border, Box Shadow, Sizing, and Background.

Disabled #

• Icon Color: Set the color of disabled arrow icons.
• Disabled Opacity: Set how faint disabled arrows appear. When Loop is off, the previous arrow is disabled at the start and the next arrow is disabled at the end.

You can also style disabled arrow buttons separately using Border and Background.

Dots Navigation #

This section appears when Dots is enabled.

Default #

• Dot Gap: Set the spacing between navigation dots.

You can also customize Border, Spacing, Sizing, and Background.

Active #

You can customize Border, Sizing, and Background separately for the active dot.

Empty State #

• No Results Text: Style the message shown when no products match.
• Icon Color and Icon Size: Style the icon above the message. (Applies when a No Results Icon is selected.)

Sizing: Adjust the module’s width, height, and alignment.

Spacing: Set the module’s margin and padding.

Border: Set the module’s border and corner styles.

Box Shadow: Add a shadow to the module.

Animation: Apply a Divi entrance animation.

Advanced Tab #

Use this tab to apply custom CSS to the carousel or its individual elements and add attributes that a Product Filter can use to target the carousel.

Need Help? #

If you have any questions or need assistance, contact our support team: [email protected].