How to Build a Shop Page with WooCommerce + Gutenberg

By: Allie Nimmons

Have you always wanted to launch an online store, but were unsure of how to do it? Anyone can open an online shop with WordPress using WooCommerce and Gutenberg. You don’t have to be an e-commerce expert or an experienced developer to create a shop on your site. 

WooCommerce provides essential e-commerce details, like the ability to build products and set shipping information. The WordPress Block Editor (aka Gutenberg) provides a host of options to help you build dynamic and powerful web pages. 

Together, WooCommerce and Gutenberg give you all the tools, resources, and design help you need to build a professional-looking shop on your website quickly. 

In this guide, you will learn how to plan and build a shop page using WooCommerce and Gutenberg. By the end, you will be ready and prepared to build your own shop page with all the components you need to start selling. 

Watch The Video

Prefer to read? No problem. We have all the text you could want, just below.

Getting Started With WooCommerce Products

The first step to building a shop page with WooCommerce and Gutenberg is to install the free WooCommerce plugin. The WordPress Block Editor comes pre-installed with your WordPress website, so it is ready to go. WooCommerce, however, does take a small handful of steps to install, activate, and set up.

From your WordPress dashboard, go to “Plugins”, then “Add New”. 

Search for “WooCommerce”. It should pop up as one of the first options. Select “Install”. Once it’s installed, select “Activate”. 

You will be asked to fill out some information about your shop and location. This information is vital for making sure you can sell and ship things properly. WooCommerce clearly walks you through all the things you need to include in order to eliminate the guesswork later. 

Once you have completed this setup section, you are ready to begin building your shop! 

The first thing you will need to do when building a shop is to add some products. After all, what good is a shop with no inventory? Don’t worry – you can launch your shop with just one product if you want to! But it’s a good idea to provide a large selection for shoppers to choose from. You can add new products later at any point.

Building Your First Product

Each product you sell on your WordPress site should get its own product page. Once a product has a product page, it can be added to your store.

Remember that you don’t need a page for each individual product variation that you have offer. For example, maybe you sell 3 different t-shirt designs and each comes in 3 colors and 4 sizes. That comes out to 36 possible combinations. But you don’t need to build 36 pages. Instead, consider building 3 different product pages (one for each design) and each one can have attributes so that buyers can choose the color and size they want. (More on attributes later!)  

It’s a good idea to have a spreadsheet or list handy of all the products (and their variations) for which you need to build pages. 

To build your first product, go to your Dashboard, then go to “Products”, and “Add New”. 

There are a few sections you will need to fill out before publishing your first product:

  1. Product Name – This should be fairly short, but descriptive. Avoid keyword stuffing!
  2. Product Description – This is where you can go into depth about what makes this product amazing. Think about describing what it’s made of, what it could be used for, etc. 
  3. Category – It’s a good idea to sort products into basic categories. If you need inspiration, check out a competitor’s website to see how they sort their products. 
  4. Tag – Tags are optional, but very handy for sorting. Tags could describe things like color, size, style, flavor, etc.
  5. Image – Upload at least one high quality image showing off the product. Showing images being used or worn is often preferable to showing them on a plain background.
  6. Price – This part is self-explanatory!
  7. Stock (optional) – Do you only have a limited number available? Add a stock number so that you don’t oversell. 
  8. Shipping – Add your shipping details if you are mailing products to buyers directly.
  9. Attributes (optional) – If you have variations of your product, add them here. For example, we talked about t-shirts before. This is where you would add details like styles, sizes, colors, etc. so that the buyer can select the exact kind of t-shirt they want. Learn more about managing product attributes here.

Once all of these options have been set, your product is ready to publish! Click the “Publish” button to publish this product. 

Congratulations! You can view your product now using the “Preview” button.

In order to populate your shop, you will need more than one product. Repeat these steps for all the products that you would like to sell. Remember to keep categories and tags in mind; these will help your customers find the right products through your shop page. 

Anatomy of a Great Shop Page

A great Shop page makes it easy for users to find exactly what it is they want. You often have two types of users visiting your shop: people who know what they are looking for and people who are browsing. Your Shop page must be optimized for both types. 

The WooCommerce Shop page provides you with a grand list of all your products. 

Users can view the product title, image, price, and a bit of extra information. Clicking on a product takes the visitor to the individual product pages we just built.

Your Shop page must at least include this product list with options to search or filter those products. Customization for those filtering tools is up to you!

This default shop layout will function perfectly well, but we want a great shop, so we are going to plan and customize our page further.

There are other nice-to-have components of a great Shop page, like sections for newer items or sale items. This is where you can get creative and distinctive with your Shop page layout and design.  If you’re looking for some inspiration for how to lay out your Shop page, check out these 25 WooCommerce store examples

Plan Your Shop Page

Once you know the elements you want to include on your Shop page, it’s a good idea to sketch out a simple layout. You can do this with online wireframing tools or just a pencil and paper. Wireframes help you remember all the components you need, but it’s not a hard and fast rule to stick to your wireframe. You can definitely change things up as you build.

As an example, let’s design a Shop page that has products, searching, and filtering in addition to a “New Products” section and a “Sale” section. 

My wireframe looks like this. Notice how I identified where each and every section will go, how many products will be featured in each section, and roughly how large each section will be in relation to the others. 

Now that you have your idea and a quick sketch to guide you, it’s time to actually build the shop on your website! 

