Blocks enable you to create custom store pages, design landing pages for a collection of products, highlight specific products, showcase product categories, enable filters, add a search field, and much more. All without the need to code!
Blocks are included in WooCommerce by default. You can get early access to new blocks before they become part of WooCommerce core, by installing the WooCommerce Blocks feature plugin.
Requirements for WooCommerce Blocks
We recommend updating WordPress and WooCommerce to the newest stable version. The minimum requirements are:
- WordPress 6.1 + is required
- WooCommerce 7.3 + is required
Customize your store using WooCommerce Blocks
Showcase your products using WooCommerce Blocks
The blocks listed below enable you to showcase your products by creating grids of products based on tags, attributes, and more.
The settings and options to tweak these blocks are found in the right hand Block section. You’ll see this if you select a block in the editor and have the settings pane open.
- Products by Tag – Show a grid of products featuring a specific tag.
- Featured Product – Show a product you wish to feature.
- Hand-picked Products – Show a grid of hand-picked products.
- Best Selling Products – Show a grid of best selling products.
- Products by Category – Show a grid of top rated products.
- Newest Products – Show a grid of the newest products on your store.
- On Sale Products – Show a grid of products on sale.
- Products by Attribute – Show a grid of products featuring a specific attribute.
- Top Rated Products – Show a grid of top rated products.
- Store Breadcrumbs – Allows users to understand their location within the store quickly and facilitates navigation to previous sections.
- Product Results Count – Allows you to display the number of products found based on a specific search query or filter, making it easier for your customers to see how many products match their criteria.
- Catalog Sorting – Allows users to sort products within a category by various criteria, such as price, popularity, and newness.
- Product Meta – Allows you to display the product SKU and product categories in a single product template.
- Product Image Gallery – Allows you to add an extra image gallery to your single product template.
- Product Details – Allows you to add product descriptions, information, and reviews to your single product template.
- Related Products – Allows you to display the products related to the featured product.
Showcase all your products
Use the All products block to show all of your store’s products on a custom page.
Each product cell in the All Products block has inner blocks that you can configure. To edit how the products are shown in the grid:
- Select the All Products block
- Click the Edit icon
- Configure the available options.
You can use these blocks within a block to add, remove, or re-arrange elements like the product image, product title, product rating, product price, product summary, and product button.
Enable Filters
The following blocks enable you to build a custom shop page where customers can browse and filter products by attributes or price.
You can also use filter blocks to add functionality to your product catalog page or the product archive template.
| Filter blocks work in combination with the All Products block and with PHP templates. |
To add Filter blocks to Block theme templates:
- Go to Appearance > Editor > Templates.
- Modify any of the product listing templates (Product Catalog, Products by Category, Products by Tag, or Product Search Results).
To add Filter blocks to Classic theme templates go to Appearance > Widgets.
Cart and Checkout WooCommerce Blocks
There are currently three blocks related to the purchase flow:
- The Mini Cart block
- The Cart block (currently in beta, see this page about its status)
- The Checkout block (currently in beta, see this page about its status)
- The Add To Cart Form block allows you to add the block version of the add to cart form in a single product template.
To replace the Cart and Checkout shortcodes with the corresponding blocks, follow this guide.
Mini Cart block
The Mini Cart block allows customers to check the contents of their cart from any page of the store.
You can add the Mini Cart block from the Site Editor if you are using a block theme, or from the widget editor if you are using a classic theme.
Cross-Sells block
The Cross-Sells block is included in the Cart block for WooCommerce Blocks 8.6.0 or higher.
Adding the Cart block to a page is all that’s required to install the Cross-Sells block initially.
Once the Cross Sells block is added, as suggested above, products will start appearing as shown in the screenshot below:
You can read more about the configuration and settings of Cross-Sells block here.
Draft order status (checkout-draft)
By default, when WooCommerce creates an order, the status the order receives is Pending. This status represents an order that is complete, which has been submitted, and which is pending payment.
For the checkout process that WooCommerce Blocks provides, however, this status doesn’t truly reflect the current state of the order, which might be incomplete or which might not have been submitted yet.
The checkout-draft status provides a more accurate representation of what state these incomplete or un-submitted orders are in when they are created.
When starting the checkout process using WooCommerce Blocks, a draft order is created with the customer’s items, shipping method, and address information. This draft order has a status of checkout-draft. When the customer updates or adds information on the Cart or Checkout blocks, this draft order is updated too.
WooCommerce Blocks has a cron job that deletes all draft orders once per day on the woocommerce_cleanup_draft_orders action.
The WooCommerce Blocks feature plugin & more
New blocks start out in a feature plugin before being included in WooCommerce core. Install our WooCommerce Blocks plugin to get early access to new blocks and improvements to existing blocks.
If you want to find out more about the plugin or follow the development of new blocks, check out the plugin page on WordPress.org or the GitHub repository.