Would you like to customize the layout and design of your WooCommerce Category pages?
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 you can’t change the layout of them and every store running WooCommerce tends to look the same. And your WooCommerce Category pages are really 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 – and there are just 2 simple steps.
The picture on the right shows you an example of a WooCommerce Category page that has been customized.
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). See instructions below on how to build your new page.
Step 2 – Set up a re-direct that points your default WooCommerce Category Page to your Brand new Page. To do this you can use either of these plugins (yoast seo, rank math seo, rank math redirection plugin). My preferred choice is Rank Math SEO.
Video tutorial – how to edit the WooCommerce category page
Step by step Instructions – how to create your new WooCommerce Category page and customize it
- Click + 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 2 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.
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.
Instructions on how to set up the re-direction
Here we are going to re-direct the default WooCommerce Category page that is generated automatically for you by WooCommerce, to your brand new super duper customized Page.
We are going to use the Rank Math SEO plugin for this, so install that first. If you are already using Yoast then you can use that.
Make sure to enable the re-direction functionality in the Rank Math dashboard
Now you need 2 things –
- The url of your default WooCommerce Category page – on my site it was http://www.socialpress.co.uk/product-category/men
- The url of your new page – on my site it was http://www.socialpress.co.uk/men-category-page/
Then pop these into the Rank Math re-direction panels
And that’s it!
Your dynamically created link in WooCommerce will now re-direct to your customized page.
If you want to customize your other WooCommerce Category pages just repeat the process.
I hope you found that useful, if you have any comments or questions, feel free to post them below.