Create a shop page in WooCommerce using Gutenberg

Apr 15, 2024 | Blog

How to Add a Shop Page in WooCommerce Using Gutenberg

WooCommerce is a popular plugin and is an ideal solution for all WordPress users to create online stores and sell their products. All the products of a store are showcased on the shop page; this is the main page that represents the store with all its products. If you are using the default Gutenberg block editor, creating a shop page would be more interesting. We will make it more interesting by adding a shop page in WooCommerce using some simple steps.

This post will demonstrate the step-by-step process to add a shop page in a WooCommerce store using Gutenberg editor.

Let’s start.

1. Create a Shop Page Layout

First of all, you need to plan a layout of your shop page. Do a little research and check what template other stores are following. We created a sample layout for the shop page of a clothing store and are going to follow this template to create the shop page. It contains the common things required on a shop page such as Latest, Best Sellers, Sales, and Categories.

Take a quick look at the shop page template.

Add WooCommerce shop page plan

Now we have a clear idea of how the shop page would look. Now let’s proceed with the next step.

2. Generate a Shop Page

Note: Before starting make sure that you have WooCommerce installed on your WordPress website.

If WooCommerce is already installed or you have installed it, a default shop page is generated during the installation. That page is visible in the Pages section.

If the default shop page is not there you can create it using the built-in WooCommerce tools.

That’s a different case as we want our custom shop page layout optimized as per our needs. That’s why we need to remove the shop default page. Let’s see how to do it using WooCommerce settings.

Navigate to WooCommerce >> Settings >> Products. Click on the clear icon of the ‘shop’ value listed in the Shop Page field. Now click on the Save Changes at the bottom.

Settings to generate default WooCommerce shop page

Now the default shop page would be still there, but it would not use the default layout that was generated initially during its creation. 

WooCommerce supports a special section of blocks for the Gutenberg editor. You can easily create all the segments of the shop page layout using those blocks.

Note: Make sure you have installed a WooCommerce block plugin on your WordPress website. If you don’t have that, you can search the ‘WooCommerce block’ term in the search field of the Add Plugins. There are many WooCommerce block plugins available. We have installed and used  ProductX, as it is one of the most popular WooCommerce block plugins.

Add ProductX WooCommerce block plugin

Take a quick look at the list of the WooCommerce blocks provided by the ProductX plugin.

Add a shop page in WooCommerce using ProductX plugin

After doing these prerequisites, let’s jump to the Gutenberg block editor and start creating a WooCommerce shop page.

3. Create and Customize the Shop Page Using Gutenberg

We now have a shop page on our WordPress website to show our creativity. We only need to follow the shop page layout created in the first step.

In our shop layout plan, we can also include a search field at the top. This would help customers easily search for their favorite products.

Edit the first block and select the Product Search block. Disable the label and use the icon on the button. You can also change the placeholder if you like.

Search WooCommerce Products

Next, select a Heading block and mention ‘Latest Products’.

Add a shop page in WooCommerce

To display the latest products in your store, you can use the Newest Products block. You need to configure the number of rows and columns to tune up the display of the number of the latest products.

Newest products WooCommerce block for Gutenberg

Now we created two columns and will insert the Best Sellers and Sale products in that.

In the first column, Create a new heading Best Sellers after that you have to select the Best Selling WooCommerce block.

Best selling WooCommerce block for Gutenberg

You can also configure the number of rows and columns to be displayed.

Configure best selling WooCommerce block column and rows for Gutenberg

In the second column, pick a Sale Product block and the products on sale will be displayed. It also has the same kind of settings like the Best Seller and Newest Products block to configure the number of columns and rows.

Sale WooCommerce block for Gutenberg

Next, put the Categories in the Heading block and select the number of appropriate columns according to the planned shop page layout.

Now use the Featured Category WooCommerce block. You can use the options to modify and style the Featured Image block in your way.

Featured category WooCommerce block for Gutenberg

Select the category that you want to display in each of the individual columns.

Add a shop page in WooCommerce using Gutenberg

That’s done.

If you want to expand the shop page with some more shopping sections, there are various other WooCommerce blocks that you can use.

Finally, you have created a beautiful shop page. Don’t go over its styling aspect as we have created it by following some simple steps and you can further enhance its styling to make it more attractive.

Posted By:
Jagmohan
A curious learner who is ready to break down and simplify things to make them easily understandable to the end user. His main motive is to deliver easy-to-grab solutions in a user-friendly manner.

0 Comments

Submit a Comment

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

0 Comments

Submit a Comment

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

Top Useful Hidden Features in Gutenberg Editor

Top Useful Hidden Features in Gutenberg Editor

Gutenberg has completely changed the content creation experience in WordPress with its user-friendly interface and incredible features. Gutenberg has become the default editor in WordPress 5.0 as it simplifies the editing process for beginners. Users can create...

Useful WooCommerce Plugins Equipped with Tab Manager

Useful WooCommerce Plugins Equipped with Tab Manager

The product page of a WooCommerce store is loaded with pricing details, product variation, and other primary product information. Suppose we want to show some more product details on a product page, what is the solution? Tab Manager for a WooCommerce store comes in...

How to Add a Floating Image on WordPress Website Using Elementor

How to Add a Floating Image on WordPress Website Using Elementor

Floating image widgets in Elementor can make your website visually interesting by segregating large blocks of text and placing animating images around them. You can draw user’s attention to important content easily using the Floating image widgets. These help keep the...

Popular on WPMozo

WPMozo Wishlist for WooCommerce WPMozo Checkout Manager for WooCommerce WPMozo Variation Swatches for Woo WPMozo Addons for Elementor

Explore, Learn, Grow: Join Now!