The Product Carousel plugin for Divi and WooCommerce will give you the most advanced module for Divi and WooCommerce to help you showcase your products in a beautiful and responsive carousel. The module has tons of cool features and unique sliding effects like Cards, Coverflow, Fade, Flip & Slide.
With the Product Carousel plugin, you can display any kind of product on any page of your website using Divi builder.
The module is 100% compatible with the visual builder and the theme builder templates.
PS: for the plugin to work, you need to have Divi theme and WooCommerce installed. You can also use the Divi Builder plugin or Extra theme.
If you don’t have Divi, you can get it from here.
Install the plugin
- After you purchase hte plugin, we will send you 2 emails, one of them will contain the plugin zip file and the license key.
- Go to your admin dashboard > Plugins > Add New > Upload Plugin
- When you activate the plugin, a box will open asking for the license key, just add the one that arrived to your inbox.
- The module will appear in the modules list in Divi builder.
Download the demos
To get started quickly with the plugin, you can download all the demos on the demos page here by clicking the download button on the very top.
To import the demos, follow these simple steps:
After you download the layout, unzip the file. You will get the layout .json file.
1- Go to your admin dashboard -> Divi -> Divi Library.
2- Click on “Import & Export” at the top of the page.
3- The portability pop-up will open, click on the Import tab.
4- Choose the layout.json file.
5- Click the “Import Divi Builder Layouts” button.
Wait a few seconds and the layout will be imported and the page will reload and now you can see your layout in Divi Library.
Now, let’s dig deep into the module’s options…
Products Settings
With the available options, you can display any kind of product.
Products Type
The type of products to display. The available options are:
- Recent Products
- Featured Products
- Sale Products
- Best Selling Products
- Top Rated Products
Products From
Display products from all categories, specific categories, or dynamically based on the current archive page.
The available options are:
- The Entire Shop
- Specific Categories
- Current Archive Page
Tip: If you combine the “products type” and the “products from” option, you will be able to display anything you want. For example:
- Display the recent products from the entire shop, or from specific categories.
- Display the featured products dynamically from the current page. For example; if you are viewing the page of the T-shirts category, the module will display the featured products from this very category.
Total Products Count
It controls how many products to display in the carousel.
Order By
Choose how your products should be ordered. The available options are:
- Menu Order
- Popularity
- Rating
- Date: Newest To Oldest
- Date: Oldest To Newest
- Price: Low To High
- Price: High To Low
Product Elements
The product carousel plugin gives you the ability to display or hide useful information.
Show Sale Badge
Products under sale will have a sale badge by default on top of the product image. You can hide/display it.
Show Rating
Hide/display the star rating of the product.
Show Price
Hide/display the product price and sale price.
Show Short Description
Hide/display the product’s short description (excerpt).
Show Add To Cart Button
Make it easy for your customers to add the products to the cart by showing the button right under each product.
Carousel Settings
The Product Carousel module has some amazing and unique features that will impress your clients.
Let’s dig right in…
Number of Slides to Show
How many products to display on desktop, tablet, and mobile. By default, they are 4 on desktop, 2 on tablet, and 1 on mobile.
Number of Slides to Scroll
This option controls how many products to scroll on desktop, tablet, and mobile.
Slide Effect
With this option, you can get fantastic and unique views. The available options are:
- Slide
- Coverflow
- Fade
- Flip
- Cards
Centered Slides
If enabled, then the active slide will be centered, not always on the left side.
Autoplay
Enables Autoplay.
Autoplay Speed
Autoplay Speed in milliseconds, 3000 means 3 seconds.
Pause On Hover
Pause autoplay on hover.
Show Arrows
Show Prev/Next Arrows.
Show On Hover Only
Show Prev/Next arrows only when you move the cursor over the carousel.
Show Pagination
Show dot indicators.
Infinite Loop
Infinite loop sliding.
Mouse Wheel Control
Enables navigation through slides using the mouse wheel.
Space Between Slides
Set the space between slides.
Design Options
Now, let’s look at the design tab of the module.
The module has all Divi’s regular design options like sizing, padding, margin, animation, filters, conditions, and so on.
Also, you have full control of the design of text like the product title, description, price, add to cart button…
So I’ll not waste any time on this stuff. Let’s look at the unique design options related to the carousel.
Arrows Background
Set the arrows’ background color.
Arrows Color
Set the color of the arrows.
Dots Color
Set the color of the dots pagination.
Active Dot Color
Set the color of the active dot.
Same Height Product
Set all the products to have the same height. This is useful in case your product images do not have the same height.
Product Background
Sets the product’s background color.
Product Padding
Add space around the product.
Product Image Position
By default, the product image sets on the top. But now you can change that very easily. The available options are:
- Top
- Left
- Right
- Background: The image will be used as a background for the product which gives it a beautiful look.
Fill The Available Space
The image will fill all the available space vertically and horizontally. This option is available if you set the image to the right or the left side.
Product Details Background
The product details container’s background. This section contains the product title, rating, price, short description, and the add to cart button.
Product Details Padding
Give this section inside padding which makes its elements not close to the edges.
Sale Badge Background
Pick a color to use for the sales bade that appears on products that are on sale.