Skip to Main Content

How to add an information accordion on a WooCommerce product with Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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.

Divi accordion design

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 have not yet 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.

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.

Create a divi 1 woocommerce product

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 Product Data, 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”.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Full width divi model

7. Then in the Variations tab under the Product Data Toggle, use the drop-down entry to create variations from all attributes.

Create woocommerce variations
Woocommerce product variations

8. Select "Set Regular Prices" from the drop-down menu to set the regular price for the three variables.

Define regular price variations woocommerce

9. In the dialog box, enter the value "50" and select OK.

Set a woocommerce price value

10. A 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.

Remove the woocommerce module

Then add a new Accordion module to replace the tabs.

Woocommerce accordion

In the Accordion Settings pop-up window, click the gear icon on the first accordion to open the individual accordion settings.

Accordeon and divi parameters

Enter the title "About the product".

Then hover over the body content input box and click on the dynamic content icon.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Use dynamic wordpress woocommerce content

Select "Product Description" from the dynamic content list.

Product description woocommerce

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
Configuration font icon accordions
  • 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
Woocommerce panel configuration
  • Body Font: Lato
  • Body text size: 16px
  • Body height: 1.8em
Woocommerce accordion body font configuration
  • Link text color: #ff9375

This will target all the links you have in the dynamic content for each accordion, like the star rating.

Woocommerce link color configuration
  • 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
Accordion border configuration divi woocommerce

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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Product information divi 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.

Product information divi accordion

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 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 mod 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.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
1 shares
Share1
tweet
Save