2022 Nov BFCM Marketplace Sale

  1. Documentation /
  2. WooCommerce Blocks

WooCommerce Blocks

Imagine creating a custom shop page, a landing page for a collection of products, or just inserting some of our product blocks in your posts and pages – that is all possible with WooCommerce Blocks. There’s plenty you can do with these WooCommerce blocks, so let’s cover what blocks are included in the core WooCommerce plugin.

Since WooCommerce integration with the Block Editor was introduced, we’ve included some great blocks you can use to include products wherever you’re using the new WordPress editor.

Requirements for WooCommerce Blocks

↑ Back to top

We recommend updating WordPress and WooCommerce to the newest stable version. The minimum requirements are:

  • WordPress 6.1.1 + is required
  • WooCommerce 7.0 + is required

Showcase your products using WooCommerce Blocks

↑ Back to top

Below is a list of blocks to use to help you showcase your products in different ways. As the block names suggest, you can create grids of products based on tags, featured products, 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
  • Featured Product 
  • Hand-picked Products
  • Best Selling Products
  • Products by Category
  • Newest Products
  • On Sale Products
  • Products by Attribute
  • Top Rated Products

Allow visitors to explore your products

↑ Back to top

These three blocks let you show all product categories as a list or dropdown, visually highlight a product category and encourage prompt action, and add a search box to allow customers to search for products by keyword.

  • Product Categories List
  • Featured Category
  • Product Search

Show product reviews

↑ Back to top

Create a list showing ALL of your product reviews, or show reviews from specific products or categories.

  • All Reviews
  • Reviews by Product
  • Reviews by Category

Build a custom shop page using WooCommerce Blocks

↑ Back to top

One of the cooler collections are these blocks that work together to build a custom shop page, including blocks that allow customers to browse and filter products by attributes or price.

  • All Products
  • Filter by Attribute
  • Filter by Price
  • Filter by Stock Status
  • Active Product Filters

You could start with the Column block built into WordPress to create a traditional page layout with a wide column and sidebar column. Next add the All Products block to the main content area.

Each product cell in the All Products block has inner blocks that you can edit. Select the All Products block and then Edit icon, and you’ll see new options to arrange how the products are shown in the grid.

Editing how WooCommerce Blocks "All Product" Block will display a WooCommerce product.

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.

Finally add and any combination of the remaining three blocks to the sidebar area to let customers filter by multiple attributes or price.

Cart and Checkout WooCommerce Blocks

↑ Back to top
The Cart & Checkout Blocks are a beta feature to optimize for faster checkout. To make sure this feature is right for your store review the list of compatible extensions from the Cart & Checkout Blocks – Status page.

There are currently three blocks related to the purchase flow:

To replace the Cart and Checkout shortcodes with the corresponding blocks, follow this guide.

Mini Cart block

↑ Back to top

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

↑ Back to top

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)

↑ Back to top

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

↑ Back to top

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.

WooCommerce

The most customizable eCommerce platform for building your online business.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment