Divi WooCommerce Product Carousel Module is not an average slider. It displays multiple products in a tidy, scrollable carousel. Customers can easily browse, discover, and find exactly what they want.
Prerequisites — What Do You Need Before Getting Started #
Before you create the product carousel, ensure you have a few things prepared:
Divi Theme Pack or Divi Builder Plugin
Upload the Divi Theme or Divi Builder Plugin and activate it.
To start with an online store of your own, get the WooCommerce plugin and activate it.
WooCommerce Products
Add and setup products into WooCommerce. These products are visualized by the Product Carousel module.
Install our Divi WooCommerce product carousel module.
Without these, the product carousel won’t appear correctly!
Adding the Product Carousel Module #
Add a New Section and Row
- Navigate to the visual builder of a page
- Tap the + (plus sign) to start a new section.
- Choose a Regular Section.
- Click the + within the section to insert a row.
- Choose your column configuration (e.g., 1, 2).
Add the Product Carousel Module
- Select the gray + button on the row.
- Search for Product Carousel.
- Choose the Product Carousel Module.
- Set the Product Carousel Settings
Child Components and Child Features #
1. Product Title #
Purpose: Shows the name of the product in the carousel.
Content Tab: #
Select Title Tag for product (H1, H2, H3, etc.). Also, the background of the title can be changed using the background feature.
Design Tab: #
Configure the text settings such as font, size, color, letter spacing, line height, and text shadow.
General Styling: #
These features are available for each child component and work the same.
Sizing feature: Set width, height, and alignment.
Spacing feature: Control Margin and padding system.
Border feature: Custom Border of the products carousel, like broader color, width, and styles, and rounded corners.
Box Shadow effects: Add shadow effects for depth.
Filters feature: Apply filters like Hue, brightness, and opacity sliders.
Transform feature: Use Transformations (scaling, rotation, etc.)for dynamic effects.
2. Featured Image #
Purpose: Shows the primary image of the product.
Content Tab: #
Image Size (small, medium, large, custom size). Also, the background of the featured-image can be changed using the background feature.
Design Tab: #
Overlay: Insert or delete image overlays, and modify the overlay’s background color.
3. Product Gallery #
Purpose: Shows more product images in a gallery form.
Content Tab: #
The Background of the product gallery can be changed using the background feature.
Design Tab: #
Gallery: Adjust picture size, gaps, and borders.
4. Short Description #
Purpose: Displays a brief product description.
Content Tab: #
Option to Show the Brief Product Description.
Design Tab: #
Short Description Text: Set font size, text color, letter spacing, and text shadow.
5. Product Price #
Purpose: Shows the price of the product.
Content Tab: #
Select the Price Tag and Type (i.e., sale, regular price).
Display Type: Shows the display type of the price inline, Inline Block, or Block.
Animation: Can select the animation type.
Design Tab: #
Price text: Set font size, text color, letter spacing, and text shadow of the price text.
6. SKU #
Purpose: Displays the product’s unique identification code (SKU).
Content Tab: #
Select the Stock Keeping Unit (SKU).
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Set font size, text color, letter spacing, and text shadow of the SKU text.
7. Cart Quantity #
Purpose: This is the input area to add several products in the cart.
Content Tab: #
Show Quantity Field for Adding Multiple Items to Cart.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Edit text like “Quantity”.
Cart Quantity: Control the color and background of the cart quantity input field.
8. Add to Cart button #
Purpose: Display a button to add products in the shopping cart.
Content Tab: #
This will include the button that adds the product to the cart.
Add to cart text: Customize the text that appears on the button (i.e., buy now or purchase now).
Add to cart read more text: Set alternative text for detailed product view if needed.
Icon Element: The Icon Element provides the ability to customize and show icon with the add to cart text.
Show Icon: Enable or disable the icon display next to the button text.
Icon: Select an icon from the icon’s list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between button text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Icon Element: Add icon color and customize size.
Add to Cart Text: Set font size, text color, letter spacing, and text shadow of the add to cart text.
9. Quick View #
Purpose: open a preview of the product in a popup.
Content Tab: #
Icon Element: The Icon Element provides the ability to customize and show icon with the quick view text.
Show Icon: Enable or disable the icon display next to the text.
Icon: Select an icon from the list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Quick View Text: Ability to set font size and style of quick view text.
Icon Element: Add icon color and size
10. Sale Badge #
Purpose: Displays a label to indicate product is on sale.
Content Tab #
Component Type: Choose Yes or set the component type to “Sale Badge” to make the badge functional.
Badge Position: Select the badge position in relation to the product image.
Sale Badge Text: Enter the text to show up in the sale badge (e.g., “Sale,” “Discount,” etc.).
Sale Badge Type: Choose the sale badge type that will be shown (e.g., “percentage,” “flat Amount,” etc.).Discount Show: Select when the discount should show up compared to the sales badge ( after sale badge or before sale badge)
Design Tab: #
Badge Text: Set font size and style of sale batch text.
11. New Badge #
Purpose: Displays a label to indicate the product is new.
Content Tab #
Component Type: Choose Yes or Set the component type to “New Badge” to make the badge functional.
Days: Use the slide to configure the number of days for which the product is considered new. This sets the duration the ”New” badge will be displayed according to the product release date.
Badge Position: Select the badge position in relation to the product image.
New Badge Text: Enter the text to show up in the new badge (e.g., “New,” “Just Arrived,” etc.).
Design Tab: #
Component Text: Set font size and style of the new batch text.
12. Ratings #
Purpose: Shows product ratings from customers reviews.
Content Tab: #
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Star Rating: Specify size, color, and margin for stars.
13. Description #
Purpose: The product’s entire description.
Content Tab: #
Describe the product in full.
Design Tab: #
Description Text: Change the font, size, color, and add a shadow to the text.
14. Stock #
Purpose: Show availability of product (in stock/out of stock).
Content Tab #
Component Type: Set component as “Stock” to show stock status of the product, whether available or not.
Show Custom Text: Check this to show custom text for the stock status (custom text in a new section to have more control of the appearance).
Custom Stock Status (In Stock Message): This is the text that will display when the product is in stock, for example, “In stock” or “Available”.
Custom Stock Status (Unavailable): As for the product status when out of stock (e.g., Out of Stock, Unavailable), the user can also customize the text as needed.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Change the font, size, color, and add a shadow to the text.
15. Categories #
Purpose: Shows product categories.
Content Tab: #
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (you can choose a type of animation to apply effects) Background (you can configure a custom background using this feature).
Design Tab: #
Categories Text: Set the font, size, and color of category names.
16. Tags #
Purpose: Shows tags of products.
Content Tab: #
Product tags are visible here.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Tags Text: Customize the product tags text.
17. Button #
Purpose: Add a button which can be set to link to any URL (i.e., a product page).
Content Tab: #
Adds a button with an external link option.
Button Text: Change button’s text
Icon Element: The Icon Element provides the ability to customize and show icon with the button text.
Show Icon: Enable or disable the icon display next to the button text.
Icon: Select an icon from the icon’s list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between button text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Button Text: Set button’s text font, size, and color.
Icon Element: Add icon color and size
18. Custom Text #
Purpose: Add a custom text under the product.
Content Tab #
Text: field to add personalized text under the product.
Icon Element: The Icon Element provides the ability to customize and show icon with the custom text.
Show Icon: Enable or disable the icon display next to the text.
Icon: Select an icon from the icon’s list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Set custom text font, size, and color.
Icon Element: Add icon color and size
19. Date #
Purpose: Shows the date your product was published or modified.
Content Tab: #
Date type: Shows the published or modified date of the product.
Date Format: Can select the date format.
Design Tab: #
Component Text: date text’s font, size, and alignment can be modified.
20. Divider #
Purpose: Inserts a line between blocks.
Content Tab: #
Divider Line Height: Slider used to customize the line size.
Design Tab: #
Divider line: Change the Color, Color direction starting and ending potion of the divider.
21. YITH Wishlist #
In order to use YITH WooCommerce Wishlist, users need to install YITH WooCommerce Wishlist plugin.
Purpose: Enables product Wishlist functionality.
Content Tab: #
Wishlist Text: Add to Wishlist: The text that will be displayed on the Wishlist button. User can edit this text (e.g., ”Save for later” or “Favorite”).
Added Wishlist Text: This is the text to be shown when the product is already in the Wishlist. It means the product is added to wishlist and clicking on it will take user to wishlist page.
Icon Element: The Icon Element provides the ability to customize and show icon with the wishlist text.
Show Icon: Enable or disable the icon display next to the wishlist text.
Icon: Select an icon from the icon’s list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Customize the Wishlist button text.
Icon Element: Add icon color and size
22. YITH Compare #
In order to use YITH WooCommerce Compare, users need to install YITH WooCommerce Compare plugin.
Purpose: Allows customers to compare different products.
Content Tab: #
Compare Text: Set the text for the compare button.
Icon Element: The Icon Element provides the ability to customize and show an icon with the compare text.
Show Icon: Enable or disable the icon display next to the compare text.
Icon: Select an icon from the list.
Show Image as Icon: Replace the icon with a custom image.
Show On Hover: Display the icon/image when the user hovers.
Show Only Icon: Only shows the icon without any text.
Icon Placement: specify the icon location (left or right);
Space Between Component and Icon: set the space between text and icon/image.
This element also has the following options: Display Type (Inline\ Inline Block\ Block), Animation (apply animation effects), Background (custom background).
Design Tab: #
Component Text: Customize the compare button text.
Icon Element: Add icon color and size
Global Features Of Woo Product Carousel Settings #
Content Tab – Woo Product Carousel Settings #
The ‘Content’ tab of the Divi WooCommerce Product Carousel module offers a variety of settings to control your product display. It gives you full control to customise the carousel’s style, the way it shows the items, and the number of items shown in the carousel area.
Content Setting → Product View Type #
Functionality: This option sorts products based on different parameters like product name, custom menu order, etc.
Default Sorting: Menu order + name, which orders products by the menu order and the name.
Customization options: You can choose different ways to sort by bestselling products, by latest products, etc., to customize the format for your website.
Content Setting → Product Count #
Functionality: This option lets you determine how many products are displayed for each page on the carousel.
Default Setting: The 12 products option displays 12 products per page.
Customization options: The value can be set according to personal preference.
Content Setting → Columns #
Functionality: The column setting specifies how many vertical columns are used to display the items: More columns make for a smaller product, and less columns create a larger product.
Default Setting: Products will display in 3 vertical columns.
Customization options: The number of columns can be customized to fit the design; it can be 2, 4, 6, 8, or even more.
Content Setting → Column Gap #
Functionality: column gap controls setting the space between product cards for better separation and a more organized layout.
Default Setting: 20px, a 20px space between columns.
Customization options: You can customize the gap by changing the value to make a larger or narrower space between columns, for example, 10px or 30px.
Content Setting → Order #
Functionality: This feature enables products to be shown based on one of several criteria, like sort by rating, sort by popularity, etc.
Customization options: Select how products are sorted, such as by rating, popularity, etc.
Content Setting → Product Offset Number #
Functionality: Allows to skip few products from beginning of the carousel. For instance, if you set the offset to 3, the first three products would not be displayed.
Default Setting: The default value is 0, which would start showing products on the carousel from the first one.
Customization options: This offset can be customized to jump over any certain number of products and set the starting point of the carousel display.
Carousel Settings #
Carousel Settings In WooCommerce Product Carousel module manage the way how the product carousel works and able to set the configuration for it.
Use Loop: If you want the carousel to play in a loop, make sure to Turn it On.
Per Move Item Slide: This option adjusts the number of items to be scrolled per navigation in the carousel. For instance, if set to 1 then it will move a single item in one cycle.
Rewind: If yes, this feature lets a carousel go back to the beginning once the user reaches the last product.
Auto Play: Activate this option to have the carousel start automatically, without the visitor having to do anything and having the products pass just by themselves.
Drag: When yes, it allows the user to swipe the carousel items manually by dragging and swapping the mouse or touchpad.
Reset Progress: With this setting, your carousel will be reset after the carousel finishes the product list and start again from the first product.
Control Mouse Wheel: Note that it is also possible to scroll the products in the carousel using your mouse wheel, providing an alternate means of navigating through the pagination.
Lazy Load: This option can increase the page load speed by loading the visible carousel items first. Scroll down, and new items automatically come in.Carousel Direction: Here, you can specify the direction of the carousel. You can go to the left or right, it depends on which products you want to display when the slides are transitioning.
Carousel Indicator #
The Carousel Indicator section in the Content tab of the WooCommerce Product Carousel module gives you a handful of options for making the navigation and interactivity of your carousel look better.
Use Arrow : If it is ‘YES’, you can press the arrow to go to the slide after or before the current slide in the carousel.
Show Arrow On Hover: The navigation arrows display only when a user hovers over the carousel. If ‘YES’, it keeps the design clean by default and shows the arrows just when they are needed.
Use Progress Bar: If ‘YES’, it shows a progress bar that indicates how far a user has gone through the carousel’s content.
Use Dot Pagination: Enable this to use dot pagination, meaning that dots (bullets) will be displayed to indicate where in the carousel you are. When you click a dot, the user will be navigated to that slide.
Dot Pagination Direction – This will let you select the direction where the dots will appear. It allows you to choose whether to paginate your box left to right or right to left, according to your design.
Use Number Pagination – When ‘YES’, numeric pagination is added, showing the number of the current slide and the amount of slides, which can be used to navigate to a specific slide.
Background #
Customize the background display of the WooCommerce product carousel by setting a background color, image, or style. It allows you to customize the carousel design so that it fits on your website and matches your site’s look.
Admin Label #
The Admin Label is suitable for locating/managing the product carousel in the WordPress admin panel. Administrators/developers are able to find/grab the carousel component faster than other elements.
Design Tab – Woo Product Carousel Settings #
The Design tab in the Woo Product Carousel module lets you customize how the product carousel appears on your site. You can adjust the look and feel of the carousel and its items.
Text: It is used for customizing text alignment and text shadow within the carousel.
Product Item: it is used for customization of product items background, margin, padding, product wrapper rounded corners, and its border style, width, color also used to give box shadow in product items.
Quick View Modal: This is use to design how users will see a quick view popup in the event they click to view a product without leaving the page. You can style this modal however you really want to match your theme!
Quick View Modal Items: Set the items which are being displayed inside the quick view popup. You can display the product image, price, description, or any other optional information inside the modal.
Sizing: This is where you control the size of your entire product carousel and your individual product items. You can make the items display in the carousel as big or small as you want.
Spacing: Changes the distance between the product items. You can close in or spread the gap between products for a tighter or more spread-out look.
Border: Allows you to put borders around the whole product carousel or single product items. This serves to visually distinguish the items from the background and other items.
Box Shadow: Allows you to apply a shadow around the product carousel. It adds a feeling of depth and makes the pieces pop a bit more.
Filters Effect: Hue, brightness, and opacity sliders to make the carousel more appealing.
Transform: You can rotate and scale the carousel or items. These effects can be a good way to add some interactive effects or visible flare to carousel.
Animation: Intermittent animations when user interacts with the product carousel. For instance, products could fade in or slide in from the side when the page is loaded or when users hover over them.
Advance Tab – Woo Product Carousel Settings #
The Advanced section of the Woo Product carousel module offers more customization for those who’d like to have more control over the behaviour and visibility of the product carousel, as well as how the user will interact with it. These are mostly for those who know a bit of web development or who want to make fine-tuned adjustments. It offers options such as adding CSS IDs or classes, using its own custom CSS for design adjustments, and setting conditions for when the carousel is displayed.