COMPLEXITY

Easy

TIME

20 Minutes

ASSUMPTIONS

  • Basic knowledge on Divi and WooCommerce.
  • Divi and WooCommerce is already installed and configured.
  • You have some products with assigned categories in WooCommerce.

 

VERSIONS

Divi 4.9
WooCommerce 5.0

One of the most important features of any website that sells products is that the products are presented in a way that is easy to navigate and encourages a sale. A great way to do this is through a Category Page. Think about how easy you navigate Amazon through their various category pages. 

You’ll find a category page in any WooCommerce site and if you’re using Divi, you’re in luck, because it already allows you to customize the Divi WooCoomerce category page in the Divi Theme Builder. In this tutorial we will learn how to edit the Divi WooCommece Category page, then we will learn how to make it even better using the BodyCommerce plugin for Divi and WooCommerce.

If you are still pretty new to Divi and WooCommerce, please check out this Tutorial on Getting Started with Divi and WooCommerce.

PRO TIP: If you are already experienced with Divi, expand the SPEEDRUN sections to grab the steps really quickly, so you can fly through this tutorial.

How to Create a Custom Divi WooCommerce Category Page

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.
PRO TIP: If you don’t have any products yet, you can easily import some sample products provided by the WooCommerce team. More on that in this tutorial.

So when you fire up your site and browse to one of your categories, we went to our clothing category, it will look something like the “before” image below. We will change this page and create a custom Divi WooCommerce category page that looks great like the “after” image.

Let’s get started, shall we?

Here is a quick preview of the Custom Divi WooCommerce Category Page we will be creating.

Creating a Custom Divi WooCommerce Category Page Before and After

Add a New Category Page Template

First, let’s add our new Divi WooCommerce category page layout by going to the Divi Theme builder from the WordPress Dashboard, and clicking on “Add New Template”. 

Speedrun
Divi > Theme Builder > Add New Template
Add Template for Custom Divi WooCommerce Category Page

Template Settings

On the modal, scroll down the list and check the box next to “All Product Category Pages” under “Archive Pages“, then “Create Template“.

PRO TIP: It is worth noting that you can also create a Divi custom WooCommerce category page for each of your product categories.
Speedrun
Template Settings > Archive Pages > All Product Category Pages

Build a Custom Body for our Divi WooCommerce Category Page Layout

Now we need to create the layout that will display our custom layout. Click on “Add Custom Body” then “Build Custom Body” in the new WooCommerce Category Template we created. This will launch the Divi Visual Builder. Select “Begin Building” on the “Build from Scratch” card.

Speedrun
Add Custom Body > Build Custom Body > Build from Scratch > Begin Building
Build a Custom Body for our Divi WooCommerce Category Page Layout

Adding and Styling Modules for the Divi WooCommerce Category Page Layout

So let’s pause for a second here and talk about what we are looking at and what we want to do. The page builder looks very familiar to us, which it is, because it is the exact same user interface for the Divi Builder we see when we build pages or blog posts. Here we will not only use the Divi WooCommerce Layout modules, but also some other familiar Divi modules to build a striking category page which will convert our visitors into customers.

Let’s get started!

Row 1: Divi WooCommerce Category Page Products

We are going to build this row first for some instant gratification so what we need to do is add a single column row then add a divi shop module. We will immediately see the page populate with some products. Feels good!

Speedrun
Add Single Column Row > Add Shop Module
Adding a Shop Module to your Custom Divi WooCommerce Category Page Layout

Divi Shop Module

That was easy, but now we want to make sure that this page displays the right products and is styled to perfection.

Speedrun

SHOP MODULE

CONTENT TAB

Use Current Page: YES
Product Count: 6
Column Layout: 3
Show Pagination: YES

DESIGN TAB

OVERLAY
Overlay Icon Color: White
Overlay Background Color: rbga(0,0,0,0.2)

IMAGE
Image Rounded Corners: 5px
Image Border Width (hover): 1px
Image Border Style (hover): Dashed

TITLE TEXT
Title Font: Abel
Title Font Style: Capitalized
Title Text Alignment: Centered
Title Text Size: 18px (Desktop & Tablet) 16px (Mobile)
Title Letter Spacing: 2px

PRICE TEXT
Price Font: Pacifico
Price Font Weight: Bold
Price Text Alignment: Centered
Price Text Color: #0c71c3
Price Text Size: 28px (Desktop & Tablet) 24px (Mobile)

Content Tab

Here we can adjust many elements such as the number of product columns, pagination, and how the products are sorted as it relates to what is displayed in the shop module.

Make sure to toggle “Use Current Page” from “NO” to “YES”. What this is going to do is tell this Divi WooCommerce Category Page to only display the products that relate to the current product category.

Right now our shop module will display 12 products per page, let’s bring that in a bit and set ours to 6 by changing the “Product Count” setting accordingly.

Now that we are showing fewer products per page let us also adjust the “Column Layout” from 4 to 3 so we can show nice big product images to the user.

Lastly, we want to make sure that the user can browse all of the products in the category when there are more than 6, so let us toggle “Show Pagination” to “YES” under Elements.

So far so good, but it still looks a little boring, so let us style this shop module to be more interesting by heading over to the design tab.

Divi Category Page Shop Module Content
Divi Category Page Shop Module Content

Design Tab

Time to supercharge our customized Divi WooCommerce category page by styling the elements of the Shop module (product thumbnail, product title, product price, etc).

Under Overlay, let’s change our “Overlay Icon Color” to “White” and our “Overlay Background Color” to “rgba(0,0,0,0.2)” to help our new icon color stand out a bit

We will also swap out the boring + overlay icon for a more informative magnifying glass.

Fantastic!

Now let’s spruce up the product image a bit by rounding the corner under “Image Rounded Corners” with a 5px curve.

We are also going to add some interactivity by triggering a dashed border style when the user hovers over the product image.

To do this all we need to do is add an “Image Border Width” of 1px, which we will set to a “Black” “Image Border Color”. To add the interactive element for the border style, we click on the hover options icon next to the “Image Border Style” setting. This will reveal the hover option, then we just select a “Dashed” style option.

Divi Category Page Shop Module Design
Divi Category Page Shop Module Design
Divi Category Page Shop Module Design

The last step for the Shop Module in our customized Divi WooCommerce Category Page is to style the text.

For the “Title Text”, we will set the font to “Abel” and convert the title text to “All Caps” under “Title Text Style” then center the title nicely in the “Title Text Alignment” settings.

We will also increase the “Title Text Size” to 18px on desktop and 16px on mobile, then add 2px of “Title Letter Spacing”.

Looking good!

Divi Category Page Shop Module Design
Divi Category Page Shop Module Design
To make the price pop a little more, we will change the “Price Font” to “Pacifico”, set the “Price Font Weight” to “Bold”, center align the price text, and give it a blue color #0c71c3.

To round things off we will increase the “Price Text Size” to 28px on desktop and 24px on mobile.

Divi Category Page Shop Module Design
Divi Category Page Shop Module Design
Now we can see our products really come to life and invite the visitor to take a closer look, but one thing is missing…we need to let the customer know where they are on your site. For that, we will add a dynamic category title and breadcrumbs to better orientate the user on your Divi Custom WooCommerce Category Page.

Row 2: Divi WooCommerce Category Page Header

Let’s add a new “Row” by clicking the green + icon and select a “Single Column Row”.

Under the Content Tab for our new row, let’s set the “Background Color” to #0c71c3.

Next, let’s head over to the Design Tab and scroll down to the Border Settings. Now let’s add 5px to the Rounded Corners” setting.

Save the changes, then drag our new “Row” above the “Row” we created previously.

Speedrun

SINGLE COLUMN ROW

CONTENT TAB

Background Color: #0c71c3

DESIGN TAB

BORDER Rounded Corners: 5px

Adding a second Row to our Custom Divi Woocommerce Category Page

Post Title Module

The first thing we need to add to this “Row” is a “Post Title” module which will display the current Product Category dynamically.

Speedrun

POST TITLE MODULE

CONTENT TAB

Show Meta: NO
Show Featured Image: NO

DESIGN TAB

TITLE TEXT
Title Font: Pacifico
Title Text Alignment: Centered
Title Text Color: White
Title Text Size: 41px (Desktop & Tablet) 31px (Mobile)

SPACING
Margin Bottom: 0px

Adding a second Post Title to our Custom Divi Woocommerce Category Page

Content Tab

Under Elements we toggle “Show Meta” and “Show Featured Image” to “NO” because we only want the title to be displayed here.

Design Tab

Like before, we will spruce this text up a bit here.

For the “Title Text” we will set the font to “Pacifico” and center the title nicely in the “Title Text Alignment” settings.

We also want to set the “Title Text Color” to “White” here.

Now let’s increase the “Title Text Size” to 41px on desktop and 31px on mobile and change the color to #0c71c3.

Lastly, under “Spacing”, we need to set the bottom margin to 0px.

Divi Category Page Post Title Module Design
Divi Category Page Post Title Module Design
Divi Category Page Post Title Module Design
When you click and save this module you will see some text that reads “Your Dynamic Post Title Will Display Here”, this is just a placeholder for your category title, so don’t stress.

Woo Breadcrumb Module

Now we will add the breadcrumb module by clicking the gray + under the Post Title Module we just added.

Speedrun

WOO BREADCRUMB MODULE

CONTENT TAB

Product: This Product

DESIGN TAB

TEXT
Text Font: Abel
Text Color: White
Text Alignment: Centered

Adding a second Breadcrumbs to our Custom Divi Woocommerce Category Page

Content Tab

We’ll make sure “This Product” is selected under the “Product” setting because this is what sets the dynamic category title.

Design Tab

Only a couple of small changes here.

We will set the “Text Font” to “Abel”, the “Text Color” to “White”, and lastly we will align the text to the center.

Divi Category Page Breadcrumb Module Design
Divi Category Page Breadcrumb Module Design
Ok, this row is all done! 

We are almost done customizing this Divi WooCommerce Category Page Layout, the last step is to advertise our newsletter so that we can grab some emails for our marketing campaigns.

Row 3: Divi WooCommerce Category Page Opt-in Form

Let’s add a new “Row” by clicking the green + icon and select a “Single Column Row” below the Shop Module Row we created in the first step, then add a Divi Email Opt-in Module.

Speedrun
Add Single Column Row > Add Shop Module
Adding a second Row to our Custom Divi WooCommerce Category Page

Email Opt-in Module

We add this just to further enhance our Divi WooCommerce Product Category Page by allowing us to capture client emails to help them save money, and for us to make more sales.

Speedrun

EMAIL OPT-IN MODULE

CONTENT TAB

TEXT
Title: Subscribe to our newsletter for weekly discounts!
Body: Delete placeholder text

EMAIL ACCOUNT
Service Provider: Mailster
Mailster List: [Select your list]

FIELDS
Show First Name Field: NO
Show Last Name Field: NO

BACKGROUND
Background Color: #0c71c3

DESIGN TAB

LAYOUT
Layout: Body On Top, Form On Bottom

TITLE TEXT
Title Font: Abel
Title Font Weight: Bold
Title Font Style: Capitalized
Text Alignment: Centered
Title Letter Spacing: 2px

Content Tab

We will replace the default “Title Text” with “Subscribe to our newsletter for weekly discounts!

Under “Body” we will delete the pre-filled paragraph of text and leave it empty.

Then under “Email Account“, you will select your transaction email service provider, we selected “Mailster“. 

PRO TIP: If you want to brush up on using Transactional Email Services with Divi, please check out this post on the 5 Best Email Marketing Services for Your Blog, Business, or Organization.
Next, we need to tell the module what fields we want the user to fill in. For this tutorial, we only capture the visitors’ email addresses, so let’s go ahead and toggled all the other fields to “NO“. This will leave us with just the email field and the subscribe button.

The last thing to set before heading off to the design tab is to set the “Background Color” to #0c71c3.

Adding a second Row to our Custom Divi WooCommerce Category Page

Design Tab

Time to organize the layout a bit better and place that email field above the subscribe button.

We will do this by simply “Layout” to “Body On Top, Form On Bottom”. That easy.

For the “Title Text”, we will set the font to “Abel” and convert the title text to all caps under “Title Text Style” then center the title nicely in the “Title Text Alignment” settings.

Let’s add 2px of “Title Letter Spacing”.

We are almost done! All that is left is to round the borders of this module a little by heading over to “Border” and setting “Rounded Corners” to 5px.

Divi Category Page Opt-in Module Design
Divi Category Page Opt-in Module Design
Divi Category Page Opt-in Module Design

If you followed along closely, your Divi Visual Builder screen should look something like this.

Divi BodyCommerce Custom Product Category Page

Before we start clicking around, let’s save this Divi custom WooCommerce Category Page layout by clicking the 3 dots “…” and then “SAVE” in the bottom right.

We can now click the “X” in the top right which will take us back to the Divi Theme Builder and you will see our new layout listed there.

It is very important to click on “Save” in the top left here every time you create a new theme template, so let us do that now.

 

Saving our Custom Divi Woocommerce Category Page
Amazing! We are ready to take a look at what our new Divi theme Woocommerce Category Page looks like. 

A quick and easy way to do this is to browse to your Categories page in WordPress. In the left column go to Products, then Categories. Once on that page, hover over one of the categories on the right until you see “View” underneath the category name and click on it. 

Finished Custom Divi Woocommerce Category Page
Voila!

Now while this looks so much better than it did before, the Divi Theme Builder for WooCommerce does have its limitations.  Wouldn’t it be cool if our Divi WooCommerce Category Page had things like “Add to Cart” buttons, category navigation, customized pagination, or ajax filters?

But that requires custom code! I can hear you, but I promise you, it doesn’t. All you need is BodyCommerce by Divi Engine.

Here is a quick preview of our Divi WooCommerce Custom Category Page further enhanced with BodyCommerce.

Divi WooCommerce Custom Category Page by BodyCommerce

BODYCOMMERCE

BodyCommerce really is the Swiss Army Knife for customizing Divi WooCommerce sites. It has a ton of useful features that help you create gorgeous and functional eCommerce sites without having to write a single line of code.

Let’s take a look at two features in BodyCommerce that can elevate our WooCommerce Category Page game, Ajax Filters & Custom Product Loops.

AJAX FILTERS

Ajax is an extremely powerful feature on the web because it allows us to load things without having to reload a website. This is important because you only have your visitor’s attention for a short moment before they lose interest or run out of patience. BodyCommerce Ajax Filters cuts down the waiting time for visitors browsing your site by letting them quickly filter your products to find the item they are looking for. Filter your products by category, tags, product attributes, Price, and custom fields. The possibilities are endless.

BodyCommerce Ajax filters and variation swatches for Divi and Woocommerce

PRO TIP: Ajax Filtering is already part of the BodyCommerce Suite, but can be used separately to filter almost any post type on WordPress by using our Divi Ajax Filter plugin. You could say it is a dream come true for those of you that use ACF (Advanced Custom Fields).

CUSTOM PRODUCT LOOPS

This is one of the most powerful features in BodyCommerce because it allows you to control every aspect of how your products are displayed on pages like the Divi WooCommerce Category Page. Building your own custom product loop couldn’t be easier because you do that right in the Divi Builder. Easy, right?

PRO TIP: WooCommerce Loops can be a little tough to wrap your head around if you are new to WordPress, so for more on WordPress Loops, you can check out this great article.
Divi WooCommerce Loop Elements

Now, let’s take a look at the components of a standard WooCommerce loop in Divi!

There is a lot of useful information here for our visitors, but what if we wanted to make things more interesting by adding something like an Add to Cart button?
N

BodyCommerce has you covered

Divi WooCommerce Loop with Add to Cart
Divi WooCommerce Loop with Enhanced Swatches
The baked-in Divi WooCommerce variation swatches are pretty boring, is there a way to make them stand out more or even make them available on my store page?
N

BodyCommerce has you covered

What if I need a completely different layout for my products like having the image on the left and all the information and buttons on the right?
N

BodyCommerce has you covered

Divi WooCommerce Loop Elements on the Side
As we can see, BodyCommerce is a really powerful tool that can be used to elevate not only our Divi WooCommerce Category Pages but any WooCommerce pages that Divi does not allow us to customize natively.
For more information on BodyCommerce and its awesome features, take a look at our feature page and start dreaming of how you will use BodyCommerce to build amazing websites with Divi and WooCommerce.