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
↑ Back to topWe recommend updating WordPress and WooCommerce to the newest stable version. The minimum requirements are:
- WordPress 6.2 + is required
- WooCommerce 7.5 + is required
Showcase your products using WooCommerce Blocks
↑ Back to topThe 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 products from selected categories.
- 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.
Showcase all your products
↑ Back to topUse 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.
Template Blocks
↑ Back to topWooCommerce Template Blocks are a powerful feature that streamlines content creation within WooCommerce templates. These pre-designed and customizable blocks offer efficient and consistent styling, making it easy for store owners, developers and designers of all levels to create visually appealing and functional layouts.
By incorporating Template Blocks into your WooCommerce templates, you can save time, improve your workflow, and maintain brand consistency throughout your online store.
What are Template Blocks?
↑ Back to topTemplate Blocks are modular pieces of content that you can insert into WooCommerce templates. These blocks include a variety of elements, such as text, images, links, buttons, and multimedia, and can be nested within each other to create complex and dynamic layouts.
With Template Blocks, you can easily manage your content and ensure that your design remains both unique and consistent.
Benefits of Using Template Blocks
↑ Back to topTemplate Blocks offer numerous benefits to developers, designers, and store owners. Here are some of the key advantages:
- Consistency: Template Blocks help you maintain brand consistency throughout your online store, ensuring that your design elements remain cohesive and professional-looking.
- Efficiency: With pre-designed and customizable blocks, you can save time and streamline your content creation process.
- Flexibility: You can customize or extend your Template Blocks to suit your unique needs and preferences.
- Accessibility: Template Blocks help ensure that your user interface is accessible and responsive across different devices and screen sizes.
- Seamless Shopping Experience: By creating visually appealing and functional layouts with Template Blocks, you can provide your customers with a seamless and enjoyable shopping experience.
List of Template Blocks
↑ Back to topThe 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.
- 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.
- Product Reviews – Allows you to display the reviews and the review form for a given product.
Cart and Checkout WooCommerce Blocks
↑ Back to topThere 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
↑ Back to topThe 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
↑ Back to topThe 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)
↑ Back to topBy 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
↑ Back to topNew 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.