When creating a product page in Divi, we can use the Add information accordion to woocommerce using dynamic content. This will give you a unique design for the product pages while preserving valuable space on the page.
In this tutorial, we’ll show you how to use Divi’s dynamic content feature to Add information accordion to woocommerce, as well as how to design the accordion (and its content) using Divi Visual Builder.
Remember that you must have a product configuration as described in this tutorial to achieve the same results.
Add information accordion to woocommerce: To start
To get started, you will need to do the following:
- If you haven’t already done so, install and activate the installed Divi theme (or the Divi Builder plug-in if you are not using the Divi theme).
- Install and activate the WooCommerce plugin. If this is your first time setting up WooCommerce, you will need to run the basic setup wizard to prepare your store. Once done, you are ready to add your new products.
- Create a new product as shown below.
Implementation of the example product
To configure the sample product for this tutorial, go to Products> Add New. Give the product the title “Massage (single session)” and click to use Divi Builder.
Next, update the following product page settings and product information:
1. Under Divi Page Settings, select the No Sidebar layout.
2. Add / select a product category
3. Add product image
4. Add the content of the description.
5. Under Product Data, change the product type to Variable Product.
7. Next, on the Variations tab under the Product Data Toggle, use the drop-down entry to create variations from all attributes.
8. Select “Set Regular Prices” from the drop-down menu to set the regular price for the three variables.
9. In the dialog box, enter the value “50” and select OK.
10. When you are finished, register or publish the product.
You are now ready to start designing your layout with custom Accordion product info.
Creation of the Product Info accordion with dynamic content in Divi
The default product layout displays product information using various Woo modules. For this example, we want to use the accordion to display three main product information: product description, additional product information, and product reviews. These three pieces of content are currently displayed in the woo tabs module. All we have to do is remove the woo tabs module and replace it with an accordion module with the same information introduced via dynamic content.
Here is how to do it.
First, click to use Divi on the front-end system to deploy the visual generator. Then remove the Woo Tabs module.
Then add a new Accordion module to replace the tabs.
In the Accordion Settings pop-up window, click the gear icon on the first accordion to open the individual accordion settings.
Enter the title “About the product”.
Then hover over the body content input box and click on the dynamic content icon.
Select “Product Description” from the dynamic content list.
This will display the long product description that we have set for the product on the backend.
With the first accordion content in place, open the settings for the second accordion and update the following:
- Title: Specifications
Then add the dynamic content “Additional Product Information” to the body.
Once the second accordion content is ready, add a new accordion item and update the settings for that accordion as follows:
- Title: Additional Information
Then add the dynamic content “Product Reviews” to the body to embed the item/content of the product review.
NOTE: Make sure you have added at least one product review to see the content on the live page.
Design of the product and content agreement with Divi
Now that our product information accordion has the dynamic content to display product information, we are ready to customize it using the settings of the built-in accordion module.
- Icon Color: # ff9375
- Use icon font size: YES
- Icon Font Size: 26px
- Toggle background color: #ffffff
- Open Text Title Color: # ff9375
- Text Title: # 222222
- Title Font: Lato
- Font Title: Bold
- Title Font Style: TT
- Text Title Size: 20px
- Title letter spacing: 0.2em
- Title line height: 2nd
- Body Font: Lato
- Body text size: 16px
- Body height: 1.8em
- Link Text Color: # ff9375
This will target any links you have in dynamic content for each accordion, like star rating.
- Text color of an unordered list: # ff9375
- Unordered List Style Type: Circle
- Unordered list item indentation: 5%
- Border Width: 0px
- Top border width: 1px
- Top Border Color: # 222222
And for the last step, let’s add a little CSS snippet to extract the default margin between accordion toggles.
On the Advanced tab, add the following CSS to the Toggle element:
Now let’s see the final design of the product info accordion.
Final adjustments to the layout
A few adjustments can be made to the layout to match the design of the accordion. For example, we can adjust the font of each of the modules to Lato, add a custom border and border-radius around the variable drop-down list, and update the Add to Cart button with a solid background color that suits.
NOTE: The default color of most WooCommerce elements of a product in Divi is inherited from the secondary color value of the theme’s customization settings. It might be easier to update this secondary color once the colors are mod by woo.
As we’ve learned, Woo Mods aren’t the only things that can be used to extract dynamic product information. The Product Information Accordion is a great example of how you can use any Divi module to display product information uniquely and concisely. Feel free to explore new and exciting accordion designs for your product pages.
For website maintenance service contact us.