DiviGear Product Carousel plugin lets you display WooCommerce products in an interactive and customizable carousel layout.
Version Update: DiviGear Product Carousel plugin has been updated to v5.0.0 with full Divi 5 compatibility and Divi 4 backward compatibility.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains the essential settings for selecting products and configuring the carousel behavior.
Content
- Type: Choose which products you want to display from 7 product types
- Product Count: Define how many products will appear in the carousel.
- Order By: Choose how products should be sorted from 8 different options
- Add to Cart: Enable this option to display an Add to Cart button when hovering over product images.
Note: The button text depends on the product type. For example, variable products display “View Products” instead of “Add to Cart”.
- Description: Enable this option to display the product short description.
- Show Full Description: Display the full product description instead of the short description.
Carousel Settings
- Show Item Desktop: Define how many products are displayed at once on desktop devices.
- Show Item Tablet: Define how many products are displayed at once on tablet devices.
- Show Item Mobile: Define how many products are displayed at once on mobile devices.
- Multislide: Enable this option to move multiple products at once when navigating the carousel.
- Item Spacing: Adjust the space between carousel items.
- Transition Duration: Set how long the slide transition takes to complete.
- Center Slide: Keep a product centered within the carousel layout.
- Loop: Enable continuous carousel looping
- Autoplay: Enable automatic carousel movement.
- Pause on Hover: Pause autoplay when a visitor hovers over the carousel.
- Autoplay Speed: Define the autoplay interval in milliseconds.
- Arrow Navigation: Enable previous and next navigation arrows.
- Dot Navigation: Enable dot navigation below the carousel.
- Dots Alignment: Adjust the horizontal alignment of the navigation dots.
- Equal Height Product: Make all carousel items the same height. (This will make the container equal, not the content of your products.)
- Vertical Align: Choose how product content is aligned vertically inside the carousel item. Available options are Top, Center, and Bottom.
- Slide Effect: Choose the carousel transition style.
- Slide: Standard carousel effect.
- Coverflow: Creates a 3D carousel effect and unlocks additional settings.
- 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: Use this default Divi setting to add a link to the entire module.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
This tab allows you to style the overall appearance of the product carousel.
Overlay
- Overlay: Enable an overlay effect on product images.
- Overlay Color: Choose the overlay color.
Title
- Title on top: Display the product title above other product information.
- Hide the title: Enable this to hide the product title.
Additional settings allow you to customize the typography of the product title.
Price
- Price on top: Display the product price above other product information.
- Hide the Price: Enable this to hide the product price.
Additional settings allow you to customize the typography of the product price.
Description: Customize the typography settings for the product description text.
Sale Badge
- Sale Badge Background: Customize the background styling of the sale badge.
Additional settings allow you to customize the typography of the sale badge text.
Add To Cart Button
- Add-to-cart Position: Choose where the Add to Cart button appears:
- Over Image
- Bottom
- Add-to-cart Alignment: Adjust the button alignment. (Only available only when the button position is set to Bottom.)
- Add-to-cart Full width: Make the button span the full width of the product item. (Only available only when the button position is set to Bottom.)
- Add to Cart Background: Customize the button background color for both normal and hover states.
Additional settings allow you to customize the typography, spacing, border, sizing, and other button styles.
Review
- Review Color: Choose the color of the product rating stars.
- Review Background Color: Choose the background color of the rating area.
Arrow Settings
- Use previous custom icon: Enable this option to replace the default previous arrow icon.
- Use Next custom icon: Enable this option to replace the default next arrow icon.
- Font Size: Adjust the arrow icon size.
- Arrow Color: Choose the arrow icon color.
- Arrow Background: Choose the arrow background color.
- Arrow Circle: Display arrows inside a circular container.
- Arrow on hover: Show navigation arrows only when hovering over the carousel.
- Arrow position inside: Place navigation arrows inside the carousel content area.
Dot Settings
- Dot Color: Choose the color of inactive dots.
- Active Dot Color: Choose the color of the active dot.
- Dot Circle: Display navigation dots in a circular shape.
Image Settings
- Hover Scale: Adjust the image zoom effect on hover.
Additional settings allow you to customize image borders, border radius, styles, colors, and more.
Hover
Enable hover effects for different product elements.
- Hover Background: Apply a background effect on hover.
- Title Hover: Apply a hover color effect to the title.
- Price Hover: Apply a hover color effect to the price.
- Description Hover: Apply a hover color effect to the description.
Additional settings allow you to customize the hover colors for each element.
Spacing: Adjust the margins and padding of the module, including separate spacing controls for Content, Content Top, and the Add-to-Cart Button.
Sizing: Adjust the width, height, and alignment of the product element.
Border: Border customization options for the product element. You have the option to style each border individually or all the borders together.
Box Shadow: Apply a shadow effect to the product element.
Transform: Change the scale, placement, size, angle, etc. of the product element.
Animation: Add reveal animation effects and control the animation style, delay, duration, and more.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]
