Just like regular WordPress blog posts, you can also group your WooCommerce products into categories. If you have a large e-commerce website that sells a wide range of product types, grouping your products into categories is crucial as it makes it easier for your aspiring buyers to browse the products they need. In WooCommerce itself, 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 Builder comes with a feature that you can use to do so. We will cover it shortly in this article.
In case you are new to Divi Builder. It’s a premium WordPress page builder plugin developed by Elegant Themes. You can install it on any WordPress theme. Divi Builder is especially a great page builder for agencies for one main reason: its license allows you to install Divi Builder on as many websites as you want. Read here to learn more.
How to Create a Custom WooCommerce Product Category Page in Divi Builder
Before getting started, make sure you have installed and activated both Divi Builder and WooCommerce on your WordPress site. It would be great if you already have some products uploaded to your online store. Divi Builder 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.
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 Builder 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.
To enable the pagination, you can open the Elements block. Simply toggle the Show Pagination option to enable the pagination.
To style up the elements of the Shop module (product thumbnail, product title, product price, and so on), you can open the Design tab on the settings panel. 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.
To set the alignment of the text (product title, product price, and so on), you can open the Text block.
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 Builder 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 Builder”
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)?
Hello – same question as Darrel – how do you make the website open up this page and not the default woocommerce category page?
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.