The Ultimate Guide to customizing the WooCommerce Shop Page in 2022
This tutorial will show you how to build a custom WooCommerce Shop Page in just a few minutes, with absolutely no coding required. You’ll be able to change the WooCommerce Shop Page, select the products that you show, and choose the sections contained within it. We’ll be using the Gutenberg Block Editor and the Storefront Blocks plugin.
What’s wrong with the normal WooCommerce Shop page?
The free WooCommerce plugin is a fantastic tool, offering powerful functionality for anyone to turn a WordPress website into an online store in minutes.
But it’s a victim of its own success. WooCommerce is a starting point, a foundation that puts the backend systems you need to run an eCommerce store directly into your WordPress dashboard, but that’s about it.
The default WooCommerce Shop Page on your site’s frontend is dynamically built, but you don’t have any control over its design as this is at the mercy of your WordPress Theme and WooCommerce. With so many sites running WooCommerce, every online store can end up looking and feeling like any other.
If you think about traditional brick-and-mortar retail, though, the experience couldn’t be further from these cookie-cutter template sites. Stroll down any high street, and every shop you pass will look different: different styles of sign, different kinds of window dressing, different ways of displaying all their products when you get inside.
So why should online stores not follow the same principles?
What principles are we talking about here? Well, let’s think about the point of having an online store:
- Encourage customers “off the street” to browse what you have to offer.
- Make it easy for customers to find what they’re after, whether they’ve already got a single product or vague idea in mind.
- Sell your products effortlessly: customers should have no trouble finding an “add to cart” button and getting to the checkout page.
Express your brand identity: with physical stores, the styling of the shop itself is often the only way they express their brand – through the layout, decor, lighting, and so on. The design of your WooCommerce store should reflect your brand just as much as the actual products you’ve got on display.
Using just the base WooCommerce plugin, achieving any of these aims is nigh on impossible.
Since the release of WordPress 5, site owners have had the power of the hugely flexible WordPress Block Editor (Gutenberg) to effortlessly drag and drop their site together, without the need for an expensive and slow page-builder plugin. So why shouldn’t you be able to build your ideal WooCommerce store in the same way?
That’s where the Storefront Blocks and WooCommerce Blocks plugins come in. In this tutorial, we’ll use the WordPress Block Editor to build a brand new WooCommerce Shop Page, so your store will stand out from the crowd, you won’t need a page builder, and your website will load lightning fast.
You’ll be able to change the design, choose which products and categories to show, and add any content you like, so your brand is better reflected, and you’ll get more sales.
Before and after customization
The default WooCommerce Shop Page just shows a list of your products. WooCommerce automatically creates this page for you.
You have no control over the design.
In this example of a Custom WooCommerce Shop Page, we have added Sections that make it easier for your shoppers to navigate to what they want to purchase.
You have 100% control over the design.
If you’re more of a visual learner, we’ve created a video of the steps outlined in this tutorial so you can follow along – check it out below:
A Custom WooCommerce Shop Page has two big benefits
1. More Sales
Great design is incredibly important in building a great brand and convincing potential customers to buy from you. By creating a better design for the WooCommerce Shop Page, you’ll get a big advantage over your competitors (who are likely to be restricted to the normal WooCommerce Shop Page layout). You’ll improve the user experience, express your brand better, and create an environment to which customers will want to return again and again.
2. Much better SEO (Search Engine Optimisation)
By editing the WooCommerce Shop Page you can include much more keyword rich content that your customers will be searching for on Google.
How to customize your WooCommerce Shop Page
Your steps to customize your WooCommerce Shop Page will vary depending on whether you are using a new Full Site Editing WordPress Theme (Block Theme) or an older Theme (Classic Theme). But don’t worry, I’ve outlined both approaches below.
Classic Theme – How to customize your Shop Page
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. You can call this page whatever you like, e.g., “Store”. Give it a title, and then design it using the Gutenberg Block Editor.
2 – Design and customize your new WooCommerce Shop Page using the Block Editor (Gutenberg)
Customize the design and layout of your new WooCommerce Store page using Storefront Blocks and WooCommerce blocks. Bring in relevant sections, categories, and WooCommerce products using the Gutenberg Block Editor. You can also use third-party WordPress Gutenberg Blocks.
We’d recommend using Storefront Blocks and WooCommerce Blocks as great ways of bringing your products and category sections in, but you can also use any Gutenberg Blocks – including WooCommerce shortcodes and widgets – to layout your WooCommerce Shop page any way you like.
3 – Set your new WooCommerce Shop Page as your default Shop Page
Once there, you’ll see an option to set your new page as the Default WooCommerce Shop Page.
You’ll see a new option, ‘Custom Shop page redirect’.
Then, simply select your new WooCommerce Shop page in the drop-down for ‘custom shop page redirect’.
4 – Add your new WooCommerce Shop page to your menu
Go to Dashboard / Appearance / Menus and remove your old WooCommerce shop page, replacing it with your new one. If you want your store to be front and centre of your site, you can also set your newly-beautiful shop page as your site’s homepage!
Full Site Editing
If you are using a Block Theme then you can edit the Shop Page Template
Navigate to the Shop Page Template in the Site Editor – this is called Product Achive
Build your Shop Page Template using the Blocks in Storefront Blocks
5 Sales-Boosting WooCommerce Shop Page Edits
Customizing the WooCommerce Shop can really increase your sales.
Here are five top tips to make your Shop Page a sales magnet.
1 – Add a Sales Countdown
Sales Countdowns can be a great way to encourage site visitors to take action.
Luckily adding a sales countdown to the WooCommerce Shop Page is now really easy. Just use the Sales Countdown Block from the Storefront Blocks plugin, set your text, and the dates you want to count down to. Here’s a short video.
2 – Add a Flip Book
Great product imagery sells products, and adding a Flip Book to the WooCommerce Shop Page is a great way to really showcase your stock.
Here’s a video that shows the Flip Book Block included within the Storefront Blocks plugin.
3 – Add Customer Reviews to the WooCommerce Shop Page
Adding reviews and testimonials to your WooCommerce Shop Page is a great way to build trust and social proof. WooCommerce now comes with two useful Customer Reviews Blocks that show star ratings and the review text. Here’s a video that shows you how to add Customers Reviews to the WooCommerce Shop Page and also the customization options included in the Review Block.
4 – Zoom in on your Product details
Normally the WooCommerce Shop Page will just show one view of your Product Image. However, some Products, such as those with fine detail, will sell better if you can effectively show different views of your product.
The Product Card Block (part of the Storefront Blocks plugin) has an elegant flip or fade option, so that when your customers hover over an image it will show an alternative product image view.
5 – Add a Product Table to the WooCommerce Shop Page
Product Tables are great because they allow your customers to purchase multiple products all from one screen.
Adding a Product Table to the WooCommerce Shop page is really easy. There are a number of WordPress Plugins that let you create Product Tables, however the Product Table Block shown below is designed specifically for the WordPress Block Builder (Gutenberg) so it’s very easy to use.
The plugins I used to customize the WooCommerce Shop Page
The page below was customized using the following WordPress plugins:.
To create and customize your WooCommerce Shop Page you will need the Storefront Blocks plugin active.
Storefront Blocks 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 still show.
- 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, best0 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 customised using this technique. I’ve annotated it to show you what WordPress Blocks were used to create it.
Creating a Responsive 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 Customize the Number of 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 of code.
Here’s a picture of how the options are set, where you’ll see that you can set different column layouts for tablets and phones.
Storefront Blocks also has a separate setting where you set the desktop layout.
Frequently Asked Questions
Do I need a Page Builder like Elementor to edit the WooCommerce Shop Page?
No, you can edit the WooCommerce Shop just using the WordPress Block Builder Editor and the Storefront Blocks plugin.
Are there SEO benefits if I edit the WooCommerce Shop Page?
There are big SEO benefits if you edit the WooCommerce Shop Page. You’ll be able to add far more keywords to your main shop page.
Why do I need a WordPress plugin to edit the WooCommerce Shop Page?
The WooCommerce Shop page is dynamically created and normally you can’t edit it. The Storefront Blocks plugin makes it possible to Edit and Customize the WooCommerce Shop Page.
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 WordPress Block Builder Editor (Gutenberg), the WooCommerce Blocks plugin, and 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.