[Top] 155 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Category pages are an important part of any eCommerce site. Clients browse product categories to find what they need. That’s why your category pages need to look just as good as your product pages. With Divi’s Theme Builder, creating category page templates is easier than ever. In this tutorial, we’ll show you how to create a category page template step by step and style it using Divi and its built-in options. Furthermore, we’ll show you how to make it filterable with help from the Themify WooCommerce Product Filters plugin.

Open two browser tabs side by side. Use the first tab for the theme builder and the second tab for the live preview of a category page. Work this way to see the progress as you go. For your convenience, we’ve also added the template as a free download.

Let’s get to it!

• 1 Preview
• 2 Download The Woo Category Page Template for FREE
• 3 Download For Free
• 4 You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
• 5 1. Update Your Products And Categories
• 6 2. Set-Up Plugin
• 7 3. Recreate Product Category Page Template in Theme Builder
• 8 Preview
• 9 Final Thoughts

Preview

Before we start recreating the template, let’s take a look at what the category page template looks like on different screen sizes.

Desktop

Mobile

Download The Woo Category Page Template for FREE

To lay your hands on the free Woo category page template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Update Your Products And Categories

Before building the template, make sure your products are organized in the correct categories. Check if they are tagged properly as well. These will be important when setting up the product filter plug-in.

2. Set-Up Plugin

Download and Install

Download the WooCommerce Product Filters. Navigate to your plugin dashboard and upload the plugin’s .zip file to install it. Alternatively, search for the plugin in the directory. The plugin will add a new tab in your dashboard menu. Make sure you activate the plugin as well.

Add New Filter Form

Click on the plugin tab in your dashboard. Inside the plugin settings, click on the button to add a new filter form.

Set Up Filter Form

To make your filterable sidebar look exactly like the one in the preview of this post, use the settings mentioned below. You can always adjust these settings afterward.

• Layout: Vertical
• Empty Fields: Do not show field if empty
• Product Sorting: Hide product sorting
• Pagination Option: Infinite Scroll
• Reset Button: No reset button
• Logical Relationship Between Taxonomies: AND
• Result Page Template: Show results on the same page

Create Category Field

In the menu bar below the main area, you’ll see a selection of tabs. Drag and drop the ‘Category’ tab into the builder below it. Then adjust the settings as follows:

• Field Title: Categories
• Include Children: Yes
• Display as: Checkbox
• Logic: OR
• Order: Name, Descending
• Layout: Horizontal, 2 columns

Create Tag Field

Now drag and drop the ‘Tag’ tab into the builder. Make sure it’s placed below the ‘Category’ tab. Adjust the settings as follows:

• Field Title: Type
• Display as: Checkbox
• Order: Name, Descending
• Layout: Horizontal, 2 columns
• Color Icons
  • Background: Transparent
  • Text Color: Deep Brown #44000d

Click Save to Generate Shortcode

Save your work and close the builder. You’ll see the shortcode in the plugin’s main menu. Copy it, you’ll need it later.

3. Recreate Product Category Page Template in Theme Builder

Open Theme Builder / Add New Template

It’s time to start recreating the template! Open your theme builder and add a new template.

Set Template Settings

In the template settings, select ‘Specific Product Category Pages’. Click on the categories you want to assign this template to. We’ll select Handmade Leather Goods.

Add Custom Body

Then, click on ‘Add Custom Body’.

Select Build Custom Body

We’ll recreate this template from scratch, so go ahead and pick ‘Build Custom Body’.

Build From Scratch

Once inside the visual builder, select the option to build from scratch once more.

Section 1 Settings

Background

Once inside the template editor, you’ll notice a section. Open that section and add a background color.

• Background Color: Transparent blueish grey – rgba(68,66,109,0.02)

Add Row

Column Structure

Now add a new row with the following column structure:

Sizing

Adjust the sizing settings of the row next.

• Gutter Width: 1
• Width
  • Desktop: 90%
  • Tablet and Phone: 85%
• Max Width: 1920px

Spacing

Then, apply some different spacing values across different screen sizes.

