Add Content to WooCommerce Category Pages

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

A client recently requested to have the ability to add content to the top of the WooCommerce category pages in Divi. My initial thought was to simply create new category pages using the page builder, add the content and then add a Shop module with the category products. But I didn’t like that idea. The client would then have two category pages which would dilute their SEO for that category across the two pages. Not only that, but when a user clicked on the product category in the single product view it would take them to the WooCommerce generated category page. Not the new page and not ideal.

Instead I decided to figure out a way to add content to the WooCommerce category pages. This tutorial explains how I did it, building on my previous tutorial on adding Divi layouts to archive pages.

Here’s the demo.

First you need to create your layout. Go to the Divi Library and create a new layout, making sure you choose Layout under the Template Type dropdown. For my layout, I added a fullwidth section with a slider module followed by a regular section with a text module. Save your new layout and go back to the Divi Library page. Hover over the title of your new layout and take note of the post number in the URL at the bottom left of your screen. You’ll need to reference that later.

PHP

Next you need to create a functions.php file in your child theme if you don’t already have one. Then add the following code:

Be mindful of the php tags. If you already have a functions.php file with code, make sure when you’ve added the code above you only have one opening php tag at the top of the file and one closing tag at the bottom.

We’re using WooCommerce hooks to add our new layout(s) to each category page above the WooCommerce content. I am also adding a div container with class max-width-content at the end just before the WooCommerce generated content. And then closing that container at the end of the WooCommerce generated content. I’ll explain that below.

Make sure you replace the category names in the code above with your category names. And make sure you replace the global_module=xxxxxx with the post number I had you take note of after you created your layout. This is the ID of your layout. To add different layouts to different categories, just replace that layout’s ID inside each elseif statement in the code above.

Next we need to apply some CSS to give our Divi layouts fullwidth and restrict the WooCommerce content to Divi’s 1080px max width. By default, Divi limits the category page container to 1080px max width and 80% width. So our fullwidth section wouldn’t actually be fullwidth. We need to change the container to 100% width but then limit the WooCommerce content width so it doesn’t go edge to edge in the browser. The CSS below does just that.

CSS

Add the following to your child theme stylesheet:

That’s it. Your Divi layout should now display above your product category page. You won’t have to deal with two category pages. And you don’t have to overwrite any WooCommerce templates which can cause issues down the road.

It still seems like this should be easier and less clunky. And I’m sure one day it will be. But for now, it’s the best approach I came up with. If anyone has a better approach, I would love to hear it!

    2 Comments

  1. Wow, what a genius solution, or as we said in the sixties: “Geni-Ass”. Love it and I’m sure this will solve my Woo problem. It seems I have a lot of Woo problems these days – well check one off the list. Thanks! I owe you man.

    Mark Trotter

    August 17, 2017

    • Thanks Mark! I’m right there with you on the Woo problems. Or should we say “Woo woes”? 🙂 I can imagine the eye rolling but I couldn’t resist!

      Brad (admin)

      August 17, 2017

Post a Reply

Your email address will not be published. Required fields are marked *