How to build a Divi product category page template

Do you have a WooCommerce website and want to know how you can use the Divi Builder to create a Divi Product Category Page template?

If yes, then you are at the right place.

Here we have a step-by-step guide to help you out and will also show you how to add product filters to your page using a free WordPress plugin.

Divi Product Category Page overview

Category pages on eCommerce websites allow you to organize and showcase similar products in a single page. It’s a powerful tool that can help customers discover new products in your store, which can lead to improved sales figures.

And with the Divi Theme Builder, all you have to do is set up category page templates. You can then reuse the template for all the WooCommerce product category pages you want. Sounds powerful, doesn’t it?

As such, we have prepared a detailed walkthrough showing you how to use the Divi builder to design the category page templates. What’s more, we will also guide you on how you can make the products filterable to improve the user experience.

So without further ado, let’s get started:

(Optional) Step 1: Update your Products & Product Categories

Before setting up your Divi Product Category Page, it’s important that you go and check the WooCommerce products available on your website. It’s important that all products are correctly categorized and contain the proper tags.

Check WooCommerce Product Categories

The template will use these tags to fetch and display the products on the category page. As such, without proper category assignments, the feature will not work.

Once you are sure that all your products have the right categories and tags, it’s time to start creating the category page template. But first, let’s set up a product filtering system.

Step 2: Install WooCommerce Product Filter by Themify

The Divi Builder is a powerful designing tool that we will use to create an amazing-looking category page template. However, it won’t be able to make the products on the page filterable, which is a necessary feature for modern online shopfronts. As such, we will need to install a separate plugin.

The plugin we will use in this tutorial is the WooCommerce Product Filter by WooBeWoo. It’s free to use and available right from the WordPress plugin repository. As such, you can easily install it from your WordPress backend dashboard.

Install WooBeWoo WooCommerce Product Filter

Once the plugin gets installed, you will find a new option – “Woo Product Filter” in your WordPress backend. Here you’ll get to create/add new filters.

Woo Product Filter Interface

To create/add a new filter, click on the “Add New Filter” button. It will ask you to name the filter.

Create a new filter

Now, using the drop-down menu, select which filters you want to add.

Filter options

For the sake of this tutorial, we will use the following filters:

• Price
• Rating
• Featured
• On Sale
• Stock Status

You can get a preview of how the filter will look like on the right-hand sidebar of the interface.

Filter Preview

Going into the “Options” tab and “Design” tab you can further fine-tune the look and feel of the filter. However, here we will keep it simple and like what you see in the above image.

Once you’re done creating the new filter, click on the “Save” button and that’s it. Your new Woo Product Filter is ready. To use it, just copy and paste the shortcode as shown in the image below.

Woo Product Filter shortcode

Now, let’s go and create our Divi Product Page Template.

Step 3: Create Divi product category page template using the Theme Builder

After creating the product filter, it’s time to create the Divi Product Category page. To do this, first head over to the Divi>Theme Builder from the backend side panel.

Next click on the “+” button to “Add New Template”. Select the option “All Product Category Pages” in the template settings. This will assign this template’s design to all product categories you create.

Add New Product Category Template

You now have a new template – “All Product Category Pages” available on the Divi Theme Builder menu. Click on the “Add Custom Body” button and then click on “Build Custom Body.” This will trigger the Divi Builder. Choose “Build From Scratch” and let’s start building the Category Page Template.

You are now free to create/design your Product Category Page template any way you like. We are going to keep it as minimal as possible to make the tutorial brief and give you an idea of the things that are absolutely necessary.

Our Product Category Page will have a simple two-column layout, with a narrower 1st column and wider 2nd column.

The 1st column will contain two Divi modules. At the top, we have a “Post Title” module that will highlight the Product Category name.

Right below that we will have the Product Filter area.

The wider column will contain the “Shop” module. Here, all the products will show up that corresponds to the specific Product Category and the selected Product Filters.

So now that you have an idea of the Product Category Page template, let’s start designing it module by module.

1. Build the Post Title