Building Your Shop Page with the WordPress Block Editor

With WooCommerce and the Block Editor, you can put together your Shop page fairly quickly. You already created your product pages with WooCommerce. Now let’s review step-by-step how to build a Shop page with those products in the Block Editor.

Step 1: Generate the Shop Page

When you install WooCommerce, a Shop page will automatically generate. You can find it by going to Pages > Shop. Click the edit link below the Shop page name and you will be taken to the Block Editor

Tip: WooCommerce automatically generates many pages for you – like the “Shop”, “Cart”, and “Checkout” pages. If you accidentally delete your shop page or any of the default pages, following these four steps to quickly recreate them. 

  1. Go to Dashboard > WooCommerce > Status
  2. Choose the Tools tab from the top left area
  3. Navigate to “Create default WooCommerce pages” 
  4. Click on Create Pages

For our store, we want to create our own shop page layout. In order to remove the default layout, follow these steps.

  1. Go to “WooCommerce” > “Settings”
  2. Choose the “Products” tab
  3. Select the X where “Shop” is listed in the “Shop Page” field
  4. Save this change.

Now, you will still have a “Shop” page in your list of pages, but it won’t have the default Shop layout that we saw before.

Step 2: Use the Block Editor to Create a Layout

Now that the page exists on your WordPress website, it’s time to add the content! This is where your page really starts to come to life.

Pull out that wireframe you created earlier to guide you as you create your layout. The wireframe will help you decide which Blocks to put where. 

When searching for Blocks in the Block Editor, remember that there is a special section just for WooCommerce blocks! You can choose these to display different shop-related content areas. Simply choose one to add it to your layout. These Blocks are key to building a super-powered Shop page with WooCommerce and Gutenberg.

Maybe you want one section after the other down the page. This is the more simple method since you just need to keep adding Blocks one after the other until you have the total you need.

Maybe you want some content blocks beside others in columns. This can make your page a little more dynamic. That is how I built my wireframe example. In order to create columns in the Block Editor, add a new Block and then search for columns. Select a variation to start with depending on how many columns you’d like.

Each column now has a space to add a Block! Add a new row of columns by repeating the process directly below the row of columns you just made. 

Step 3: Customize Your Layout

Now that you have the skeleton of your shop page set up with Gutenberg Blocks, it’s time to customize each one. Depending on how you want your Shop page to perform, you will need to edit certain settings. You can breeze through this section, or you can take your time and really explore all that each Block has to offer! 

For example, in my “Sale” section, I can change the number of columns and rows I want. I can toggle on and off the product title, price, rating and more. And I can change the order of the products. 

Click on each Block you added and explore the Block settings that appear on the right-hand section. If you’re unsure how the final result of a choice will look, use the “Preview” button in the top right-hand corner of the page.

Here is my Shop page after I’ve made all the customizations I need in order to match my wireframe:

Step 4: Test Your Page and Add Final Touches

Now it’s time to save and test to make sure the shop is working properly. 

Publish the Page

Save by selecting the “Publish” button in the top right-hand corner of the screen. Don’t worry – your site visitors won’t see the page quite yet. 

Go to the front-end of your website and add “/shop” after the URL. You should be able to see your shop in your browser now.


Test the Page

Now that you can see the page, test the filter and sort tools as though you were looking for an item. This is in order to confirm that they are showing products correctly. Click on all the product links to make sure they show up the way you want. Ask a friend to test out the page for you to catch any mistakes you may have missed.

Back on the page’s edit screen, make sure that your Shop page has a beautiful featured image so that it looks great when shared on social media. In the bottom right-hand corner of the screen, find the “Featured Image” section and use “Media Library” to upload a photo. 

Hop over to your mobile device and open up your Shop page there, too. Make sure everything looks normal and that text and images are easy to see. Chances are, most people will be coming to your site via their phone, so it’s important to make certain that the experience is smooth.

Share the Page

When all looks perfect, add the Shop page link to the rest of your website! Make sure that the page is easy to find for all your website visitors. 

You may want to add it to the main navigation menu. This is a very common place to add the Shop page link and where most people will look for it. WooCommerce provides built-in tools to help you accomplish this. 

Go to “Appearance > Menus”. Along the left side of the menu screen, go to “Pages” and select “Shop Page”. Click “Add to Menu”. This will add a link to the “Shop” page to your menu for you. 

Are you ready to build a shop page with WooCommerce and Gutenberg?

No matter what you are selling, using WooCommerce and Gutenberg to build a shop page on your WordPress site is within your reach. 

With the free WooCommerce plugin, you have everything you need to make your shop accessible to visitors. Start by adding products, organize them how you’d like using the Block Editor, then click Publish. If you need more customization, WooCommerce has a whole library of extensions and add-ons you can use to take your shop to the next level.

Sign up with WordPress.com today and begin building. All you need is an internet connection, the plugin-enabled plan, and some inventory to begin selling directly to website visitors. 

ABOUT THE AUTHOR

The WordPress.com Team

We're a team of happiness engineers, developers, editors, and WordPress experts. Our team personally curates and serves up the best resources to help you no matter where you are in your blogging or website-building journey. At WordPress.com, our mission is to democratize publishing one website at a time. Create a free website or build a blog with ease on WordPress.com. Dozens of free, customizable, mobile-ready designs and themes.

More by The WordPress.com Team

%d bloggers like this: