WooCommerce blocks provide lots of options to showcase your products. There are currently 20 blocks added to the block editor when you install WooCommerce. 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
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
This one 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
This one 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
This 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
This block 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
This one 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
This one displays a specific product that you choose from the list, allowing you to highlight the product.
Filter Products by Attribute
This one 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
This 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
This one 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
This 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
This block displays all of your newest products within a grid. 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
This 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
This one 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
This 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
This one 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
This one 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 Tag
This one 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
This one shows all the reviews of a specific product that you choose from your list.
Reviews by Category
This 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
This one 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.
Cart
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.
Checkout
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.
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. In future articles, we’ll go into more detail about each block and see how to use them.
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
The post An Overview of the New WooCommerce Blocks Plugin appeared first on Elegant Themes Blog.
