How to Create a Customized WooCommerce Website Using Divi (A Comprehensive Guide)

Updated: June 11, 2021

WooCommerce is the most popular plugin to create a WordPress-based e-commerce website. It’s extremely customizable, allowing you to create a unique e-commerce website with your design. Even if you have no coding skills. Divi can help you create a fully customized WooCommerce website without coding. We will show you how in this post.

Divi itself is a product of Elegant Themes. It is a WordPress theme that comes with a built-in page builder called Divi Builder.

Divi Builder comes with a theme builder feature that you can use to create a custom header, custom header, and other parts of your WordPress theme. If you have WooCommerce installed on your WordPress, you can also create custom WooCommerce pages such as shop page, single product page, checkout page, and so on. You can do so using the visual editor of Divi Builder. No need to touch a single line of code. Divi Builder itself is available in two versions. In addition to becoming an integral part of the Divi theme, it is also available as a standalone plugin which you can install on other WordPress themes.

Understanding the Main Pages of WooCommerce

Before stepping further, it’s crucial to understand the main pages of WooCommerce first. Here are the main pages of WooCommerce:

  • Shop Page
  • Cart Page
  • Checkout Page
  • Customers’ Account Page
  • Single Product Page
  • Product Archive Pages

Those pages were created upon the installation of the WooCommerce plugin. They are controlled by template files which you can find under the woocommerce/templates folder (full path: wp-content/plugins/woocommerce/templates). With Divi Builder, you can create custom templates to replace the default templates of WooCommerce above. The WooCommerce pages you can create the custom templates for are:

  • Shop Page
  • Cart Page
  • Checkout Page
  • Customers’ Account Page
  • Single Product Page
  • Product Archive Pages (Tags and Categories)

How to Create a WooCommerce Website Using Divi

Before getting started, make sure you have installed the Divi theme (or the Divi Builder plugin if you prefer to use it on another theme) on your WordPress site. Also, make sure you have installed and activated the WooCommerce plugin.

Once you are ready, you can start creating the custom templates to replace the default templates of WooCommerce:

Creating the Custom Shop Page

We have created a separate article that covers how to create a custom WooCommerce shop page using Divi Builder. You can read it if you are interested.

To start creating a custom shop page using Divi Builder, first, go to Divi -> Theme Builder on your WordPress dashboard. Add a new template by clicking the plus button. Select Shop on the WooCommerce Pages block and click the Create Template button.

Click Add Custom Body -> Build Custom Body.

On the appearing dialog, you can select the leftmost option (BUILD FROM SCRATCH) to create the custom shop page from scratch and click the Start Building button to start creating the template. Or you can also select the CHOOSE A PREMADE LAYOUT option if you want to create the custom shop page from a premade layout.

Select a row and then add the Shop module.

As you can see, the Shop module automatically loads your WooCommerce products to the canvas area. You can make the settings like the number of products per page and the number of columns on the Content tab on the settings panel. To enable the pagination, you can open the Elements block.

To style up the Shop module, you can go to the Design tab on the settings panel. There are about 14 blocks you can open on this tab. You can set things like the typography (font family, font size, font style, and so on) of the product elements (price, title, sale badge, and so on), text color, image size, and so on.

You can add more modules to your custom shop page according to your needs. Once you are done, you can click the Save button on the bottom-right corner to save the changes followed by the X icon on the top-right corner to exit the Divi Builder editor. This will take you back to the Theme Builder editor page.

On the Theme Builder page, click the Save Changes button to apply the change you have just made (custom shop page in this case).

Creating the Custom Cart Page

When creating a custom WooCommerce cart page using Divi Builder, you can use the Post Content module. The module will display the products that have added to the cart in a list, complete with the checkout button. Here is the example.

Divi Builder offers no premade layout for the cart page, so you need to create it from scratch. First, go Divi -> Theme Builder on your WordPress dashboard. Add a new template by clicking the plus button and select Cart on the WooCommerce Pages block. Click the Create Template button.

Click Add Custom Body -> Build Custom Body. On the appearing dialog, you can select the leftmost option and click the Start Building button to start creating the page.

As mentioned, you can use the Post Content module to display the products that have been added to the cart. Apart from this module, you can add any module to your liking.

Once you are done adding and editing the modules, you can click the Save button on the bottom-right corner to save the changes, followed by the X icon on the top-right corner to exit the Divi Builder editor. On the Theme Builder page, click the Save Changes button to apply the change you have just made (custom cart page in this case).

Creating the Custom Checkout Page

The steps to create a custom checkout page in Divi Builder are quite similar to creating the custom cart page above. You can also use the Post Content module. In the context of checkout page, the module will display the checkout form as follows:

Go to Divi -> Theme Builder on your WordPress dashboard. On the Theme Builder page, click the plus button to add a new template. Select Checkout on the WooCommerce Pages block and click the Create Template button.

Click Add Custom Body -> Build Custom Body. On the appearing dialog, you can click the leftmost option since Divi Builder offers no premade layout for the custom checkout page.

Add a row, followed by the Post Content module.

You can customize the Post Content module on the settings panel. Once you are done customizing the Post Content module, you can add other modules according to your needs.

Once done editing the page, you can click the Save button on the bottom-right corner to apply the change, followed by the X icon on the top-right corner to exit the Divi builder editor. On the Theme Builder page, click the Save Changes button to apply the change (custom checkout page in this case).

Creating the Custom Customers’ Account Page

Same as the cart page and the checkout page, you can also use the Post Content module when creating a custom customers’ account page. In the context of customers’ account page, the module will display the links associated with WooCommerce like recent orders, shipping address, and so on.

To start creating the custom customers’ account page, go to do Divi -> Theme Builder on your WordPress dashboard. Add a new template by clicking the plus button. Select My Account on the WooCommerce Pages block and click the Create Template button.

Once the template is added, click Add Custom Body -> Build Custom Body. On the appearing dialog, you can choose the leftmost option (BUILD FROM SCRATCH) as Divi Builder offers no premade layout for the customers’ account page.

Add a row and add the Post Content module once the Divi Builder editor opens.

You can customize the Post Content module from the settings panel. Once done customizing the module, you can add other modules according to your needs. Once you are done adding and customizing the modules, you can click the Save button on the bottom-right corner to save the changes and click the X icon on the top-right corner to close the Divi Builder editor.

On the Theme Builder page, click the Save Changes button to apply the change (custom customer’s account page in this page).

Creating the Custom Single Product Page

Divi Builder also allows you to create a custom single product page. You can even assign the custom single product page to specific products, products under certain categories, and product with certain tags. Divi Builder offers no premade layout on its layout library for the single product page, but it does offer ones via blog posts. One of which is this one. You can download it in case you prefer to create a custom single product page via a premade layout.

In this example, we will show you how to create a custom single product page from scratch. Divi Builder itself offers some modules you can add to a custom single product page, including:

  • Woo Image: To display product image
  • Woo Title: To display product title
  • Woo Rating: To display product rating
  • Woo Price: To display product price
  • Woo Description: To display product description
  • Woo Add To Cart: To add the add to cart button
  • Woo Meta: To display product meta (SKU, categories, tags)

To start creating a custom single product page, first, go to Divi -> Theme Builder on your WordPress dashboard. Click the plus button to add a template. On the Products block, select where you want to assign the custom template to. If you want to assign the custom template to all products, you can select the All Products option. Click Create Template.

Click Add Custom Body -> Build Custom Body. Since Divi Builder offers no premade single product page layout on its layout library, you can click the leftmost option on the appearing dialog.

Before adding any module to the canvas area, you can set the layout by adding some rows and sections. For more detailed instructions on how to create a custom WooCommerce single product page using Divi Builder, you can read our previous article.

Creating a Custom Product Archive Page (Product Category/Tag Page)

The last WooCommerce page you can create with Divi Builder is the product archive page, be it product category or product tag. Same as custom single product page, you can also assign a custom product archive page to a certain category or product. You can create multiple custom product archive pages if you want it.

The main module you need to create a custom product archive page is the Shop module. The steps to creating a custom product archive page are not much different from custom Shop page as we have covered earlier above. First, go to Divi -> Theme Builder on your WordPress dashboard and click the plus button to add a new template. Select a product category/tag you want to assign the custom template to on the Archive Pages block. Click the Create Template button.

Click Add Custom Body -> Build Custom Body. On the appearing dialog, you can select the leftmost option as Divi Builder offers no premade layout for the product archive page. On the canvas area, you can add some sections and rows according to your needs. Once the sections and rows are ready, add the necessary modules. Again, the Shop module is the main module you can use to create a custom product archive page. So, it’s required to add this module.

A little note. You need to set the Shop module to display products based on the current archive. To do so, open the Content block under the Content tab on the settings panel and enable the Use Current Page option.

To display the archive title dynamically, you can use the dynamic text feature of Divi Builder. First, add the Text module to the canvas area. Once added, open the Text block under the Content tab on the settings panel. Click the dynamic icon on the text editor and select Post/Archive Title on the appearing dropdown menu.

You can go to the Design tab on the settings panel to style up the Text module.

You can add other modules — other than the Shop module and the Text module — to your custom product archive page according to your needs. Once you are done editing the page, you can click the Save button on the bottom-right corner to save the change and click the X icon on the top-right corner to exit the Divi Builder editor. On the Theme Builder page, you can click the Save Changes button to apply the change (custom product archive in this case).

We have a separate article that covers how to create a custom product category page in WooCommerce using Divi Builder in case you are interested.

Done.

You have created all custom WooCommerce pages. Meaning that you have just created your customized WooCommerce website using Divi Builder.

The Bottom Line

The page builder era has opened an opportunity to create a unique, beautiful, and customized website without coding. With Divi Builder, you can even make a step further by creating a customized e-commerce website. Divi Builder comes with a WooCommerce builder that allows you to create a customized WooCommerce-powered e-commerce website in a visual way using its live visual editor. You can create custom pages to replace the default pages of WooCommerce like the shop page, cart page, checkout page, and so on as we have just covered above.

There are two options to use Divi Builder. First, you can use it as a standalone plugin. Second, you can use the Divi theme. If you prefer the latter option, you don’t need to install the Divi Builder plugin anymore as it is an integral part of the Divi theme.

Originally posted on: June 11, 2021

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!