WooCommerce is one of the leading eCommerce platforms marking its territory in the eCommerce industry one website at a time – with over 5 million downloads. It offers a complete online store solution for small and medium-sized businesses and web professionals.
And now, the development team is working at making WooCommerce fully compatible with Gutenberg. And the first phase is about building custom WooCommerce Blocks that can be used in the new WordPress editor.
These blocks come free of cost and let you customize and change the complete look and feel of your WooCommerce store – without typing a single line of code. With a simple drag and drop tool – you can place your store products wherever on the website in whichever desired format.
In part 1 of this article we saw ten WooCommerce blocks and their significance. In this article, we’ll talk about ten more blocks you can use for an interactive online store. But first, let’s learn about adding and editing these blocks on your store.
How to add and edit WooCommerce Blocks?
To add WooCommerce Blocks, first, make sure to download a copy of the WooCommerce Blocks Plugin.
Once you install it, it becomes easy to use the custom WooCommerce blocks in any page / post. Click on the ‘add block’ [+] icon, select the WooCommerce Block you want to add, and simply drag and drop on a suitable location on your page.
Pro tip: To add blocks to your store quickly, use the ‘/’ keyboard shortcut – which will display a list of available WooCommerce Blocks.
At the same time, editing blocks is also easy. Click on the block you wish to edit and choose a suitable customization option like adjusting the number of rows or columns – from the right-hand Block Customizer panel. The changes you make will update the block.
Now that you know how to add and edit blocks, let’s jump into the next set of ten WooCommerce Blocks that you can add to your eCommerce store and make product search easier.
A list of essential WooCommerce Blocks [Part 2]
11. On Sale Products
Using the On Sale Products Block – you can grab and display all the products that are on sale in your store in a presentable and standard grid.
You can modify the number of rows and columns of the grid and choose to hide or display the product title, rating, price, and an add-to-cart button. You can also add a filter to let your customers filter the products on sale by different categories.
12. Product Search
The WooCommerce Product Search Block is one of the most useful and unique blocks that adds a search box on your store to allow your customers to enter specific keywords and search the products.
This block comes with a single customization option to display or hide the search field label.
Pro tip: It’s recommended to place the Products Search block in the sidebar or header of your eCommerce store and not directly on the page. This is because if your customer searches for a product, the product results page will not display the search box if you place it within the page—resulting in a poor customer experience.
13. Product Categories List
This block displays a list of all product categories. You can choose to display the categories through a dropdown or in a list. Examples of categories can be hoodies, tee shirts, shoes, or accessories.
You get the choice to hide or display the category images, category hierarchy (or sub-categories), product count, and empty categories (categories with no products assigned – which is hardly possible).
Displaying a list of all your product categories can make it easy for your customers to navigate and view the different products and product categories you sell on your WooCommerce store.
14. Products By Attribute
The Products By Attribute block allows you to filter products by attributes, such as color or size, and display them in a grid. This block makes it easy for customers to select specific product attributes of their choice.
Its customization options are similar to other WooCommerce blocks where you can hide or display product rating, title, price, add to cart button, and adjust the grid’s rows and columns counts.
15. Products By Tag
This block provides a finer and granular filtering option for your customers.
Using the Products By Tag block, you can list your products based on certain tags. For instance, if the product is a hat – the tags can be bucket hat, polo hat, cowboy hat, or boater hat. Its customization options are similar to that of the Products By Attribute Block.
16. Reviews By Product
The Reviews By Product is a simple block that doesn’t come with many customization options.
This block lets you display all the reviews of a specific product you choose from the list. For instance, if you choose the product hat – this block displays all the reviews received on the product hat in your store.
The Reviews By Product block plays a major role in building customer trust in your specific product and brand.
17. Reviews By Category
The Reviews By Category Block is almost similar to the ‘All Reviews’ Block we covered in part 1 of the article. The only difference is that you can filter and display reviews based on specific product categories in this block.
You can choose to hide or show the product name, product image, product rating, review name, review data, review content, and the reviewer photograph. You can also choose to add the add to cart button.
Again, the Reviews By Category Block allows your customers to make better-informed purchasing decisions by going through the customer reviews from fellow buyers.
18. Top Rated Products
The Top Rated Products Block displays a grid of all your products with their star rating. If some of your products have star ratings while others don’t – then it’ll order the grid by the highest or top-rated products and the rest of the products by the default sorting order.
Its customization options are similar to other blocks that display products in a grid, like the On Sale Products Block. However, it also comes with an additional filter by Category option – allowing customers to filter the highest-rated products with categories of their choice.
19. Hand-picked Products
The Hand-picked Products block allows you to hand-pick specific products of your choice and displays them in a standard WooCommerce product grid.
You can select as many products of your choice to drive maximum traffic towards them and increase sales.
In addition, you can customize the layout of your hand-picked products, hide/display product title, product name, product rating, add to cart button, set the filter and order options, and even set the total number of product columns.
20. Filter Products By Stock
Using the Filter Products By Stock Block – you can display your store products based on inventory status. For example, you can choose the status between out of stock, in stock, or backorder.
You can choose the heading level (H2, H3, or H4), show or hide the product count, and add an optional filter button, like “Go.” Besides these, no other customization options are available on this block.
This block is an easy way to allow your customers to see what products are in stock, on backorder, and out of stock – so they can learn about the availability of the products they’re looking for.
Conclusion
WooCommerce Blocks are excellent ways to create a stellar eCommerce store and promote products on any store page or a blog post.
While showing featured categories and products and displaying best-selling and newest products lets you maximize conversions and sales of specific products. At the same time, displaying customer reviews, providing product filtering options, and a product search box – enhance the customer shopping experience significantly.
Adding these blocks to your eCommerce store allows your customers to find the exact products and product categories they’re looking for, helping them purchase faster.
What’s more – adding and editing these blocks is a no-brainer, and you can easily do it with simple customization options and settings.
Thus, ensure to make the most out of the WooCommerce Blocks mentioned in this article to customize your WooCommerce pages, create a rich experience for your customers, promote your products in the best possible way you like, and boost your business sales.
If you missed part 1 of this article, read it here to know the full range of WooCommerce blocks you can use on your online store.