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!