The Divi module WooCommerce Product Accordion provides an excellent way to display your products in a sliding style. Offering both vertical and horizontal sliders, it provides hover or click triggers so you can display product information such as images, price, rating, and add-to-cart button in a more presentable way.
Prerequisites — What Do You Need Before Getting Started #
Before you create the product accordion, 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 Accordion module.
Install our Divi WooCommerce product accordion module.
Without these, the product accordion won’t appear correctly!
Adding the Product Accordion 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 Accordion Module
- Select the gray + button on the row.
- Search for Product Accordion.
- Choose the Product Accordion Module.
- Set the Product Accordion Settings.
Child Components and Child Features #
1. Product Title #
Purpose: Shows the name of the product in the accordion.
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 accordion, 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 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 in the accordion.
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 Accordion Settings #
Content Tab – Woo Product Accordion Settings #
The content tab offers an extensive amount of options to control how products are displayed in the product accordion. This section is made to be customizable in layout and sorting.
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 accordion.
Default Setting: The 3 products option displays 3 products per page.
Customization options: The value can be set according to personal preference.
Content Setting → Product Gap #
Functionality: product gap controls setting the space between products in the accordion display for better separation and a more organized layout.
Default Setting: 8px, an 8px space between products.
Customization options: You can customize the gap by changing the value to make a larger or narrower space between product items.
Content Setting → Use Feature image as Product background #
Functionality: You can set the product featured image as the background for an accordion item.
Default Value: On by default.
Customization Options: You can turn ON/OFF to set or not to set the product featured image as the background for an accordion item according to your personal preferences.
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 the beginning of the accordion. 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 accordion 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 accordion display.
Content Setting → Use Product Image Overlay #
Functionality: It allows to apply colored overlay on the product image at the accordion. It’s usually utilised for hover effects or to improve the colour contrast of product details.
Default Setting: This option is disabled by default.
Customization options: Enabled if you like to apply a colored overlay on the product image.
Product Overlay Color
The color of the overlay is defined with this setting. The default is no overlay color, you can select a color from the color picker.
Accordion Settings #
Accordion settings effortlessly customize and make the product accordion on your WooCommerce shop look as you see fit, in a way that provides design freedom without compromising functionality.
Select Accordion Type: Here you have the possibility to decide between two types of accordion display: Horizontal and Vertical. Horizontal places the accordion items next to each other, while Vertical is a stack of one on top of the other.
Vertical Accordion at Mobile: This makes the accordions vertically on mobile, works perfect on small screens. When clicked it triggers accordion to change into mobile version, which is easier for navigation.
Select Event Type: This one allows you to set how the accordion items will be opened. You can select event type, hover, or click.
Hover: The item will open when the user hovers over it by the mouse.
Click: The user will click on the item to open it.
Active Item on First Time: This option is activated by default, it means that one accordion item will be opened automatically while the page is loading. This visually helps users by displaying an active item before they have to do anything on the accordion.
Active Item Order Number: This option allows you to select the accordion item which will open when the page loads for the first time
Accordion Container Height: You can set the height of the accordion container with this option. You can set up the height( in pixels) to tweak how the accordion fits into your design. This keeps the accordion container consistently presented.
Animation Settings #
With these animation options, you can customize the user journey to suite your needs and ultimately deliver a more delightful and engaging WooCommerce product accordion. There are a bunch of effects that you can choose from depending of your website design and so on.
Enable Animation: This option will let you enable or disable the animation. If activated, the accordion content will be animated as the user interacts with the accordion.
Animation: This contains many animation effects. You can select from the dropdown:
Slide Left: Slides the content to be displayed from the left.
Slide Right: The content slides in from the right.
Slide Up: The content appears to slide up from the bottom.
Slide Down: The content slides into down.
Fade: The content gradually fades in.
Zoom Left: The content will zoom from the left.
Center Zoom: The content zooms to the center.
Zoom Right: The content zooms from the right.
Duration (ms): The speed slider controls the length in milliseconds of the animation. Use a longer time here to slow down the animation, and a shorter time to speed it up.
Delay (ms): This slider specifies the delay to wait before starting the animation (in msecs). You can modify this so that it gives the illusion of a timed effect between multiple accordion items.
Animation Timing Function: The Timing function is the speed curve of the animation.
Enable Stagger: If activated, each accordion item animates with a delay between them instead of all at once.
Stagger: This slider controls the delay between the beginning of each item’s animation, to give a more staggered/controlled ‘one by one’ effect.
Background #
Customize the background display of the WooCommerce product accordion by setting a background color, image, or style. It allows you to customize the accordion 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 accordion in the WordPress admin panel. Administrators/developers are able to find/grab the accordion component faster than other elements.
Design Tab – Woo Product Accordion Settings #
The Design tab in the Woo Product Accordion module lets you customize how the product accordion appears on your site. You can adjust the look and feel of the accordion and its items.
Text: It is used for customizing text alignment and text shadow within the accordion.
Product Item: it is used for customization product items background, margin, padding, product wrapper rounded corners, and its broader style, width, color also used to give box shadow in product items.
Product Item Content: it is used for customization item container background, rounded corners, and its border style, width, color also used to give a box shadow in the item container.
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.
Additional Spacing: This is use to give full control of the margin and padding in your pagination wrapper. which improves the look and balance of the product accordion.
Sizing: This is where you control the size of your entire product accordion and your individual product items. You can make the items display in the accordion 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 accordion 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 accordion. It adds a feeling of depth and makes the pieces pop a bit more.
Filters Effect: Hue, brightness, and opacity sliders to make the accordion more appealing.
Transform: You can rotate and scale the accordion or items. These effects can be a good way to add some interactive effects or visible flare to the accordion.
Animation: Intermittent animations when the user interacts with the product accordion. 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 Accordion Settings #
The Advanced section of the Woo Product accordion module offers more customization for those who’d like to have more control over the behaviour and visibility of the product accordion, 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 accordion is displayed.