Last updated - April 10, 2023
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
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:
- In your dashboard, hover over WooCommerce and click on âSettingsâ.
- Switch to the âProductsâ tab and stay on the âGeneralâ sub-tab.
- Here, the first option allows you to define your shop page.
- 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:
- In your WordPress dashboard, hover over âSettingsâ and click on âReadingâ.
- In the homepage display setting, switch to âA static pageâ instead of âYour latest postsâ.
- 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:
- Hover over âAppearanceâ in your dashboard and click on âCustomizeâ.
- Click on âWooCommerceâ from the list of customizable website elements. Then, choose âProduct Catalogâ.
- Click on the first drop-down and choose if you want your shop page to show products, categories, or both.
- 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.
- 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.
- Now, go back a page and click on âProduct Imagesâ.
- 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: