WooCommerce: How to Get Started with WooCommerce Blocks – PART 2

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. 

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.

David Mainayar

Co-Founder at PeachPay and with a background in economics, David has been obsessed with WooCommerce ever since he discovered its transformational potential for the entrepreneurial underdog. His mission is to help level the playing field for small and medium-sized enterprises as well as independent retailers. David loves travelling to central Europe, reading books by N.N. Taleb, and learning about ancient Roman and Napoleonic history.

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.