Updated 20th January, 2020
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.
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.
They also suffer from poor SEO.
And your WooCommerce Category pages are really important. (click here to read a great article by Chris Lema on why WooCommerce Category Pages are important)
If you can make them look better, then you’ll get 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.
There are two simple steps and in this tutorial I’m using the Storefront Blocks WordPress plugin.
The picture on the right shows you an example of a WooCommerce Category page that has been customized using Storefront Blocks.
Here’s how to do it.
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 over on the right was built using Storeront Blocks).
Note: You can also use any other Gutenberg Blocks with this method.
Video tutorial – how to edit the WooCommerce category page
Step by step Instructions – how to create your new WooCommerce Category page and customize it
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.
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.
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.
After installing Storefront Blocks go to Dashboard / Products / Categories
Then find the Category and click on edit
Then put the web address (url) of your new customized Category page into the Redirect Url box.
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.
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 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.