Updated 2 January, 2021
Would you like to customize the layout and design of your WooCommerce Category pages?
This tutorial shows you a really easy way that you can customize your WooCommerce Category Pages.
You don’t need any technical knowledge and we won’t be touching any code.
What we’ll cover
- Step by step instructions – how to create customized WooCommerce Category Pages
- Video tutorial (watch time 2 mins) – how to edit WooCommerce Category Pages
- Storefront Blocks – The WordPress plugin I recommend
- SEO benefits – How to improve SEO by creating unique WooCommerce Category Pages
Introduction
As you probably already know if you are reading this article, WooCommerce creates your category pages dynamically for you.
This means that your WooCommerce Category pages aren’t like other pages – they don’t really exist as pages.
The downside of this is that normally, you can’t change the layout of them and every store running WooCommerce tends to look the same.
The benefits of customizing WooCommerce Category Pages
- Increase Sales – creating a better designed WooCommerce Category Page will showcase your products in the best light
- Improved Search Engine Optimisation – customizing the WooCommerce Category allows you to add extra content that is relevant to your products
Creating a customized WooCommerce Category can massively improve your SEO
The default WooCommerce Category Page will also have poor SEO (Search Engine Optimisation). Content is very minimal in the default Category pages, and the page will NOT be optimised for search engines. This is an opportunity for you to gain a big advantage over your competitors
Below is a screenshot of the default WooCommerce category page – the design isn’t great and SEO will be poor because the content is so thin.
![How to edit the WooCommerce Category page [no coding required] 3 normal woocommerce category page](https://pootlepress.com/wp-content/uploads/2019/05/normal-woocommerce-category-page.png)
Your WooCommerce Category pages are really important.
Here’s two great quotes below on why you should create the best possible Category pages for your store.
We all like to think that customers will arrive at our store ready to purchase anything we show them. But this isn’t true. Many people arrive with a sense of desire but not complete information. Your category page, when it has additional copy, can help you close a sale.
Source: Chris Lema
32% of e-commerce sites still don’t have any kind of category pages. During testing, sites without intermediary category pages suffered greatly as many subjects made wrong selections or were unable to define an appropriate scope, leaving them with very broad categories, and often thousands of products to consider.
Source: Baymard Institute
If you can make your WooCommerce Category Pages look better, and improve SEO, then you’ll get website traffic and more sales!
The good news is that there is a really simple way to edit and customize your WooCommerce Category Pages, and there are just 2 simple steps to make.
Instructions on how to edit your WooCommerce Category page
The method that I used requires no coding and only takes a few minutes.
Note: You need to be using the WordPress Block Editor (Gutenberg) for this to work. Also Make sure you DON’T have the Classic Editor plugin active as this disables the WordPress Block Editor.
There are two simple steps and in this tutorial I’m using the Storefront Blocks WordPress plugin.
Storefront Blocks
The picture below shows you an example of a WooCommerce Category page that has been customized using Storefront Blocks.
The huge advantage of using this method is that you have 100% customization control over how your WooCommerce Category pages are designed, and what content you add.
![How to edit the WooCommerce Category page [no coding required] 4 customize woocommerce category page](https://pootlepress.com/wp-content/uploads/2019/05/customize-woocommerce-category-page-741x1024.png)
Video tutorial – how to edit the WooCommerce category page
Here’s a video tutorial that shows you the process from start to finish (running time 2 mins 30 secs).
Step by step Instructions – how to create your new WooCommerce Category page and customize it
Here’s the 2 simple steps on how to do it. Click here for detailed instructions.
- Step 1 – Create a new page, customize it, and publish it. To add your products by category use either the WooCommerce blocks plugin or if you want a more beautiful page use our Storefront Blocks plugin. (the product grid shown in the picture above was built using Storeront Blocks). Note: You can also use any other Gutenberg Blocks with this method.
- Step 2 – Set up a re-direct that points your default WooCommerce Category to your Brand new Page. To set up the re-direct this you can use the Storefront Blocks plugin (free trial available here)
Let’s go through each of these in detail.
Step 1
Create a brand new page then build your page using the new Block Editor and your choice of blocks to customize it. In the example above I used two plugins, Storefront Blocks and Caxton.
In the picture below you can see how I’ve added the Product Square Grid Block (this block comes with Storefront Blocks) and selected the Category.
![How to edit the WooCommerce Category page [no coding required] 5 edit woocommerce category page](https://pootlepress.com/wp-content/uploads/2019/05/category.png)
The beauty of this approach is that you can layout the WooCommerce Category Page any way you want.
You have no limitations :)
Once you have built your page then it’s time to set up the re-direct.
Step 2
Set up the re-direct to your new WooCommerce Category Page
Here we are going to re-direct the WooCommerce Category page that is generated automatically for you by WooCommerce, to your brand new super duper customized Page.
The WordPress plugin I use to customize WooCommerce Category pages
I used the Storefront Blocks plugin for this, so install that first.
Storefront Blocks makes it possible to customize your Category pages. It also comes with a library of 11 premium WooCommerce Blocks, so your customized Category pages will look awesome. Click here to see a live demo of the Blocks included with Storefront Blocks.
After installing Storefront Blocks go to Dashboard / Products / Categories
Then find the Category and click on edit
![How to edit the WooCommerce Category page [no coding required] 6 edit woocommerce category](https://www.pootlepress.com/wp-content/uploads/2020/01/edit-category.png)
Then put the web address (url) of your new customized Category page into the Redirect Url box.
![How to edit the WooCommerce Category page [no coding required] 7 How to edit the WooCommerce Category page [no coding required] 1](https://www.pootlepress.com/wp-content/uploads/2020/02/redirect-url.png)
And that’s it!
Your dynamically created WooCommerce category page will now re-direct to your new customized page.
Also all the dynamic links that WooCommerce creates (e.g Product meta information) will also send your customers to your new customized WooCommerce Category Page.
Conclusion
Being able to customize your WooCommerce Category pages lets you create a better design and make huge improvements to your SEO.
This will result in more traffic and ultimately more sales.
If you want to customize your other WooCommerce Category pages just repeat the process for each Category.
I hope you found that useful, if you have any comments or questions, feel free to post them below.
Frequently asked questions
How do I override a WooCommerce template?
With this method you don’t need to touch a line of code. Just install the Storefront Blocks plugin and put in the link to your new Category page in the box provided.
Can I use any Gutenberg Blocks to build my customized WooCommerce Category Page?
Yes , that’s what’s great about this method. You can design your WooCommerce Category Page in anyway you like, with as much content as you want. It’s a real opportunity to create better Category pages and increase your sales :)
Will customizing my WooCommerce Category page improve my SEO?
Yes. This is one of the major benefits of being able to customize your WooCommerce Category Pages, you can make them much more keyword rich, and much more SEO friendly.
This is so Great! Finally got a method to achieve this. Thanks!
OMG thank you so much!
Hi – is there a way to still include the filters for the products?
Hi Michael,
Yes WooCommerce Blocks now comes with an Active Filters block :)
Just add this to your customized WooCommerce category page,
good luck
Jamie
Great tutorial. One question; the active filter block displays my products in a certain category. Great! The problem is that i can not set any new filters to it. The active filter block doesnt refresh with new filters added to it. Is that even possible?
Hi Danny
It that the WooCommerce Block ? i.e the active filters Block?
Jamie
Hi Jamie,
I setup my page as follows:
Two columns. Left column couple of woocommerce attribute filter blocks. Right column the product category block where i set the category according to the page i am on. If i adjust my filters on the left, the products on the right do not change according to the new filters being set. Nothing happens…
Thanks Danny – can i just double check that you are just using WooCommerce Blocks for all this i.e not any of our plugins?
Correct;) is that part of the problem?
I think i already solved it by using standard woocommerce shortcodes instead of blocks.
If you know another solution, please feel free to advice.
Hi Danny
Yes it sounds like a bug – it might be worth raising a ticket with WooCommerce here https://github.com/woocommerce/woocommerce-gutenberg-products-block
I think i’ve seen the same issue actually – hopefully they will fix soon :)
jamie
Thank you for this great tutorial Jamie.
Would you happen to know what to do when I don’t have a Redirect Url box?
Hi Steven
If you update to the latest version of Storefront Blocks you should see the redirect url box.
Also maybe clear your cache to double check :)
kind regards,
Jamie
Hello, thank you for the post I had one question, will redirection affect my SEO in the future?
Hi, your SEO will be fine – here’s an explanation :)
https://ahrefs.com/blog/301-redirects/#do-301-redirects-affect-seo