The DiviFlash Product Carousel Module for Divi provides a versatile and customizable solution for showcasing multiple products in a visually appealing carousel format. Whether you want to highlight featured products or create a product gallery the Product Carousel module offers a flexible and user-friendly approach.
Content
Add New Product Element
You can choose the product elements (product image, title, etc.) you want to display in the product carousel. To choose the product elements, click on the plus (+) icon named “Add New Product Element” which will take you to the “Product Child Element Settings”, where you can add and customize the product elements.
To learn how to customize the product elements, click here.
Note: You can change the ordering of the product elements by dragging the product element bars.
Settings
- Type: Choose which type of products you would like to display.
- Use Current Page: When this option is enabled, the carousel will only display products that are relevant to the current page.
For example, suppose you have a product category page and you enable the “Use Current Page” option. In that case, the carousel will only show products that belong to that specific category, even if the carousel is set to display all products.
- Include Categories: Select the product categories you’d like to feature in the carousel. Only available if you choose “Product Category” as the “Type.”
- Product Count: Select the number of products to display in the carousel.
- Order By: Set the order of the displayed products.
Carousel Settings
- Carousel Type: Choose the type of the carousel you want to use. You have two options: Slide or Coverflow. The slide is the traditional carousel type whereas coverflow is for a more modern, 3D look.
- Max Slide Desktop: Choose the number of carousel items you want to display on desktop devices.
- Max Slide Tablet: Choose the number of carousel items you want to display on tablets.
- Max Slide Mobile: Choose the number of carousel items you want to display on mobile devices.
- Spacing: Adjust the space between the carousel items.
- Speed: Define the slide speed for the carousel items.
- Centered Slides: The first slide will be placed at the center when this option is toggled on.
- Loop: Enable this option to add a loop effect to the product carousel.
- Autoplay: Enable this option to have the sliders rotate automatically.
- Autoplay Speed: Define the speed of the autoplay effect. Only available when autoplay is enabled.
- Pause on Hover: When enabled, the auto-playing slide will pause when hovered. Only available when autoplay is enabled.
- Arrow Navigation: Turn on to enable arrows to navigate the product sliders.
- Dot Navigation: Turn on to enable dots to navigate the product sliders.
- Equal Height Item: Enable this to make all the product sliders equal in height.
Advanced Settings
If you select “Coverflow” as the “Carousel Type,” you’ll gain access to coverflow slider customization settings.
- Enables Slides Shadows: Turn on to add a shadow effect to the coverflow sliders.
- Shadow Color Dark: Choose the darker shade for the shadow effect.
- Shadow Color Light: Choose the lighter shade for the shadow effect.
Note: The shadow color options are only available if the “Enables Slides Shadows” option is enabled.
- Slide Rotate in Degrees: Adjust the angle of the carousel items.
- Stretch Space Between the Slides: Adjust the gap between the slides.
- Depth Offset: Adjust the depth of the carousel items.
- Effect Multiplier: Determines how many times the carousel items will slide or rotate.
Sales Badge Settings
- Show Badge: Turn on to display a sale badge over the product carousel sliders.
- Show Badge In Image Container: Enable to place the sale badge over the image.
- Badge Placement: Choose where you want to place the sale badge.
- Badge Text: Type in the text you want to display on the badge.
- After Badge Text Enable: Enable the option to add text after the sale badge text.
- Suffix Badge Text: Enter the text you want to display after the sale badge. Available only if you turn on “After Badge Text Enable.”
- After Badge Text Type: Choose if you display the price difference, price percentage, or both. The price difference or price percentage will be calculated dynamically based on your product’s regular price and sale price.
- Enable Custom SoldOut Text: Enable to use a sold out text instead of the sales badge.
- SoldOut Text: Input the text for the sold out badge. Only available when “Enable Custom SoldOut Text” is turned on.
Note: The “Enable Custom SoldOut Text” option will not work if your product is in stock.
Item Background
Add a background color, gradient, or an image to all the carousel sliders.
Background
Add a background color, gradient, image, and more to the carousel items container.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
Alignment
Change the placement of all the product elements relative to the carousel sliders’ containers.
Sales Badge Text
Separate sets of typography options for the sales badge text, price difference, and the sales badge suffix text.
Sales Badge Style
Styling options for the sales badge container.
Item Outer Wrapper
Border customization options for the outer wrapper of the carousel sliders.
Item Inner Wrapper
Border customization options for the inner wrapper of the carousel sliders.
Arrows
Keep the arrow navigation on to use those design options described below-
- Arrow Icon Color: Pick a color for the arrow navigation icons.
- Arrow Background: Pick a background color for the arrow navigation icons.
- Arrow Position: Change the vertical position of the arrow buttons relative to the product sliders.
- Arrow Alignment: Change the horizontal position of the arrow buttons.
Note: When selecting any alignment option other than justified, the arrows will come together, while choosing justified will maintain their separation, with one arrow on each side of the carousel.
- Opacity: Adjust the transparency of the arrow buttons.
- Disabled Arrow Opacity: Adjust the transparency of the arrow buttons.
Note: The navigation arrows will be disabled when you reach the end of the carousel if the loop effect is not active.
- Circle Arrow: Enable to make the arrow buttons circular.
- Disable Arrow Style: Turn on to style the disabled arrows.
- Disabled Arrow Icon Color: Pick a color for the disabled arrows.
- Disabled Arrow Background: Pick a background color for the disabled arrows.
- Arrow Prev Icon: Toggle on to use a custom icon for the previous button.
- Arrow Next Icon: Toggle on to use a custom icon for the next button.
- Spacing: Add custom margin and padding to the arrow buttons.
The next options are to customize the borders of the arrow buttons.
Dots
Keep the dot navigation on to use those design options described below-
- Alignment: Change the horizontal position of the dots relative to the product sliders.
- Dots Position: Choose if you want to place the dots before or after the carousel.
- Dots Style Type: Choose from three different styles of dots.
- Active Dot Border Style Enable: Turn on this option to add a second border to the active dot.
- Custom Dot Style Enable: Enable to set a custom width to the dots.
- All Dot Width: Adjust the dot width. Only available when “Custom Dot Style Enable” is turned on.
- Large Active Dot: Make the active dot larger than the rest.
- Dots Color: Pick a color for the dots.
- Active Dots: Pick a separate color for the active dot.
- Spacing: Add custom margin and padding to the dots.
Overflow
- Outer Wrapper Overflow: Control how content within the outer container is handled when it exceeds its boundaries.
- Inner Wrapper Overflow: Control how content within the inner container is handled when it exceeds its boundaries.
Sizing
Adjust the width, height, and alignment of the entire module.
Spacing
Add custom margins and padding to the whole module.
Transform
Change the scale, placement, size, angle, etc. of the module.
Animation
Apply a reveal animation effect to the product carousel and customize the delay, duration, repeat, etc. of the animation.
Advanced
The default tab for all Divi modules is used to add custom CSS code, conditions, visibilities, etc.
Product Child Element Settings
From this settings tab, you can customize each product element separately. Any customization you make here will override the settings you make in the “Product Carousel Settings.”
Content
Element
Type: Choose the type of the product element. There are 11 different product elements to choose from.
If you choose “Product Image”
- Outside Inner Wrapper: Enable the featured image of the product to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Product Title”
- Title Tag: Choose the HTML tag for the product title.
- Outside Inner Wrapper: Enable the title of the product to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Product Rating”
- Display: Select how to display the product element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Outside Inner Wrapper: Enable the product rating to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Product Price”
- Price Tag: Choose the HTML tag for the product price.
- Display: Select how to display the product element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Outside Inner Wrapper: Enable the product price to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Product Short Description”
- Enable Limit to Show Product Description: Turn this option on to limit the character length of the product description.
- Short Description Length: Define the character length of the product description. Only available if “Enable Limit to Show Product Description” is on.
- Outside Inner Wrapper: Enable the product description to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Add to Cart”
- Add to Cart Text: Input the text for the add to cart button.
- Display: Select how to display the product element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Outside Inner Wrapper: Enable the add to cart button to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Categories” or “Tags”
- Display: Select how to display the product element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Use Separator: Enable this option to use separators between the product categories or tags.
- Separator: Define the symbol you want to use as the separator. Only available if “Use Separator” is on.
- Use Link: Enable this option to link the product categories or tags with their respective pages.
- Open on New Tab: Decide if the category or tag pages will open in a new tab or in the same tab. Only available if “Use Link” is on.
- Outside Inner Wrapper: Enable the categories or tags to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Button”
- Display: Select how to display the product element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Read More Text: Input the text for the read more button.
- Outside Inner Wrapper: Enable the categories or tags to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Custom Text”
- Custom Text: Input the custom text you want to display.
- Display: Select how to display the product element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Outside Inner Wrapper: Enable the custom text to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Divider”
- Outside Inner Wrapper: Enable the divider to be placed outside the inner wrapper but inside the outer wrapper.
Overlay and Scale
If you choose “Product Image” as the “Product Element Type”, this addition section will show up.
- Overlay: Enable to add a gradient over the product image on hover.
- Overlay Primary Color: Choose the primary color for the overlay gradient.
- Overlay Secondary Color: Choose the secondary color for the overlay gradient.
- Overlay Gradient Direction: Adjust the overlay gradient direction.
Note: The overlay color and gradient options will only be available if you enable “Overlay.”
- Use Icon: Enable to use an icon on the overlay gradient.
- Icon Color: Choose a color for the overlay icon.
- Icon Size: Adjust the size of the overlay icon.
- Icon Reveal Type: Choose the reveal animation for the overlay icon.
Note: The icon customization options will only be available if you enable “Use Icon.”
- Image Scale Type: Choose how the product image will animate on hover.
- Disable Overlay on Mobile: Turn this option on to disable overlay on mobile devices.
Animation Settings
- Display Type: Select when to display the product element: always, on hover, or hide on hover.
- Always Show on Mobile: Activate this option to show the product element consistently on mobile.
Icon Settings
If you choose “Add to Cart” or “Button” as the product element, this addition section will appear.
- Use Icon: Enable to use an icon for the selected product element.
- Icon Color: Choose a color for the icon.
- Icon Size: Adjust the size of the icon.
Note: The icon customization options will only be available if you enable “Use Icon.”
- Use Image as Icon: Turn on to use an image instead of an icon.
- Image Alt Text: Input the alt text for the image.
- Icon Image Width: Adjust the width of the image.
Note: The Image customization options will only be available if you enable “Use Image as Icon”
- Use Only Icon: Turn on to use only the icon without any text.
- Only Icon Position: Choose the placement of the icon if you decide to display only the icon. Available only when “Use Only Icon” is on.
- Text Show on Hover: Turn on to display the text only on hover.
- Icon Image Placement: Choose the placement of the icon or the image.
- Space Between Text and Icon: Adjust the distance between the text and the icon.
Divider Line
- Divider Line Height: Adjust the height of the divider line.
- Divider Color Primary: Choose the primary color for the divider gradient.
- Overlay Color Secondary: Choose the secondary color for the divider gradient.
- Divider Color Direction: Adjust the divider gradient direction.
- Starting Position: Adjust the starting position of the divider gradient.
- Ending Position: Adjust the ending position of the divider gradient.
Background
Add a background color, gradient, image, and more to the post elements.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
Text
Options to change the alignment of the text in the product element and add a shadow effect to it.
Text Styles
Typography options for the text in the product element.
Pricing Styles
Typography options for the sale price and the regular price.
Rating
- Rating Size: Adjust the size of the product rating.
- Rating Color: Pick a color for the product rating.
- Disable Rating Color: Choose a color for the inactive stars in the rating system.
- Show Disable Rating for No Ratings Item: Enable this option to show inactive stars for products with no ratings.
Note: This section only appears if you choose “Product Rating” as the product element.
Spacing
Add custom margins and padding to the product element.
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.
Filters
Add color filters to the product element.
Transform
Change the scale, placement, size, angle, etc. of the product element.
Advanced
The default tab for all Divi modules is used to add custom CSS code, conditions, visibilities, etc.
Do You Still Have Questions?
If you still have questions, then contact our support team at support@diviflash.com
