WooCommerce is one of the top WordPress plugins for eCommerce websites. And building a WooCommerce site in WordPress is easier than ever with WooCommerce Blocks. There are currently 20 blocks added to the block editor when you install WooCommerce. WooCommerce blocks provide lots of options to showcase your products. Even more blocks and new features are available in the WooCommerce blocks plugin, which tests new blocks and features to add to the WooCommerce core. In this article, we’ll provide a brief overview of each block and what it can do.
WooCommerce Blocks in the WooCommerce Core
- 1.1 Active Product Filters Block
- 1.2 All Products Block
- 1.3 All Reviews Block
- 1.4 Best Selling Products Block
- 1.5 Featured Category Block
- 1.6 Featured Product Block
- 1.7 Filter Products by Attribute Block
- 1.8 Filter Products by Price Block
- 1.9 Filter Products by Stock Block
- 1.10 Hand-Picked Products Block
- 1.11 Newest Products Block
- 1.12 On Sale Products Block
- 1.13 Product Categories List Block
- 1.14 Product Search Block
- 1.15 Products by Attribute Block
- 1.16 Products by Category Block
- 1.17 Products by Block Tag
- 1.18 Reviews by Product Block
- 1.19 Reviews by Category Block
- 1.20 Top Rated Products Block
- 2 WooCommerce Blocks Plugin
- 3 WooCommerce Full-Site Editing with Divi
- 4 Ending Thoughts on WooCommerce Blocks
WooCommerce Blocks in the WooCommerce Core
Searching for Woo in the block editor reveals 20 WooCommerce blocks. These blocks are already built-in when you install WooCommerce. You can also find them by scrolling to the bottom of the list of blocks in the editor.
Hovering over most of the blocks reveals a preview of how it would look on your website. Each of these blocks provides a unique view of your WooCommerce products. Let’s take a closer look at each block. I’ll show what it looks like on the page and highlight the preview if it’s available. I’ll also mention any unique settings.
Active Product Filters Block
The Active Product Filters Block for WC shows the filters for the currently active product. Display them as a list or as chips (similar to buttons). Choose the heading level. It works with the All Products and Filters WooCommerce blocks.
All Products Block
All Products Block for WC displays all the products in your store. It includes sorting and pagination. Align it with the last block and show a sorting dropdown. This one doesn’t provide a preview after adding it to the page.
All Reviews Block
The All Reviews Block displays a complete list of all the product reviews. It shows the thumbnail of the reviewer, product, star rating, and review. You can sort them, choose the content that will display, choose the type of image, and adjust the list settings.
Best Selling Products Block
The Best Selling Products Block for WC displays the grid with your best-selling products of all time. You can align it with the last block. Add content elements including the title, price, rating, and add-to-cart button. You can also set the filter options.
Featured Category Block
The Featured Category Block for WC shows all products from a specific category that you’d like to set up as a featured category. Choose the category from the list. You can only choose one.
Featured Product Block
The Featured Product Block displays a specific product that you choose from the list, allowing you to highlight the product.
Filter Products by Attribute Block
The Filter Products by Attribute Block adds a filter so users can filter the products based on the product’s attributes. You can select the attributes, such as color and size, from the list. Display as a list or dropdown. Set the query type between AND/OR. Include the product count, choose the heading level, add a button, and choose the filters.
Filter Products by Price Block
The Filter Products by Price Block adds a filter that allows users to choose the prices they’re looking for. The price range can be editable buttons or text. You can add a button if you want and set the heading level. This one doesn’t provide a preview once it’s added to the page.
Filter Products by Stock Block
The Filter Products by Stock Block allows the users to show the products based on the inventory status. They can select between in stock, out of stock, and on backorder. Show the product count, choose the heading level, and add a button. You can use it with other WooCommerce blocks, such as the All Products block. It doesn’t show a preview if it’s added to the page.
Hand-Picked Products Block
The Hand-Picked Products Block lets you select the specific products that the block displays. Choose as many as you want. You can choose the content elements that will display including the title, price, rating, and add-to-cart button. It also has a button alignment option and set the order and filter options.
Newest Products Block
The Newest Products Block displays all of your newest products within a grid layout. Align it with the last block and add content elements such as the title, price, rating, and add-to-cart button. You can also set the filter options.
On Sale Products Block
The On Sale Products Block displays a grid with all your products that are on sale. Choose to display the title, price, rating, and add-to-cart button. You can align it with the last block. It also includes order and filter options.
Product Categories List Block
Product Categories List Block displays a list of your categories. Display them as a list in an outline or as a dropdown. Show the product counts, images, hierarchy, and empty categories.
Product Search Block
The Product Search Block is one of the more unique WooCommerce blocks. it adds a search box to your page where customers can enter keywords to search through your products. Show or hide the field label.
Products by Attribute Block
The Products by Attribute Block displays a grid of your products based on attributes that you choose from a list. Attributes include size, color, etc. Align it with the last block, choose the content elements that will display, and set the filter and order by options.
Products by Category Block
The Products by Category Block displays a grid of products from specific categories that you choose. Select as many categories as you want. Add content elements including the title, price, rating, and add-to-cart button. You can also align it with the last block and set the order options.
Products by Block Tag
The Prodcuts by Tag block displays a grid of products from the tags that you select from the list. Select as many tags as you want. Choose the content elements that will display from the title, price, rating, and add-to-cart button. Align with the last block and choose the order by options.
Reviews by Product Block
The Reviews by Product WooCommerce Block block shows all the reviews of a specific product that you choose from your list.
Reviews by Category Block
The Reviews by Category Block shows all the product reviews based on the category that you select from the list. Choose the content elements that will display. Add the title, price, rating, and add-to-cart button.
Top Rated Products Block
The Top Rated Products Block displays a grid with all your highest-rated products. Choose the content elements to display including the title, price, rating, and add-to-cart button, and the filter categories.
WooCommerce Blocks Plugin
The WooCommerce Blocks plugin adds even more features to the blocks in WordPress and adds two new blocks. The two new blocks will give you a compatibility notice, indicating that you might experience compatibility issues with other extensions and integrations. They include a link in their settings where you can provide feedback about the block.
The purpose of this plugin is to test new blocks and features. Once the blocks and features become stable, they’re merged into the WooCommerce core. You’ll want to be careful using this plugin with your live site.
This block adds your shopping cart to the page. You can include a shipping rates calculator, choose the link for the checkout button, and set it to dark mode. It includes the notification that you can set the page as the default shopping cart in the WooCommerce settings. It also includes the feedback link.
This block provides a checkout for your shopping cart. It provides a notification that you can set this page as your default checkout in the WooCommerce settings. It includes a dark mode option. It’s made up of several elements that you can customize independently. This one doesn’t provide a preview if you’ve added the block to your page.
New Features to Current WooCommerce Blocks
Three of the current WooCommerce blocks have new or different features:
All Reviews – adds typography and color settings. Choose from 7 preset font sizes or customize the size. Colors include 10 presets and a custom option.
Reviews by Product – adds the same typography and color settings as All Reviews. This one displays in full-width and removes the block options and content elements.
Reviews by Category – this one also adds the typography and color settings. It also displays the block in full-width and removes the block options and content elements.
WooCommerce Full-Site Editing with Divi
Divi takes WooCommerce blocks to the next level. You can customize every WooCommerce element using Divi’s visual builder and its 25+ WooCommerce Modules.
Ending Thoughts on WooCommerce Blocks
That’s our look at the WooCommerce blocks. This includes the 20+ blocks that are available in the WooCommerce core product and the 2 new blocks and settings from the WooCommerce blocks add-on plugin. WooCommerce blocks provide a great way to showcase your products. They’re easy to use and are a great way to add products to any page or post. And if you are looking for more styling options to build your online store, Divi is a great option.
We want to hear from you. Do you use WooCommerce blocks in your WordPress website? Let us know about it in the comments.
Featured Image via aliaksei kruhlenia / shutterstock.com