Create a WooCommerce Product Category Page with Divi’s Theme Builder

Posted on June 4, 2020 by in Divi Resources | 10 comments

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’s 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!

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

WooCommerce Product Category Page

Mobile

WooCommerce Product Category Page

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 Divi Daily email list 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.

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.

WooCommerce Product Category Page

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

WooCommerce Product Category 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

WooCommerce Product Category Page

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.

WooCommerce Product Category Page

WooCommerce Product Category Page

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.

WooCommerce Product Category Page

Add Custom Body

Then, click on ‘Add Custom Body’.

WooCommerce Product Category Page

Select Build Custom Body

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

WooCommerce Product Category Page

Build From Scratch

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

WooCommerce Product Category Page

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)

WooCommerce Product Category Page

Add Row

Column Structure

Now add a new row with the following column structure:

WooCommerce Product Category Page

Sizing

Adjust the sizing settings of the row next.

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

WooCommerce Product Category Page

Spacing

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

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

WooCommerce Product Category Page

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

WooCommerce Product Category Page

Background

Add a background color next.

  • Color: #e8e8e8

WooCommerce Product Category Page

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

WooCommerce Product Category Page

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

WooCommerce Product Category Page

Border

Give the module some rounded corners.

  • Rounded Corners: 15px all four

WooCommerce Product Category Page

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

WooCommerce Product Category Page

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

WooCommerce Product Category Page

Background

Add a background color next.

  • Color: #e8e8e8

WooCommerce Product Category Page

Text

Style the text.

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

WooCommerce Product Category Page

Spacing

Adjust the spacing settings as well.

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

WooCommerce Product Category Page

Border

Then, add some rounded corners.

  • Rounded Corners: 15px all four

WooCommerce Product Category Page

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

WooCommerce Product Category Page

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: Product Category
  • Use Current Page: Yes
  • Column Layout: 3 Columns

WooCommerce Product Category Page

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

WooCommerce Product Category Page

WooCommerce Product Category Page

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

WooCommerce Product Category Page

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

WooCommerce Product Category Page

Spacing

Adjust the spacing settings too.

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

WooCommerce Product Category Page

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;

WooCommerce Product Category Page

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

WooCommerce Product Category Page

Mobile

WooCommerce Product Category Page

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!

Premade Layouts

Check Out These Related Posts

10 Comments

  1. Hi Orana! What a beautiful design, thank you!
    I have installed the plugin – and have assigned categories to my products. However, when I add a text module and the code snippet to it – the category and price filters do not appear? I have carefully followed your settings.. Do you maybe know what might cause this conflict or what I can try to do to have the filters show up?

    Thank you!

    • Hi Azza, There could be a number of things. In my tutorial, I didn’t add a price filter so you’d have to add that one yourself.
      Also, are you checking how the design looks out of the visual builder in the actual category and not in the theme builder? Also, don’t forget to clear your cache once in a while.

    • Check the setup on the plugin. There might be a toggle in the wrong place.

  2. Hello! I would like to apply this tutorial on my site, but I still see labels or attributes that category does not contain any value. How could I solve this? Thank you

    • Hi Jonas, Make sure that the plugin settings are showing things how you want them to There are so many options, your best shot is to try different settings to match how your store is set up.

  3. Hello! Thank you very much for the tutorial. I have a problem, when filter keeps showing me all the filtering options. Example, if I choose a category, it keeps showing me colors that that category doesn’t have. Any solution for this? I hope you understand my query from Argentina. Thank you

  4. The filter doesn’t work properly, you have to manually change it for every category. Is there a way around this?

    • The plugin has only one settings window for categories in general. What do you mean?

  5. Hello,

    My web site is developing with Divi theme builder and I can not to use Exclude Categories. I put the correct categories number but it show me all the caterogies.

    Percy Llanos

  6. Hi there – is there any other way of setting up the category page to function more like my Shop page? For my site I need Add to Cart on the Shop page and not sure that is possible with the Shop module?

    Also, when I am on the category page and tick and untick the category or tag options nothing happens – they are not dynamic from the look of things? So each time you want to see a category you have to use the link in the menu? Is that how it is supposed to work?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest