Creation of a dynamic benefits grid for WooCommerce products

The way you design your product page has an immediate impact on the behavior of your visiteurs. A well-designed and personalized product page design can allow visiteurs to decide more easily if they want to buy your product. If you're looking for a way to make your product page more engaging, you'll probably like this tutorial. 

We'll show you how to include a dynamic product benefits grid in your design using Divi and the Advanced Custom Fields plugin. We'll start by creating a field group for benefits. We will then fill out the custom fields on our product page and include the contents dynamic in our product page template. 

Possible Outcome

Before we dive into the tutorial, let's take a quick look at the result on different screen sizes.

1. Install the ACF Plugin And Product Benefit Field Group plugin

Install the Advanced Custom Fields plugin

To display the different product benefits in the backend of our products, we will use the plugin free Advanced Custom Fields. Access your WordPress backend> Plugins> Add new> Find ACF plugin> Install> Activate .

Go to custom fields and add a new group of fields

Once you have installed and activated the ACF plugin, you will be able to access your custom fields and add a new group of fields.

Field group settings

Give your new group of fields a title and allow it to appear only on product pages.

• "Message type" equals "Product"

Add a first field

Continue by adding a new field for the title of your first product benefit.

• Field Label: Title of Benefit 1
• Field type: text

Repeat the step for the remaining fields

Do the same for the other benefits of the product and their descriptions. All these fields require the "Text" field type assigned to them.

• Title of the service 1
• Description of benefits 1
• Title of the service 2
• Description of benefits 2
• Title of the service 3
• Description of benefits 3
• Title of the service 4
• Description of benefits 4

2. Add benefits to products

Open or add a new product

Once your field group and fields are created, you can add the product benefits to your products on an individual level. Open a product of your choice or create a new one.

Complete the Product Benefits fields

And fulfill the benefits of the product.

3. Create a product page template in Divi Theme Builder

Go to Divi Theme Builder and add a new template

It's time to start with Divi! To create a new template, go to the Divi Theme Builder and click on "Add a new template".

Use a template on all products

We use this template on all products, but feel free to select products with a specific category or label instead.

Enter the model body template editor

Then enter the body of the model by clicking on "Add a custom body" and selecting "Create a custom body".

Edit section # 1

Background color

Once inside the template editor, you'll notice a section. Open that section and change the background color to black.

• Background Color: # 000000

Spacing

Move on to the section's design tab and add some custom top and bottom padding.

• Top Padding: 10px
• Bottom Padding: 10px

Add a new line

Column structure

Let's continue by adding a new line to the section which has the following structure:

Spacing

Without adding any mods, let's open the row settings and do some spacing adjustments.

• Use Personalized Gutter: Yes
• Gutter width: 1
• Width: 90%
• Maximum width: 100%

Spacing

Remove all top and bottom internal spacing.

• High Internal Margin: 0px
• Low Internal Margin: 0px

Add the Woo Cart Notice module to the column

Dynamic Content

The only module we need on this line and section is the Woo Cart Notice module. Make sure “This Product” is selected in the dynamic section.

• Product: This Product

Color Background

Then open the module settings and use a transparent background.

• Background Color: rgba (0,0,0,0)

Text settings

Switch to the "Design" tab and change the text font.

• Text Font: Karla

Button setting

Finish the plugin settings by defining the style settings:

• Use Custom Styles For Button: Yes
• Button Text Size: 20px
• Button Text Color: # 000000
• Button Background: # ffd623
• Button border width: 0px
• Rounded border Button: 0px

• Button font: Oswald
• Button Font Style: Shift

• High Internal Margin: 20px
• Low Internal Margin: 20px
• Left Internal Margin: 50px
• Internal Right Margin: 50px

Add section # 2

Gradient background

Add another regular section below the previous one. Then open the settings and use a gradient background as follows:

• Color 1: # 000000
• Color 2: #ffffff
• Start Position:
  • Desktop: 30%
  • Tablets: 57%
  • Telephone: 54%
• End Position:
  • Desktop: 30%
  • Tablets: 57%
  • Telephone: 54%

Spacing

Let's go to the Design tab and add a high internal margin.

• Top Padding: 150px

Add a new line

Column structure

Continue by adding a new line with the same structure as shown below:

sizing

Without adding any mods yet, we'll open up the settings and change the spacing as follows:

• Use custom gutters: Yes
• Gutter space: 1
• Width: 95%
• Maximum width: 2560px
• Line Alignment: Center

Spacing

We will be removing the top internal margin as well.

• Top Padding: 0px

Main Element

And to center the contents column on DeskTop, we will use two lines of CSS code in the main element of the module line.

desktop:

display: flex; align-items: center;

Tablet & Phone:

display: block;

Add the Woo Image module to column 1

Dynamic Content

It's time to add modules, we will start with the Woo Images module in column 1. Make sure “This product” is selected.

• Product: This Product

Vertical scrolling animation effect

We add subtle movement to the image using the horizontal motion scrolling effect in the advanced tab.

• Activate vertical movement: Yes
• Start offset:
  • Office: -4
  • Tablet and phone: 0
• Average offset: 0
• End offset: 0
• Trigger motion effect: middle of element

Add the Woo title module to column 2

Dynamic content

