1. Documentation /
  2. WooCommerce Blocks

WooCommerce Blocks

WooCommerce introduces a number of blocks that you can insert in posts, pages and Site Editor patterns and templates to customize your catalog, promote your products, and deliver a great checkout experience to your shoppers.

In this guide, you will learn how to use the blocks available in WooCommerce.

Requirements

↑ Back to top

To get the most out of the site editing features built into WooCommerce, it is required to use a Block Theme. It is still possible to utilize blocks without a block theme — however, in this case the use of blocks will be limited to individual posts and pages.

Getting Started with Block Themes

New to Block Themes and site editing? We’ve put together a handy introduction to get you up to speed!

As always, to make the most of the latest WooCommerce features, including blocks, we highly recommend updating WordPress and WooCommerce to the latest stable version.

Product Collection Blocks

↑ Back to top

The Product Collection (beta) block is the newest addition to a list of blocks designed to help you display and customize archives of products; and offer product recommendations.

Upon inserting the block, and depending on the template or page that you are currently editing, you will be prompted to create your own, custom product collection; or choose from a list of variations/recipes that enable you to quickly offer some of the most common types of recommendations, including:

  • Best Sellers
  • Top Rated
  • New Arrivals
  • On Sale

The Product Collection block is utilized in the following WooCommerce templates:

  • Product Catalog,
  • Products by Category,
  • Products by Tag,
  • Products by Attribute and
  • Product Search Results

The layout and presentation of your products in these templates can be customized by editing the options exposed by the Product Collection block. By default, the Product Collection block in these templates is configured to display a grid of products. To explore and customize its options:

  1. Go to Appearance > Editor > Templates.
  2. Identify the template you want to customize. Then, go ahead and Edit it.
  3. Toggle the List View in the toolbar at the top left of the page.
  4. Locate the Product Collection block in the blocks hierarchy.
  5. Click on the block to reveal a sidebar with block options that you can customize.
  6. Expand the block in the List View and explore its inner blocks.
  7. Inspect its inner blocks to identify additional elements that you can customize.

In addition to the Product Collection block, you may notice that WooCommerce provides some additional collection blocks, including:

These blocks will be gradually phased out and fully replaced by the Product Collection block for new WooCommerce users.

Collection Filtering Blocks 

The following blocks enable shoppers to browse and filter products by attributes or price: 

Note

Filter blocks are designed to work in combination with the Product Collection block in the following WooCommerce templates: Product Catalog, Products by Category, Products by Tag, Products by Attribute and Product Search Results.

Other Blocks

↑ Back to top
  • 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.
↑ Back to top

Single Product Element Blocks

↑ Back to top

WooCommerce offers a collection of blocks that you can insert into the WooCommerce Single Product template to display and customize individual product elements, such as the product title, image, price, and short description:

  • 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 Blocks

↑ Back to top

The following blocks are provided to help you customize your store’s checkout flow:

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

Cross-Sells block

↑ Back to top

The Cross-Sells block is nested inside the Cart block. Cross-sells are products which you promote on the cart page based on the current products in the shopper’s cart, and can be set up in each product’s data.

Adding the Cart block to a page is all that’s required to include the Cross-Sells block.

The Cross-Sells block is nested inside the Cart block by default.

You can read more about the configuration and settings of Cross-Sells block here.

Limitations

↑ Back to top

WooCommerce Blocks come with certain limitations when it comes to translations using localization plugins. These issues often arise either due to lack of support from the translation plugin in translating JavaScript strings in WordPress, or due to the requirement of additional steps by users to translate these strings with their selected plugins.

Questions and Support

↑ Back to top

Do you still have questions and need assistance? 

This documentation is about the free, core WooCommerce plugin for which support is provided in our community forums on WordPress.org. Searching there you’ll often find that your question has been asked and answered before.

If you haven’t created a WordPress.org account to use the forums, here’s how.

  • If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the Woo Marketplace.
  • Need ongoing advanced support, or a customization built for WooCommerce? Hire a WooExpert agency.
  • Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.

If you weren’t able to find the information you need, please use the feedback thumbs below to let us know! 🙏