Starting with the Divi Product Carousel plugin, you need to have this plugin installed on your website.
We have dedicated content for downloading and installing plugins if you need assistance.
To use this plugin, you also need to ensure you have the following:
- Divi Theme is installed and active
- And the WooCommerce Plugin is installed and active.
At this point, we have our plugin ready to use.
Note: Please make sure your plugin’s license key is active. With an active license key, you will receive updates and support for the product.
What’s inside the plugin?
After installing the plugin, you will have a ‘Product Carousel’ module in your divi module list. You can insert this module anywhere on your website and create a product carousel.
How do you insert the module on a website page?
Adding this module to a website page is an easy and similar process you do with any other Divi module. You must ensure your Woo-commerce store has products to showcase in a carousel.
Here is the step-by-step guide on how to insert a Product Carousel on a divi page-
- Navigate to the page or section where you want to insert the module.
- If it’s not in edit mode, click ‘Enable Visual Builder’.
- Now click the plus icon of a section, row, or module, depending on where you would like to have it.
- We Added a new regular section, then a single column, and in the search field, type ‘product’.
- Then, we have our desired module filtered out.
- Finally, click on the module to insert it.
Now that we have our module inserted on the desired page or section. Let’s explore all the features this module offers.
Divi Product Carousel Module Overview
Divi Product Carousel is a plugin from DiviGear that creates an elegant and interactive product slider for your eCommerce site. It comes with a lot of features. Now let’s take a look at all the features this module offers –
Unlike any other Divi module, this module’s settings are divided into three main navigation modes.
- Content: For all content-related things.
- Design: For all design settings.
- And Advanced: Extensive features and opportunities.
Content Tab
Content
The very first option we have here is content. Here is the list of features with a short description of what it does.
- Type: You can choose the type of product you would like to show. It can be recent, featured, on sale, best-selling, and more. You can also select a product category as a type and include the category you like.
- Product Count: Define how many products will be shown on your carousel.
- Order by: Choose how your product should be ordered. It can be from newest to oldest, based on popularity, rating, and more.
- Add to Cart Button: Allowing this will add an ‘add to cart’ button on hovering over your product images. This can be customized and moved to the bottom of the design tab.
Note: Button text depends on the single product type. For example, a variable product will show the button text ‘Select option’. [Link can be inserted how to change woo-commerce add to cart text]
Description: To show a short description of the product, turn this toggle ON.
- Show Full Description: Instead of a short description if you like to show a full description then turn this one ON.
Carousel Settings
Show Item Desktop: Define how many products you would like to show inside the carousel when someone browses with a desktop device.
Show Item Tablet: Define the number of items shown at a time on the tablet.
Show Item Mobile: Define the number of items shown on mobile devices here.
Multislide: Multislide will allow your user to slide all the products at a time from the viewport and the next set of products will appear here.
Note: You must enable ‘Arrow Navigation’ to make this setting work
Item Spacing: Control the space between items or carousel slides.
Transition Duration: Set the length of time in milliseconds (ms) a transition effect takes to complete.
Center Slide: The Center Slide allows a product to remain in the center. You will see this option working when you have an even number of items showing on the device.
Loop: Loop allows carousel items to continually repeat for an infinite time.
Autoplay: Autoplay will allow the carousel to run automatically.
- Pause on Hover: You can pause autoplay when hover by turning this feature ON.
- Autoplay Speed: Define the autoplay speed from here. The value you put here is a millisecond. 1 second equals 1000 milliseconds.
Arrow Navigation: Turn on to allow arrow navigation for your carousel.
Dot Navigation: Turn ON to allow dot navigation to your product slider.
- Dots Alignment: Align the dots according to your design with the options provided.
Equal Height Product: Make all carousel items the same height by turning ON the equal height option.
Note: This will make the container equal, not the content of your products
Vertical Align: If you do not want to use equal height you have the option to align your product vertically in three different positions.
Slide Effect: Two different slide effects are available for the product carousel. One is the slide which is by default selected. The other one is Coverflow which will give a 3D look to your carousel. You can choose based on your design needs. Coverflow will come up with some extra controls.
- Rotate: Define how much rotation you would like to have for your carousel sliders.
- Slide Shadow: You can turn on or off coverflow slider shadows.
Link
This is the default setting by Divi. It works to link the module with a URL.
Background
From here you can control the background of your sliders. This background will apply to each slider. You can set color, gradient, image, pattern, and mask.
Admin Label
Change the module label for easy identification.
Design Tab
Now that we are done with the content tab let’s move on to the design tab. We have all the design options to make a carousel look amazing. Let’s check them all.
Overlay
Overlay: Turn ON to enable overlay on your product slider. You can check the effect by hovering over the product image.
Overlay Color: From here you can choose your overlay color.
Title
Title on top: To show the title on top turn this button ON.
Hide the title: If you want to hide the title, turn this button ON.
Moreover, you can set the title font, font weight, font style, color, font size, and other associated settings.
Note: You have to keep ‘Hide the title’ off to make the other settings visible
Price
Price on top: If you want to show the Price on top turn this button ON.
Hide the Price: To hide the price, turn this button ON.
We have our custom Price design. You can change the font, font weight, style, set color, size, and other associated settings.
Note: You have to keep ‘Hide the Price’ off to make the other settings visible
Description
Here you can change the Description styles with associated settings. Such as – font, font weight, style, color setting, letter size, and more.
Sale Badge
The sale badge comes with essential design options that can be customized. Change font, color, text size, height width, and other related settings.
Add to Cart Button
Add-to-cart Position: Change the cart position to your preferred one with these two options.
If you choose ‘Over Image’, the add to cart button will appear when you hover over the product image.
Or,
If you choose the bottom option, the add to cart button will appear at the bottom of the product content.
- Add-to-cart Alignment: Here you have three alignment options to choose from.
- Add-to-cart Full width: By enabling this, the button will be full width if you want.
Rest you can customize the cart button settings of font, text, height, spacing, border, and more.
Review
Simply change the color of the review and its background according to your design.
Arrow Settings
Use previous custom icon: Turn ON this button will let you choose the previous custom icon.
Use next custom icon: It works similarly to the previous one. This means, turning this button ON will give you the icon change options.
There are also options for icon size, arrow color, and background. You can change them in the settings.
Arrow Circle: By turning this ON, it changes the background of the arrow on your product slider.
Arrow on hover: If you turn it ON, the arrow will only show when you hover over it.
Arrow position inside: Turn ON this setting to place the carousel arrows inside the content.
Dot Settings
Dot Color: Change the color of inactive Dots.
Active Dot Color: The active dot works when you slide the carousel. Here, you can customize the color of it.
Dot Circle: Just toggle the button ON will make your dot into a circle shape.
Image Settings
Turning ON the Hover Scale will show slight animation when you hover over a product image.
Next, you can change the corner radius, border styles, width, color, and style of the element.
Hover
You can turn these buttons ON to show the effects.
- Hover Background
- Title Hover
- Price Hover
- Description Hover
All these enabling buttons will give you access to change the color of these specific elements.
Sizing
Adjust the carousel module height and width according to your needs from here.
Spacing
Along with the regular spacing option. You can also set the margin and padding of ‘Content’, ‘Content Top’, and ‘Add-To-Cart’ to your module from here.
Border
You can set borders from here for your slides. This will affect each slider element separately. Change corner radius, border styles, colors, and more.
Box Shadow
Set box shadow to each element from here. You will find all shadow settings and presets here.
Transform
With the transform controls, you can change how things look by using the Scale, Move, Rotate, and Skew settings.
Advanced Tab
The advanced tab is the area where you can expand if you know CSS. It’s almost the same for all modules and varies a bit. For this carousel module, we have
- CSS ID & Classes
- Custom CSS
- Conditions
- Visibilities
- Transitions
- Position
- Scroll Effects
We are not going to briefly describe these features. You will find more details on the elegant themes website.
