When creating a product page in Divi, we can use the accordion module to display product information 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 create a product information accordion, as well as how to design the accordion (and its content) using the Divi Visual Builder.
Let's start.
Preview
Here is a preview of the design we will build in this tutorial.
Keep in mind that you must have a product setup as described in this tutorial to achieve the same results.
Start
To begin, you will need to do the following:
- If you haven't already, install and activate the Divi theme installed (or the Divi Builder plugin if you are not using the Divi theme).
- Install and activate the plugin WooCommerce. If you configure WooCommerce for the first time, 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.
Setting up the sample 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.
Then 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 Data of the product, change the product type to Variable product.
6. Add an attribute named “Type” with the following values: Swedish | Hot stone | Aromatherapy | Deep tissue. Make sure to select “Used for variations”.
7. Then in the Variations tab under the toggle of data of the product, 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. An Once you have finished, save or publish the product.
You are now ready to begin designing your layout with a custom Product Accordion.
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 information about the product: 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's 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 description of the product we have defined for the product on the backend.
Once the first accordion content is in place, open the second accordion settings 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 element and update the accordion settings 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 in order 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.
Open the Accordion module settings and update the following:
- 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
- Title Font: Bold
- Title Font Style: TT
- Text Title Size: 20px
- Space of the letters of the title: 0.2em
- Height of the title line: 2em
- Body Font: Lato
- Body text size: 16px
- Body height: 1.8em
- Link text color: #ff9375
This will target all the links you have in the dynamic content for each accordion, like the star rating.
- Text color of the unordered list: # ff9375
- Unordered list style type: Circle
- Unordered list item indentation: 5%
- Width of the border: 0px
- Width of the top border: 1px
- Color of the top border: #222222
And for the last step, let's add a small css extract to extract the default margin between the accordion scales.
On the Advanced tab, add the following CSS to the Toggle element:
margin-bottom: 0px;
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 him.
Once done, here is the final result.
I have included this design as a free download above. Please feel free to check it out for yourself. Note that you must have the product configuration described in this tutorial to achieve the same results.
NOTE: The default color for most items WooCommerce of a product in Divi is inherited from the secondary color value of the theme customization settings. It might be easier to update this secondary color once the colors module by woo.
Latest Thoughts
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 in a unique and concise way. Feel free to explore new, exciting accordion designs for your product pages. And, of course, you can use multiple rocker modules instead of an accordion to achieve similar results.
