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. 

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 if your WooCommerce pages are set at fullwidth and do NOT have a sidebar (this is an option on the Divi Options page) . If you have the shop sidebar activated, scroll down to the Sidebar Instructions for the correct 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:

Sidebar Instructions

If you have a sidebar on your WooCommerce pages, you can ignore the CSS above and paste the following code in your child theme’s function.php file:

Next you’ll need to add a javascript function that will move your custom layout above the left content area. You can paste the function in your child theme’s footer.php file just above the closing </body> tag or you can paste it into the Add code to the < body > (good for tracking codes such as google analytics) section located on the Integration page by clicking Divi -> Theme Options -> Integration.

I struggled with a solution for the sidebar. I prefer to not use javascript for things like this that should probably be done in template files. But with WooCommerce, you would need to create multiple template files for each category inside a custom folder within your child theme. I started to go down that road and decided it just wasn’t a great solution. The custom javascript function is much simpler – right or wrong.

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!

    10 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

  2. What if I also want to add a costumized footer? That can not be in one layout can it? I’m really struggling to get a page displaying just the categories (with the number of items in that categorie listed below) but with a header and a footer….. Can’t seem to get that working. The shop module of divi gives you the opportunity to choose category but it then displays the items within. Not just the categorie with the categorie image. If I use the default shop page from woocommerce (without using the Divi builder) it has no header and footer. In this description I might be able to add a header, but what about the footer?

    Helen

    December 1, 2017

  3. Looks good. Will this work for sub-categories, or is something else required?

    Ian

    February 5, 2018

  4. Hello,

    Thank you for your post, it is very useful. I have just a little issue with my sidebar. All of its content moved on the page. I’d like to keep my sidebar with it’s content on it. Do you have any idea on how to do it, please ?

    Thank you.

    Regards,
    Daniela

    daniela

    March 5, 2018

    • I have the exact same problem. Is there a solutions for this?

      Sky

      June 4, 2018

    • I updated the instructions for anyone who has the sidebars activated.

      Brad (admin)

      June 14, 2018

  5. do you have to do all the steps on your first tutorial to get this to work? “adding Divi layouts to archive pages”

    Cat Ballew

    August 1, 2018

    • this solution does not seem to work with the latest divi updaes.

      Cat Ballew

      August 3, 2018

      • actually … it was me… but… its only showing on the category page… i need the addition to show on the main shop page as well… how do you do that?

        Cat Ballew

        August 3, 2018

Post a Reply

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