Customize Your Woocommerce Shop Page


In physical stores, the shop itself often reflects the brand through its layout, decor, and lighting. Similarly, your WooCommerce store should embody your brand just as much as the products you display. So why not have the ability to build your ideal WooCommerce store?

Ever since the release of WordPress 5, site owners have been empowered with the flexible WordPress Block Editor (Gutenberg). Gone are the days of relying on expensive and sluggish page-builder plugins. However, achieving your customization goals using just the base WooCommerce plugin is nearly impossible.

Enter the Storefront Blocks plugin and the Gutenberg Block editor. By combining these powerful tools, you can fully customize your WooCommerce Shop Pages.

By the end of this article, you’ll learn how to use the WordPress Block Editor to create a unique WooCommerce Shop Page. With this approach, your store will stand out from the competition without the need for a page builder, resulting in lightning-fast website performance. You’ll have the freedom to change the design, showcase specific products and categories, and add any content you desire, ensuring your brand is accurately represented and boosting your sales.

See also  Introducing ProgramMatek's WooCommerce Event Manager

A Custom WooCommerce Shop Page: The Benefits

1. Increased Sales

A well-designed shop page plays a crucial role in building a great brand and convincing potential customers to make a purchase. By customizing your WooCommerce Shop Page, you gain a significant advantage over your competitors. You can create an improved user experience, better showcase your brand, and cultivate an environment that customers will want to revisit time and time again.

2. Enhanced SEO (Search Engine Optimization)

By editing your WooCommerce Shop Page, you have the opportunity to include more keyword-rich content that your customers are searching for on Google.

Let’s Customize Your Shop Page

Your approach to customizing your WooCommerce Shop Page depends on whether you’re using a new Full Site Editing WordPress Theme (Block Theme) or an older Theme (Classic Theme). Don’t worry—I’ll explain both methods below.

Classic Themes

Create a Brand New Page

Begin by creating a new page that will serve as your customized WooCommerce Shop Page. Feel free to name it whatever you like, such as “Store.” Give it a title and design it using the Gutenberg Block Editor.

Create a new WooCommerce Shop Page

Design and Customize Your New WooCommerce Shop Page Using the Block Editor (Gutenberg)

Utilize Storefront Blocks and WooCommerce blocks to customize the design and layout of your new WooCommerce Store page. Incorporate relevant sections, categories, and WooCommerce products using the Gutenberg Block Editor. You can also leverage third-party WordPress Gutenberg Blocks.

Add Gutenberg Blocks to your WooCommerce Shop Page

Set Your New WooCommerce Shop Page as the Default Shop Page

With the Storefront Blocks plugin, navigate to your website’s dashboard, then go to WooCommerce > Settings > Products. There, you’ll find an option to set your new page as the Default WooCommerce Shop Page. You’ll notice a new option called ‘Custom Shop page redirect.’ Simply select your new WooCommerce Shop Page from the drop-down menu.

See also  WooCommerce Multisite Product Synchronization

How to customize the WooCommerce Shop page

Add Your New WooCommerce Shop Page to Your Menu

Go to Dashboard > Appearance > Menus and replace your old WooCommerce shop page with the new one. If you want your store to be front and center on your site, you can also set your beautifully customized shop page as your site’s homepage!

Add the WooCommerce Shop Page to the menu

Block Theme Support (FSE)

Here’s a video demonstrating how to use Storefront Blocks to customize WooCommerce Shop Pages when using a Block Theme. The relevant section starts at 2 minutes and 50 seconds.

Sales-Boosting WooCommerce Shop Page Edits

Customizing your WooCommerce Shop Page can significantly increase your sales. Here are five top tips to turn your Shop Page into a sales magnet.

Add a Sales Countdown

A sales countdown can be an effective way to encourage site visitors to take action. Fortunately, adding a sales countdown to your WooCommerce Shop Page is now incredibly easy. Just use the Sales Countdown Block from the Storefront Blocks plugin, set your text, and specify the dates you want to count down to.

Sales Countdown on the WooCommerce Shop Page

Add a Flip Book

Compelling product imagery can enhance sales, and adding a Flip Book to your WooCommerce Shop Page is an excellent way to showcase your stock. The Storefront Blocks plugin includes a Flip Book Block that you can leverage to create an engaging visual experience.

Add Customer Reviews to the WooCommerce Shop Page

Including reviews and testimonials on your WooCommerce Shop Page helps build trust and social proof. WooCommerce now provides two Customer Reviews Blocks that display star ratings and review text. You can easily incorporate these blocks into your Shop Page and customize their appearance.

See also  Increase Your WooCommerce Product Visibility with Product Feed Manager for WooCommerce

Zoom in on Your Product Details

The default WooCommerce Shop Page usually displays only one view of your product image. However, some products, especially those with intricate details, can benefit from showcasing different views. The Product Card Block, part of the Storefront Blocks plugin, offers an elegant flip or fade option. When customers hover over an image, it reveals an alternative view of the product.

Add a Product Table to the WooCommerce Shop Page

Product Tables allow customers to purchase multiple products directly from a single screen. Adding a Product Table to your WooCommerce Shop Page couldn’t be simpler. While there are various WordPress plugins available for creating Product Tables, the Product Table Block designed specifically for the WordPress Block Builder (Gutenberg) is incredibly user-friendly.

Creating a Responsive WooCommerce Shop Page

Providing a seamless mobile experience for your customers is crucial. Fortunately, Storefront Blocks makes it effortless to customize the layout for desktop, tablets, and mobile phones.

How to Customize the Number of WooCommerce Columns on Your Shop Page

Watch this video to learn how you can easily change the number of WooCommerce Columns for desktop, tablet, and mobile phone.

WooCommerce Mobile Settings

We’ve designed easy-to-use options that don’t require any CSS or coding expertise. The image below illustrates how to configure the settings, where you can specify different column layouts for tablets and phones. Storefront Blocks also provides a separate setting for desktop layout.

WooCommerce Columns Customization

Frequently Asked Questions


Thanks to the WordPress Block Builder Editor (Gutenberg), the WooCommerce Blocks plugin, and the Storefront Blocks plugin, anyone can easily create a fully customized WooCommerce Shop Page within minutes. You don’t need to touch a single line of code. By following the simple steps outlined above, your WooCommerce Shop Page will have an improved design, enhanced SEO, and ultimately, drive more sales.