• Left and Right Margin
  • Desktop: auto
  • Tablet: 55px
  • Phone: 30px
• Top Padding: 100px

Add Post Title Module To 1st Column

Elements

Time to add modules, starting with a Post Title Module in column 1. Enable the title only.

• Show Title: Yes

Background

Add a background color next.

• Color: #e8e8e8

Title Text

Move over to the design tab and style the title text.

• Title Level: H1
• Font: Josefin Sans
• Weight: Bold
• Style: TT
• Color: #44000d
• Size
  • Desktop: 32px
  • Tablet: 28px
  • Phone: 30px
• Line Height: 1.2 em

Spacing

Adjust the spacing too.

• Top Padding
  • Desktop and Tablet: 100px
• Bottom Padding: 80px
• Left Padding
  • Desktop and Tablet: 30px
• Right Padding
  • Desktop and Tablet: 30px
  • Phone: 10px

Border

Give the module some rounded corners.

• Rounded Corners: 15px all four

Box Shadow

And add a subtle box shadow.

• Box Shadow: 2nd Option
• Horizontal Position: 12px
• Vertical Position: 12px
• Blur Strength: 20px
• Spread Strength: -5px
• Shadow Color: #dddddd

Add Text Module to 1st Column

Content

Add a Text Module right below the previous module. In the content box, add the shortcode you copied from the plugin.

• Body: Plugin Shortcode

Background

Add a background color next.

• Color: #e8e8e8

Text

Style the text.

• Font: Josefin Sans
• Color: #44000d
• Size
  • Desktop: 20px
  • Tablet: 18px
  • Phone: 16px
• Spacing: 1px

Spacing

Adjust the spacing settings as well.

• Top Margin: 50px
• Top and Bottom Padding: 40px
• Left and Right Padding: 30px

Border

Then, add some rounded corners.

• Rounded Corners: 15px all four

Box Shadow

And complete the module settings by adding a subtle box shadow.

• Box Shadow: 2nd Option
• Horizontal Position: 12px
• Vertical Position: 12px
• Blur Strength: 20px
• Spread Strength: -5px
• Shadow Color: #dddddd

Add Shop Module to 2nd Column

Content

On to the next column! Add a shop module and adjust the main settings as follows:

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

Image

Move on to the design tab and style the image accordingly:

• Image Rounded Corners: 15px all four
• Image Box Shadow: 2nd Option
  • Horizontal Position: 6px
  • Vertical Position: 6px
  • Blur Strength: 18px
  • Shadow Color: #dddddd

Title Text

Style the title text next.

• Font: Josefin Sans
• Weight: Semi Bold
• Alignment: Right
• Color: #44000d
• Size
  • Desktop: 26px
  • Tablet: 24px
  • Phone: 17px
• Spacing: 2px

Price Text

Don’t forget to style the price text as well.

• Font: Josefin Sans
• Alignment: Right
• Color: #44000d
• Size: 15px
• Letter Spacing: 2px
• line Height: 46px

Spacing

Adjust the spacing settings too.

• Top Padding
  • Tablet and Phone: 50px
• Left Padding
  • Desktop: 50px
  • Tablet and Phone: 0px

Custom CSS

And last but not least, add custom two lines of CSS code in the advanced tab to generate some space between the different elements in the shop module. That’s it!

• Image: padding-bottom: 20px
• Price: padding-bottom: 40px

padding-bottom: 20px;

padding-bottom: 40px;

Preview

We’re done recreating the WooCommerce product category page template. Let’s take a look again at the finished design on different screen sizes.

Desktop

Mobile

Final Thoughts

This product category page template can be applied to all the categories and tags in your WooCommerce store. With help from the product filter plugin, you can add the filter settings that suit your own store and products. You can use any of the Divi woo modules to personalize your shop any way you want. We hope this template will help you add a personalized look to your designs. Let us know in the comments if you have any questions or suggestions!

Disclosure: If you purchase something after clicking links in the post, we may receive a commission. This helps us keep the free content and great resources flowing. Thank you for the support!