How to Create a Custom Single Product Page in WooCommerce with Divi Builder

WooCommerce is a popular plugin to add e-commerce functionality to your WordPress-based website. You can install it on any WordPress theme. The default single product page of WooCommerce — regardless of the theme you use — is not so bad. But you can make it better by creating a custom single product page template. You can add any element you want, set any color and typography. The theme builder feature of Divi Builder allows you to create a custom single product page template for WooCommerce without coding.

There are two ways to create a custom single product page for WooCommerce in Divi Builder. First, you can create one from a premade layout. Second, you can create one from scratch.

Create a custom single product page in Divi Builder from a premade layout

Although you can create a custom single product page from a premade layout, Divi Builder offers no layout for WooCommerce single product page on its layouts library. But you can download one from one of the Elegant Themes (the developer of Divi Builder) blog posts.

After downloading the layout file above (which is available in a ZIP format), unzip until you get the JSON file of the layout. Login to your WordPress dashboard and go to Divi -> Theme Builder. Click the two-arrow icon on the right side.

On the appearing window, go to the Import tab, click NO FILE SELECTED to select the JSON file of the layout and click the Import Divi Theme Builder Templates button to import the layout.

You should see a new template block on the Theme Builder page. Until here, you have successfully created the custom single product page template. Click the Save Changes button to save the changes.

If you want to edit the single product page template you have just created, you can click the pencil icon to open the template in the front-end editor of Divi Builder.

On the Divi Builder front-end editor, you can edit any element you want. Be it section, row or module. Click the gear icon to turn an element into an editing mode to edit it. You can also use the Layers View feature for easier navigation.

Create a custom single product page in Divi Builder from scratch

Creating a custom single product page from scratch is a suited option if you want to create a completely unique single product page. The process of creating a custom single product page template in Divi Builder is no different from creating a custom single post layout. In this article, we will demonstrate how to create a custom single product page like the following:

It takes the following elements to create a single product page like one above:

  • One section
  • Three rows
  • Several modules

When creating a custom single product page template with Divi Builder, you can specify where the single product template to be applied. Whether on the entire website, on a certain product, on products under a certain category, or on products under a certain tag.

To get started, go to Divi -> Theme Builder. Create a new template block and specify where you want to apply the single product page template on the Products section. In this example, we will create a custom single product page for products under the “T-shirt” category. Click the Create Template button.

Click Add Custom Body on the template block you have just created. Select Build Custom Body.

On the next page, select the BUILD FROM SCRATCH option and click the Start Building button to start creating the template.

By default, you are given a section with a divider. Before adding a row, you might want to remove the default divider on the section. To do so, hover your mouse over the section and click the gear icon to open the editing panel. You can remove the divider on the Dividers block under the Design tab.

# Row 1

We will use the first row to place the Woo Breadcrumb and Woo Chart Notice modules. Click the green plus button to add a new row. Select the single-column structure. Add the Woo Breadcrumb module.

On the Product option under the Content block, set to This Product.

To style the breadcrumb, you can go to the Design tab. You can set the typography (font size, font style, font family) and text color on the Text block. To set the spacing (paddings and margins), you can open the Spacing block. Make sure to click the green checklist icon every time you are done making new changes.

Once done with the Woo Breadcrumb module, add the Woo Cart Notice module.

On the Product option under the Content block, set to This Product.

To change the background, open the Background block under the Content tab. To set the typography, text color, and button styles, you can go to the Design tab.

# Row 2

We will use the second row to place the following modules:

  • Woo Image
  • Woo Title
  • Woo Rating
  • Woo Price
  • Woo Description
  • Woo Add To Cart
  • Woo Meta

Add a new row by clicking the green plus button. Select the two-column structure.

## Column 1

Go to the first column (the left one) and add the Woo Image module. On the Product option under the Content block, set to This Product.

You can set three elements to appear in this module: Featured image of the product, image gallery, and the sale badge. To set them, open the Elements block under the Content tab.

To set the image size, border radius, and sale badge text, you can go to the Design tab. You can play around with this tab to style the Woo Image module.

## Column 2

Go to the second column (the right one) and add the Woo Title module. On the Product option under the Content tab, set to This Product.

Go to the Design to style the title. You can set the text color and typography on this tab.

Once you are done editing the Woo Title module, add the following modules:

  • Woo Rating
  • Woo Price
  • Woo Description
  • Woo Add To Cart
  • Woo Meta

Again, you can go to the Design to style each module.

# Row 3

We will use the third row to place the Woo Tabs module and Woo Related Products module. Add a new row by clicking the green plus button. Select the single-column structure. Add the Woo Tabs module.

The Woo Tabs module consists of three tabs: Description, Additional Information, Review. If you want to disable one of these tabs, simply uncheck the tab you want to disable on the Include Tabs option under the Content block.

Go to the Design tab to set the style of the Woo Tabs module. You can set the typography of the body text and the tab text. Once you are done with the Woo Tabs module, add the Woo Related Products module.

Again, you can go to the Design tab to style this module.

Once you are done editing all elements (section, rows, and modules), click the Save button on the bottom-right corner to save the changes and click the X icon on the top-right corner to exit the Divi Builder front-end editor.

On the Theme Builder page, click the Save Changes button to apply all of the changes you have just made.

Now try to open a product under the category where you applied the custom template you have just created.

You can add other elements you think necessary, such as email subscription form, social media icons, payment info, and so on. Don’t hesitate to play around on the Design tab on the editing panel to style each element.

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

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

Pin It on Pinterest

Share This

Share This

Share this post with your friends!