After entering the Divi Builder you will be prompted to “Insert Row.” Select the 2-column layout with a narrow 1st column. Here’s the one we picked for this example:

Select 2-column layout

Now, click on the black “+” button on the first column and search for the “Post Title” module.

Add Post Title Divi module

Select it.

Next, go into the Module settings and under the “Content” tab, go to “Elements”. Make sure only the “Show Title” option is enabled and the rest are disabled.

Post Title – Only Show Title

Again, under the Content tab, go to the “Background” option and select a color for the module. To get the color we used in this tutorial, use the hex code – #1a1b1b, which matches with the global header.

Post Title – Background Color

Once done, go into the “Design” tab and fine-tune how the title will appear. We have applied the following settings and left the rest to its default configs.

Title Text:

Post Title – Text design

• Heading Level:  H1
• Font Weight: Bold
• Font Style: TT
• Text Alignment: Center
• Text Color: White (Hex Code: #ffffff)

Spacing:

Post Title – Text Spacing

• Top Padding: 50px
• Bottom Padding: 40px
• Left Padding: 20px
• Right Padding: 20px

Border:

Post Title – Border

• Rounded Corners: 10px on all four corners

And that takes care of the Title area which will show the current Product Category. On to the next step.

2. Build the Product Filter area

To add the Product Filter, add a “Text” module right below the “Post Title” as shown in the image:

Add a Text module

Open the Text module settings and under the “Content” tab go to Text and remove the default Body text. Now copy+paste the shortcode for the WooBeWoo product filter we created earlier. Once done, click the green tick button and you should see the Product Filter show up under the Post Title.

Add Product Filter Shortcode

Now, for the sake of this tutorial, we are going to leave the filter area as it is. However, you can always go into the text module settings and play around with the settings to tweak how it looks and feels.

3. Build the Shop Module

With the first column taken care of, it’s time to add the “Shop” module to the 2nd column.

To do this, simply click on the grey “+” button and search for “Shop.”

Insert shop module

As before, you can go into the module settings and make tweaks and changes to modify how the module will look, feel, and function. Here’s a look at the settings we used:

Content Settings:

Under the “Content” tab make the following changes:

Shop module content settings

• Product View Type: Default
• Use Current Page: Yes
• Column Layout: 3 Columns

Once done, move on to the “Design” tab and make the following changes:

Image:

Shop product image rounded corners

• Image rounded corners: 10px on all four corners

Title Text:

Shop module title text

• Weight: Semi Bold
• Alignment: Center
• Spacing: 2px

Price text:

Shop module price text

• Alignment: Center
• Size: 15px
• Letter Spacing: 2px
• Line Height: 40px

Spacing:

Shop module spacing

• Padding: 30px for Top, Bottom, and Left
• Right padding: 0px

Custom CSS:

And for the finishing touch, head on over to the “Advanced” tab and go to Images. There, scroll till you find the field for “images.” Once there, enter the following custom CSS:

Padding-bottom: 10px;

Again scroll down to the field for “Price” and enter the following custom CSS:

Padding-bottom: 30px;

Shop module Advanced settings

And that’s it, you have successfully created a new Product Category page template using the Divi Theme Builder.

4. Save and Exit

After finishing your design, click on the Save button on the Divi Builder and exit it. Also, remember to hit the “Save Changes” button on the Divi Theme Builder.

Save the Product Category Page template

And that’s it! Your new Divi Product Category page template is up and running.

All your Product Category pages will now show this new layout.

Divi Product Category Page in action

Wrapping up

So this brings us to the end of our quick tutorial on how to create a Divi Product Category page template. We hope you found this guide useful and that it helped you in setting up a better-looking webpage to showcase your product categories.

As you can see, the process of building the template is super simple and will only take a couple of minutes if you follow this tutorial. That being said, you are always free to take a few more minutes and double down on the many Divi settings and options to create an even better-looking design.

Also, the product filter we used is a very basic one that gets the job done. If you have the budget, you can also go for premium plugins that support Ajax-loading to offer your users a more intuitive and streamlined UI/UX.