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 build a custom WooCommerce Shop Page in just a few minutes, with absolutely no coding required.

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

before woocommerce shop page has been customized

After customization

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.

customize woocommerce shop page

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

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:

How to Customize the WooCommerce shop page in 4 easy steps

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.

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

Add Gutenberg Blocks to your WooCommerce Shop Page

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

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

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

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

Add the WooCommerce Shop Page to the menu

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

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

Important note!

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.

How to customize the WooCommerce Shop page 2

Bonus tip: 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 tablet and phone.

Storefront Blocks also has a separate setting where you set the desktop layout.

woocommerce two columns

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.

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

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