In column 2, the first module we need is a Woo title module. Make sure “This Product” is selected in the box contents dynamic.

• Product: This product

Title text settings

Then go to the design tab and style the title text as follows:

• Title font: Oswald
• Title font style: uppercase
• Title text color: # ffd623
• Title text size: 80px

Spacing

Complete the Woo title module by adding left and right margins.

• Left margin: 5%
• Right margin: 5%

Add the Woo description module to column 2

Dynamic content

Let's move on to the next module, which is a Woo description module. We use the following dynamic content for this:

• Product: This product
• Description type: Short description

Text settings

Switch to the module design tab and change the text settings accordingly:

• Text Font: Karla
• Text color: #dbdbdb
• Text size: 17 px (desktop and tablet), 15 px (phone)
• Text line height: 1,9 em

sizing

Then change the width on different screen sizes.

• Width: 59% (desktop), 82% (tablet and phone)

Spacing

Complete the Woo description module by adding custom margin values ​​in the spacing settings.

• Upper margin: 50px
• Bottom margin: 100px
• Left margin: 5%
• Right margin: 5%

Add the Blurb module to the 2 column

Dynamic content

To display the product benefits that we added in the first part of this tutorial, we will use the Blurb modules. Add a first Blurb module and use the dynamic content of the first benefit produced for the title and the body.

• Title: Benefit Title 1
• Body: Benefit Description 1

upload Image

Upload an image or use an icon of your choice next. You can find the ones we've used throughout this tutorial in the download folder you were able to download at the beginning of this tutorial.

Image / Icon Settings

Move on to the module's design tab and change the image / icon settings as follows:

• Image / Icon Placement: Top
• Image / Icon Alignment: Left

Title Text Settings

We're modifying the title text settings next.

• Title Font: Oswald
• Title Font Style: Upper case
• Title Text Size: 25px

Body Text Settings

Along with the body text settings.

• Body Font: Karla
• Text size: 17 px (desktop and tablet), 15 px (phone)
• Body line height: 1,9 em

sizing

Then go to the sizing settings and change the widths. It is important to use a main width less than 50%, this will allow us to show two Blurb modules side by side in the next steps.

• Image Width: 25%
• Width: 49%

Spacing

We will also add spaces around the Blurb module using custom padding values ​​on different screen sizes.

• Upper padding: 8%
• Lower padding: 8%
• Left padding: 8% (desktop and tablet), 2% (phone)
• Right padding: 8% (desktop and tablet) 2% (phone)

Main element

Now we are going to make sure that the Summary module displays the text next to each other, in two steps. First, we'll make sure the module width is less than 50% (like we did in the previous step). Next, we'll use the property on the row. We will add this CSS property on the main element in the advanced section.

Display: inline-block;

Clone the summary module 3 times

Once you've completed the first Blurb mod, you can clone it three times. You will automatically notice that the Blurb modules appear in a grid.

Edit the Blurb module images

Edit the image in each duplicate Blurb pod. You can find them in the download folder that you may have downloaded at the beginning of this article.

Modify the dynamic content of the Blurb module

Also modify the dynamic content of each duplicate Blurb module.

• Title: Title of the service (2,3 or 4)
• Body: description of the advantages (2,3 or 4)

Add borders to Blurb modules individually

Blurb module 1 border settings

Now, to finish designing our grid, we're going to add borders to the Blurb modules on an individual level. Open the first Blurb mod and use a straight border.

• Right border width: 1px
• Right border color: # ffd623

Also add a bottom border to the first Blurb module.

• Bottom border width: 1px
• Bottom border color: # 000000

Blurb module 2 border settings

Then open the second Blurb module and use a bottom border.

• Bottom border width: 1px
• Bottom border color: # 000000

Blurb module 3 border settings

Complete the grid design by adding a straight border to the third Blurb module.

• Right border width: 1px
• Right border color: # ffd623

Add Woo Add to basket Module in column 2

Dynamic content

The last module we need in our design is a Woo Add to Cart module. Make sure "This product" is selected in the dynamic content area.

• Product: This product

Field settings

Go to the next design tab and change the field settings.

• Fields background color: #ffffff
• Field text color: # 000000

• Rounded fields: 0px (all corners)
• Width of lower border of fields: 1px
• Color of bottom border of fields: # 000000

Button settings

Then, style the button accordingly:

• Use custom styles for the button: Yes
• Button text size: 20 pixels
• Button text color: # 000000
• Button background color: # ffd623
• Button border width: 0px
• Button border radius: 0px

• Button font: Oswald
• Button font style: uppercase

• Upper padding: 20px
• Bottom padding: 20px
• Left padding: 50px
• Right padding: 50px

Spacing

And complete the module parameters by adding custom margin values.

• Upper margin: 100px
• Left margin: 5%

3. Save the modifications of the theme generator and preview the result

Once you've finished designing the product page template, you can save all of your Theme Builder changes and display the results on your products!

Preview

Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.

Latest Thoughts

In this article, we've shown you how to get creative with your next Divi product page template. Specifically, we've shown you how to include a dynamic product benefit grid to add additional benefits to your product page. We created this tutorial using Divi in ​​combination with the Advanced Custom Fields plugin. You could also download the JSON file for free! If you have any questions or suggestions, feel free to leave a comment in the comments section below.