A Beginner’s Guide to Setting Up Your WooCommerce Shop Page (With Video) Print

Last updated - October 9, 2020

Even after completing the WooCommerce setup wizard and importing all your products into WordPress, your website doesn’t exactly look like an online store. This is because you haven’t set up your WooCommerce shop page the right way. Yet.

You still need to make the shop page your home page, adjust some general settings, and customize your shop page’s looks. And this no-nonsense beginner’s guide will help you do exactly that.

Your customers are waiting. So let’s get started.

Defining Your WooCommerce Shop Page

When you install WooCommerce, the plugin automatically creates essential e-commerce pages like Shop, Cart, Checkout, My account, and Privacy Policy. Each of these pages has its own utility on your website.

For example, the checkout page displays payment options, the cart page shows items added to the cart, and the shop page showcases all your products. So when you import products to your website, they’re automatically transferred to the ‘Shop’ page.

While this is convenient, you can define a custom page as your shop page too. To do it, follow these steps:

1. In your dashboard, hover over WooCommerce and click on ‘Settings’.
2. Switch to the ‘Products’ tab and stay on the ‘General’ sub-tab.
3. Here, the first option allows you to define your shop page.
4. Click on the drop-down menu and select the page of your choice.

While you’re here, you can also manage your cart behavior and set a placeholder image. Just below the ‘Shop’ page settings, the ‘Add to cart behavior’ section has two controls.

Enable the ‘Redirect to the cart page after successful addition’ option if you want your shoppers to be redirected to the cart page when they add an item to the cart. Keep the ‘Enable AJAX add to cart buttons on archives’ option if you want to add the ‘Add to Cart’ option to shop archive pages.

Below that, you can also set a placeholder image that will be displayed whenever a product in your shop doesn’t have an image linked to it. Just upload the placeholder image to your WordPress media library and paste its URL in this field.

Making the Shop Page Your Homepage

You’ve defined your WooCommerce shop page; an address on your website where shoppers can browse and buy products. But the shop page is not yet set as your homepage.

This means when someone interested in buying searches for your website’s name, they land on… well, not your shop page. From there, they have to use your navigation menu to find their way to the products page.

Online shopping should never be so inconvenient. You can make your shopper’s life easier by setting your shop page as your homepage. Here’s how:

1. In your WordPress dashboard, hover over ‘Settings’ and click on ‘Reading’.
2. In the homepage display setting, switch to ‘A static page’ instead of ‘Your latest posts’.
3. Click on the drop-down in front of ‘Homepage’ and select your shop page that you want to be listed as your homepage.

After this step, your shop page’s URL slug will disappear automatically and the ‘.com’ version of your website link will lead straight to the shop page.

Building Your WooCommerce Shop Page

You might already know that WordPress’ Gutenberg Editor is a block builder that lets you customize your pages using many types of blocks. After installing the WooCommerce plugin, you’ll get access to 19 additional blocks that are designed to help you build and customize your shop page.

The blocks you get to play with are:

• Product Search – Help visitors find your products.
• Featured Product – Visually highlight a product or variation and encourage prompt action.
• All Products – Display all products from your store as a grid.
• On Sale Products – Display a grid of on sale products.
• Reviews by Product – Show reviews of your product to build trust.
• All Reviews – Shows a list of all product reviews.
• Featured Category – Visually highlight a product category and encourage prompt action.
• Hand-picked Products – Display a selection of hand-picked products in a grid.
• Best Selling Products – Display a grid of your all-time best selling products.
• Product Categories List – Show your product categories as a list or dropdown.
• Products by Category – Display a grid of products from your selected categories.
• Newest Products – Display a grid of your newest products.
• Products by Attribute – Display a grid of products from your selected attributes.
• Top Rated Products – Display a grid of your top-rated products.
• Reviews by Category – Show product reviews from specific categories.
• Products by Tag – Display a grid of products from your selected tags.
• Filter Products by Price – Display a slider to filter products in your store by price.
• Filter Products by Attribute – Display a list of filters based on a chosen product attribute.
• Active Product Filters – Display a list of active product filters.

With these convenient blocks, you can easily build an e-commerce store that serves your customers and works for you. You can also take help from WordPress WooCommerce themes like Storefront, Astra, and GeneratePress to give your store the aesthetics and functionality that rivals only the biggest players in the e-commerce industry.

Customizing Your WooCommerce Shop Page

Apart from these handy blocks, WooCommerce also offers an extra layer of customizations to the shop page that are nestled in WordPress’ ‘Appearance’ menu. These customizations let you manage the number of products on the shop page, size of image thumbnails, and more.

Follow these steps:

1. Hover over ‘Appearance’ in your dashboard and click on ‘Customize’.
2. Click on ‘WooCommerce’ from the list of customizable website elements. Then, choose ‘Product Catalog’.
3. Click on the first drop-down and choose if you want your shop page to show products, categories, or both.
4. Click on the third drop-down and select how you want your products on the shop page to be sorted — according to name, popularity, rating, or price.
5. The last two options on this page will let you control how many products per row and rows per page your shop page should have. These two options work together to let you control the number of products that are shown in your catalog.
6. Now, go back a page and click on ‘Product Images’.
7. Here, you can adjust the size and aspect ratio of your product thumbnails.

If you’ve followed along on our guide, your shop page should now be ready to put your store’s best foot forward. Let us know in the comments if you have any questions.

Check out the video below: