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.

How to Create a Custom Divi WooCommerce Category Page

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?

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”. 

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“.

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.

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!

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.

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.

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.

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!

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

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.

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.

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.

Woo Breadcrumb Module

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

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.

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.

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.

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“. 

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

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.

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.

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. 

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.

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.

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?