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

Jun 4, 2020 | Everything Divi for WordPress




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

create-a-woocommerce-product-category-page-with-divis-theme-builder Create a WooCommerce Product Category Page with Divi’s Theme Builder

Mobile

create-a-woocommerce-product-category-page-with-divis-theme-builder-1 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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.

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.

create-a-woocommerce-product-category-page-with-divis-theme-builder Create a WooCommerce Product Category Page with Divi’s Theme Builder

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.

create-a-woocommerce-product-category-page-with-divis-theme-builder-1 Create a WooCommerce Product Category Page with Divi’s Theme Builder

create-a-woocommerce-product-category-page-with-divis-theme-builder-2 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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.

create-a-woocommerce-product-category-page-with-divis-theme-builder-3 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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-a-woocommerce-product-category-page-with-divis-theme-builder-4 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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-a-woocommerce-product-category-page-with-divis-theme-builder-5 Create a WooCommerce Product Category Page with Divi’s Theme Builder

create-a-woocommerce-product-category-page-with-divis-theme-builder-6 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-7 Create a WooCommerce Product Category Page with Divi’s Theme Builder

create-a-woocommerce-product-category-page-with-divis-theme-builder-8 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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.

create-a-woocommerce-product-category-page-with-divis-theme-builder-9 Create a WooCommerce Product Category Page with Divi’s Theme Builder

create-a-woocommerce-product-category-page-with-divis-theme-builder-10 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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.

create-a-woocommerce-product-category-page-with-divis-theme-builder-11 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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.

create-a-woocommerce-product-category-page-with-divis-theme-builder-12 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Add Custom Body

Then, click on ‘Add Custom Body’.

create-a-woocommerce-product-category-page-with-divis-theme-builder-13 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Select Build Custom Body

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-14 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Build From Scratch

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-15 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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)

create-a-woocommerce-product-category-page-with-divis-theme-builder-16 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Add Row

Column Structure

Now add a new row with the following column structure:

create-a-woocommerce-product-category-page-with-divis-theme-builder-17 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Sizing

Adjust the sizing settings of the row next.

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-18 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Spacing

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

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-19 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-20 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Background

Add a background color next.

  • Color: #e8e8e8

create-a-woocommerce-product-category-page-with-divis-theme-builder-21 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-22 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-23 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Border

Give the module some rounded corners.

  • Rounded Corners: 15px all four

create-a-woocommerce-product-category-page-with-divis-theme-builder-24 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-25 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-26 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Background

Add a background color next.

  • Color: #e8e8e8

create-a-woocommerce-product-category-page-with-divis-theme-builder-27 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Text

Style the text.

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-28 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Spacing

Adjust the spacing settings as well.

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-29 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Border

Then, add some rounded corners.

  • Rounded Corners: 15px all four

create-a-woocommerce-product-category-page-with-divis-theme-builder-30 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-31 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-32 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-33 Create a WooCommerce Product Category Page with Divi’s Theme Builder

create-a-woocommerce-product-category-page-with-divis-theme-builder-34 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-35 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-36 Create a WooCommerce Product Category Page with Divi’s Theme Builder

Spacing

Adjust the spacing settings too.

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

create-a-woocommerce-product-category-page-with-divis-theme-builder-37 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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;

create-a-woocommerce-product-category-page-with-divis-theme-builder-38 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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

create-a-woocommerce-product-category-page-with-divis-theme-builder Create a WooCommerce Product Category Page with Divi’s Theme Builder

Mobile

create-a-woocommerce-product-category-page-with-divis-theme-builder-1 Create a WooCommerce Product Category Page with Divi’s Theme Builder

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!


Source

WordPress Development

SEO NEWS

seo news

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.