Customize the WooCommerce Shop Page – A complete guide
If you follow my tutorial below you will have 100% control over the design of your WooCommerce Shop page, the products that you show, and the sections contained within it.
The default WooCommerce Shop Page is dynamically built and normally you don’t have any control in how it is designed.
However, the WooCommerce Shop Page is one of the most important pages on your site, so the more control over the layout you have, the better.
The good news is that we are going to use the WordPress Block Editor (Gutenberg) so you won’t need a page builder and your site will load really fast.
Customize the WooCommerce shop page in 4 easy steps
- Step 1 – Create a brand new page
- This is going to be your new WooCommerce Shop page. You can call this page whatever you like. E.G Store
- Step 2 – Design and customize your new WooCommerce Shop Page using the Block Editor (Gutenberg)
- Step 3 – Set your new WooCommerce Shop Page as your default Shop Page
- Step 4 – Add your new WooCommerce Shop page to your menu
- Go to dashboard / appearance / menus and remove your old WooCommerce shop page and replace it with your new one
Let’s go through each step in turn
Step 1 – Create a brand new page
First all you have to do is create your new page. This is going to be your new WooCommerce Shop Page. Give it a title and then design it using the Gutenberg Block Editor.
Step 2 – Design and customize your new WooCommerce Shop Page using the Block Editor (Gutenberg)
We’d recommend using Storefront Blocks and WooCommerce Blocks as great ways of bring your products and category sections in, but you can also use any Gutenberg Blocks to layout your WooCommerce Shop page anyway you like.
Step 3 – Set your new WooCommerce Shop Page as your default Shop Page
Now we need to set our new WooCommerce Shop Page to show. We do this by going to Dashboard / WooCommerce / Settings /Products.
You’ll see a new option ‘Custom Shop page redirect’.
This is added by the Storefront Blocks plugin.
Simply select your new WooCommerce Shop page in the drop down for ‘custom shop page redirect’.
Step 4 – Add your new WooCommerce Shop Page to your menu
Go to your menus (dashboard / appearance / menus and add your new Shop Page
To create a customize WooCommerce Shop Page you will need the Storefront Blocks plugin active (free trial available here) as this lets you override the WooCommerce default shop page design with your own layout. If the Storefront Blocks plugin is not active then the default WooCommerce shop page layout will show.
Read on for detailed instructions and examples on how to customize your WooCommerce Shop page.
Table of contents
- How to customize your WooCommerce Shop Page (video tutorial)
- How to customize your WooCommerce Shop Page (step by step instructions)
- Customized WooCommerce Shop Page Example
- Changing WooCommerce Grid Columns for mobile devices (Phones and Tablets)
- Theme Support
The plugins I used to customize the WooCommerce Shop Page
The page below was customized using the following WordPress plugins – both these plugins work with the new WordPress Block Editor (Gutenberg).
- Storefront Blocks (available as a free trial – click here to read more)
- Storefront Blocks lets you override the default WooCommerce Shop page design and layout without requiring any code. It also contains 11 premium WooCommerce Blocks, including a Product Table Block, a Square Grid Block, a Masonry Product Block, a Product Slider Block, a Product Carousel Block, a Product Category Block, a Flip Book Block, and a Product Card Block.
- WooCommerce Blocks (now included with WooCommerce)
- WooCommerce Blocks allow you to select and display products across your site. It lets you show products by featured, best sellers, hand-picked, on-sale, and by category and tag. The latest version of WooCommerce Blocks has added pagination – great for stores with lots of products.
Customized WooCommerce Shop Page Example
Below is an example WooCommerce Shop Page that has been customized using this technique. I’ve annotated it to show you what WordPress Blocks were used to create it.
The good news is that with the new WordPress Block editor it is very easy to customise your WooCommerce Shop Page anyway you like. Your page can look completely different to the one above.
Just follow the steps below to make a much better looking WooCommerce Shop page and increase your sales.
Video tutorial – how to customize the WooCommerce shop page
Adding Blocks and creating your new WooCommerce Shop Page is easy and only takes a few minutes (and no coding required)
Here’s a little video that shows you how easy it is to add Blocks to your pages.
Here’s the finished customized WooCommerce Shop Page
The animated gif below shows you the finished customized WooCommerce Shop page
Creating a great mobile experience for your customers is incredibly important.
The new good news is that Storefront Blocks makes it easy to change the layout for desktop, tablets and mobile phones.
How to change WooCommerce Columns on your Shop Page (for Desktop, Tablets and Mobile Phones)
Here’s a video that shows you how you can change the number of WooCommerce Columns for desktop, tablet and mobile phone.
WooCommerce mobile settings
We’ve built easy to use options that don’t require any css or understanding code.
Here’s a picture of how the options are set.
You’ll see that you can set different column layouts for tablet and phone.
Storefront Blocks also has a separate setting where you set the desktop layout.
Update – extra option for Themes that don’t declare WooCommerce support in the normal way
We’ve found a few Themes where the above method doesn’t quite work as expected.
If this happens to your site, then we’ve added a backup option in our Storefront Blocks plugin which adds a re-direct to your new shop page.
This setting can be found by going to Dashboard / WooCommerce / Settings / Products / Custom Shop page redirect.
Here’s a screenshot below – just choose your new WooCommerce Shop Page in the drop down next to ‘custom shop page redirect’.
Once you have made this setting your brand new customized WooCommerce shop page will be shown to your customers.
Set up the WooCommerce Shop Page re-direct
Note: Technically we set this redirect as a 301 redirect. This is so that all your SEO is maintained.
Anyone, regardless of their technical knowledge, can now easily create a customized WooCommerce Shop page in just a few minutes.
You don’t need to touch a line of code.
All you need to do is use the Storefront Blocks plugin and follow the simple steps above.
Your WooCommerce Shop Page will be better designed, it will have much better SEO (search engine optimisation) and you’ll get more sales.
I hope you found this article useful, if you have any questions, let me know in the comments section below.