Searching for the easiest way to customize the WooCommerce shop page? 🤔
WordPress offers a broad variety of blocks to help you create professional websites. If you use WooCommerce, you also get access to dedicated WooCommerce blocks that you can use for your online store.
Therefore, you might be wondering how to use these elements to build a shop page in WooCommerce that drives conversions.
Fortunately, the process is very simple. Using these blocks, WooCommerce lets you display your products in different ways. Additionally, you can add filters and search functions to make it easier for users to browse your shop.
👉 In this article, we’ll show you how to create a beautiful WooCommerce shop page using blocks. You can follow our guidelines and choose which blocks you want to use, depending on your needs. Let’s get started!
📚 Table of contents:
- Place the All Products block
- Add Featured Product and/or Handpicked Products blocks
- Enable product search on the shop page
- Use the Featured Category blocks
- Add an option to filter products by price
How to customize the WooCommerce shop page with blocks
To get started, you’ll want to open the editor for your store’s Shop page. Then, follow these instructions to customize its content.
1. Place the All Products block
Shop pages come in all shapes and sizes. In an online store, this page typically displays all the products you have for sale. Users can click on individual items to open their respective product pages or add them to their carts directly (if the shop allows for it):
With WordPress and WooCommerce, you have full control over what elements to include in your shop page. The look and feel of this page will depend on the theme you’re using and how you configure it.
WooCommerce automatically sets up a shop page when you start using the plugin, so you can go ahead and check out what yours looks like. When you’re ready to edit it, go to Pages and find the Shop option.
Open this page in the Block Editor, and you should see something like this:
By default, the Shop page includes the All Products block and a header. If you don’t see this block, you can add it to the page by clicking on the plus (+) sign and selecting it from the list of options:
The All Products block displays a grid that contains all of your shop’s products, ordered from new to old. To change the display order for your products, click on the block and go to the settings panel on the right. Then, navigate to the Content Settings section and select your preference from the Order Products By menu:
Meanwhile, under Layout Settings, you can choose the number of columns and rows that you want to display in the product grid. Feel free to explore the other options available with this block.
2. Add Featured Product and/or Handpicked Products blocks
Many shop pages highlight specific products. These are typically items that store owners want to draw attention to, such as new or discounted stock or recently added products. WooCommerce comes with a Featured Product block that enables you to showcase any item in your store.
Once you place this block on your page, you’ll need to select the product that you want to feature and click on Done:
Then, WooCommerce will display the product’s image, name, price, description, and a call-to-action (CTA). The block should look something like this:
You can then customize this block to your liking. For instance, you might change the image and modify the CTA button.
The downside of adding the Featured Product block to your shop page is that it can distract users from the rest of your products. To counter this, we suggest using columns to display multiple featured products side by side:
An alternative to the Featured Products block is the Hand-Picked Products option. This block enables you to choose several products and display them side by side. It uses the same style as the All Products block:
Both the Featured Products and Hand-Picked Products blocks fulfill similar purposes. Ideally, you’ll pick one of the two options so as not to overwhelm visitors with too many featured items. We also recommend placing these blocks at the top of the page, so users can’t miss them.
3. Enable product search on the shop page
If you have a shop with a large product catalog, you’ll need to offer a search feature. This way, users can look for any specific items they had in mind, without having to browse through the entire shop.
When adding a search block to your shop page, you’ll want to look for the Product Search option, not the default WordPress search block. Product Search will limit the results to WooCommerce products, while the other search block will include all other pages on your site.
Here’s what the WooCommerce search function looks like:
Keep in mind that the Product Search block doesn’t work within the editor, so you’ll need to test it on the front end. Additionally, the block doesn’t offer autocomplete functionality, so users will need to type a full query and load a new page to see the results.
4. Use the Featured Category blocks
Besides pointing users towards hand-picked products, you may also want to highlight specific product categories. This can be particularly useful if you sell several types of products, as it will enable users to look for items in a specific department.
Start by adding the Featured Category block to your shop page. Then, select the product category you want to highlight and click on Done:
Heres’s what the Featured Category block will look like:
The block lets you change the color of the background and text, but it doesn’t offer a lot of additional customization options. Moreover, since the block takes up a lot of space, we recommend placing multiple featured categories side by side using columns:
Since the Featured Product Category block is very basic, we recommend you look into plugins such as Otter Blocks for further customization.
With Otter Blocks, you get to modify WooCommerce blocks by adding animations and other visibility settings:
Moreover, Otter Blocks adds a variety of new blocks that you can use on your online store. These include options such as pop-ups (which are perfect for collecting email signups) and product reviews.
5. Add an option to filter products by price
So far, your store has a search bar, hand-picked products, featured categories, and your entire product catalog. All that you’re missing is a way for users to filter products.
The Filter Products by Price block enables customers to do just that. The block displays a slider that lets customers set the minimum and maximum prices for the products they want to see:
The price values aren’t editable – they depend on the prices of your products. Visitors can either type in the values they want or use the slider to modify them.
When you make changes to the price slider, the All Products block will update to show the products that meet the criteria. This happens without users needing to reload the page.
As far as placement goes, we recommend that you add the Filter Products by Price block above your product catalog. That way, users will see it as they scroll down the page.
You can also enable users to filter products by size, color, and other features. The Filter Products by Attribute block lets you browse through products that meet a chosen attribute, based on the options available on your store.
And that’s pretty much it! 🤩 When you’re finished, make sure to save your changes and your new shop page will start working right away.
Set up your shop page in WooCommerce today 🚀
An effective shop page should include a lot of useful elements. The catalog is at the core of the page, but you can also include a search bar, product filters, featured items, and more.
Your ultimate goal is to create a page that maximizes conversions by offering users all the options they’re looking for in a layout and an order that makes sense.
To recap:
- Place the All Products block.
- Add Featured Product and/or Hand-picked Products blocks.
- Enable product search on the shop page.
- Use the Featured Category block.
- Enable users to filter products by price.
Once you set up 🔧 your shop page, you can turn your attention to your single product pages. To that end, make sure to check out our guide 👉 on how to optimize the WooCommerce product page.
Do you have any questions about how to create a WooCommerce shop page using blocks? Let us know in the comments section below!
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!