In WooCommerce, the appearance of product category pages is controlled by a template on the theme you use. If you don’t like the default appearance of the product category pages offered by the theme you use, you can create a custom template to replace it. Divi comes with a feature to customize WooCommerce parts.
In case you are new to Divi. It’s a premium WordPress theme from Elegant Themes that has a built-in page builder called Divi Builder.
Divi is especially a great theme for agencies for one main reason: its license allows you to install the theme on as many websites as you want.
How to Create a Custom WooCommerce Product Category Page in Divi
Before getting started, make sure you have installed and activated both Divi and WooCommerce on your WordPress site. It would be great if you already have some products uploaded to your online store. The theme builder feature of Divi itself allows you to create a custom category page template for the entire categories or specific categories.
In this article, we will show you how to create a custom product category page template for the entire product categories. We will create a very simple custom category page template in this example. We just want to show you the route.
Start Creating Custom Product Category Template
First, go to Divi -> Theme Builder on your WordPress dashboard. On the theme builder dashboard, click the plus button to create a new custom template. To create a custom product category page template for the entire categories, you can select the All Product Category Pages option on the Archive Pages section.
If you want to create a custom product category page template for a specific category only, you can select the Specific Category Pages option. Since we want to create a custom product category page template for the entire categories, we select the first option.
Click Add Custom Body and select Build Custom Body.
On the appearing dialog, select the Start Building option. You need to create the template from scratch as Divi offers no premade template dedicated to custom product category page.
Insert a row. You can select any column structure according to the concept of the product category page design you want to create. We use the single-column structure in this example.
Next, you can add the modules you need. The module to display the WooCommerce products itself is Shop.
By default, the Shop module displays the products by ordering and name. You can change it from the Product View Type option on the Content block under the Content tab. To set the number of products per page, you can enter the number you want on the Product Count option.
To set the number of columns, you can click the dropdown menu on the Column Layout option.
You can open the Elements block to enable pagination. Simply toggle the Show Pagination option to do so.
On the Design tab of the settings panel, you can style up the elements of the Shop module (product thumbnail, product title, product price, and so on). To style up the product thumbnail, you can open the Image block. From this block, you can set things like border radius of the thumbnail, border width, border type, and border color. You can also apply CSS filters if you want it.
Go to the Text block to set the alignment of the text (product title, product price, and so on).
To customize the product title element, you can open the Title Text block. From this block, you can set things like font family, font size, font style, text color, and so on.
You can open other blocks to style up other elements of the Shop module such product price, sale badge, and so on. Just don’t forget to click the green checklist icon every time you make new changes.
You can add other modules to your custom product category page template, even custom fields. Continue editing the template. Once you are done, you can click the Save button on the bottom right-corner, followed by the X button on the top-right corner to close the Divi Builder editor.
On the Divi Theme Builder dashboard, click the Save Changes button to apply the changes.
The Bottom Line
Divi comes with a theme builder feature that you can use to create custom templates to replace the default templates of your theme, including the product category page template. Thanks to this feature, you are able to create a unique WordPress-based online store with your own design.
In addition to the custom product category template, you can also create a custom single product page template, custom shop page template, and other pages belong to WooCommerce.
3 thoughts on “How to Create a Custom WooCommerce Product Category Page Template with Divi Theme Builder”
Hi Sunny,
Sorry for late response but It seems like it automatically does it (i.e. when user clicks on the product category, it takes them to the new product category page.
Hello – same question as Darrel – how do you make the website open up this page and not the default woocommerce category page?
Very helpful article but how do I set up my product categories to link to this instead of the woo commerce/Divi defaulted categories (which I’m trying to change in the first place)?