How to customize the WooCommerce Shop page

how to customize the woocommerce shop page

How to Customize the WooCommerce Shop Page – A complete guide

This tutorial will show you how to customize the WooCommerce Shop Page in just a few minutes, with absolutely no coding required.

To customize the WooCommerce Shop Page, first create a brand new page, then use the WordPress Block Editor, the Storefront Blocks plugin and the WooCommerce Blocks plugin to create the design you would like and to bring in the products and categories you want in your Shop Page; then set your new page as your default Shop Page in WooCommerce settings.

Sound simple?

Well it is.

Read on for step by step instructions :)

You’ll be able to select the products that you show on your WooCommerce Shop Page, and choose the sections contained within it.

Introduction – What’s wrong with the normal WooCommerce Shop page?

The default WooCommerce Shop Page is dynamically built but you don’t have any control in how it is designed, as this is set by your Theme and WooCommerce.

However, the WooCommerce Shop Page is one of the most important pages on your site, so the more control over customizing the layout you have, the better.

We are going to use the WordPress Block Editor (Gutenberg) to build our customize WooCommerce Shop Page so you won’t need a page builder and your website will load really 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

The default WooCommerce Shop Page will just show a list of your products.

WooCommerce will automatically create this page for you.

You have no control over the design.

before woocommerce shop page has been customized

After

In this example of a Customized 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.

customize woocommerce shop page

Customizing the WooCommerce Shop Page has two big benefits

1. More Sales

Great design is incredibly important to build a great brand and to convince your 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)

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 the WooCommerce shop page video tutorial

Step by step instructions – How to Customize the WooCommerce shop page in 4 easy steps

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

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.

Create a new WooCommerce Shop Page

2. Design and customize your new WooCommerce Shop Page using the Block Editor (Gutenberg)

Customize the design and layout or 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 bring your products and category sections in, but you can also use any Gutenberg Blocks to layout your WooCommerce Shop page anyway you like.

Add Gutenberg Blocks to your WooCommerce Shop Page

3. Set your new WooCommerce Shop Page as your default Shop Page

Using Storefront Blocks, set your new page as your WooCommerce Shop Page by going to your website’s dashboard, then WooCommerce / Settings / Products.

Once there you will see an option to set your new page as the Default WooCommerce Shop Page.

You’ll see a new option ‘Custom Shop page redirect’.

This option is added by the Storefront Blocks plugin so you’ll need to make sure you have that installed.

Then, simply select your new WooCommerce Shop page in the drop down for ‘custom shop page redirect’.

How to customize the WooCommerce Shop page 1

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

Add the WooCommerce Shop Page to the menu

Read on for detailed instructions and examples on how to customize your WooCommerce Shop page.

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).

Important note!
To create a customize WooCommerce Shop Page you will need the Storefront Blocks plugin active (free trial available here).

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 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, 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.

How to customize the WooCommerce Shop page 2

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.

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.

How to customize the WooCommerce Shop page 3

Here’s the finished customized WooCommerce Shop Page

The animated gif below shows you the finished customized WooCommerce Shop page

How to customize the WooCommerce Shop page 4

Bonus tip!

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.

woocommerce two columns

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.

customize woocommerce shop page

Conclusion

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.

26 thoughts on “How to customize the WooCommerce Shop page”

  1. Hi there, I love this page builder, and the tutorial is very well done – I just have one problem, I cannot find the woocommerce button in the sidebar for me to add the products in?? Can you help me with this – thanks!

  2. There is something more straightforward than creating a new page and adding a filter to change the shop page link..

    You can override the woocommerce_content function and add a condition if it’s the shop then display the post_content (which will be your gutenberg page) instead of displaying the product loop

  3. Hi Jamie, This looks exactly what I’ve been looking for to drastically improve Woocommerce! I’m little confused though, could you kindly tell me how Storefront Plugin blends with Woocommerce, like deep into the mechanics, ie, CHECKOUT PAGE, MY ACCOUNT, DOWNLOADS etc……. I imagine we still use this as the ‘Operation Hub’ and StoreFront Plugin, is for fantastic, fluid design of SHOP PAGE & PRODUCTS only etc…… ?

    Thanks so much, Au

    1. Jamie Marsland

      Hi Au,

      Everything else stays the same :) This way is very lightweight and doesn’t effect anything else.

      make sense?

      jamie

  4. Hi – I am not really sure how the default Woocommerce shop page works – if I click Edit it seems to be pretty blank but there must be some smarts behind it to give me my default results (that I want to improve) – can I just edit the existing “Shop” page and add your various blocks to it or is that going to cause confusion/errors.

    1. Hi Peter,

      Yes that’s correct you can’t directly edit the woocommerce shop page.

      But if you follow the 4 steps at the top of the tutorial (and use storefront blocks) you’ll be able to :)

      let me know if that works for you :)

      jamie

  5. I love this tutorial. Thank you so much. I don’t see a Shop Page redirect option in my WooCommerce>Settings>Products page. Is that something that is added once I activate Storefront Blocks and WooCommerce Blocks?

      1. Thanks! I’m sold on purchasing it now. That’s the missing piece I was looking for for my site…I was trying to avoid coding on the backend as much as possible. Are there any early Black Friday sales?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top