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. 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 3.6 we’ve included some great blocks you can use to include products wherever you’re using the new WordPress editor. Check the WordPress editor documentation to learn more about blocks and the new editor itself.

Requirements

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

  • WordPress 5.3 + is required
  • WooCommerce 4.3 + is required

Showcase your products

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
    Products by Attribute Block
    Best Selling Products Block Settings
    Products by Category Block Selection Frontend
    Products by Category Block Selection
    Best Selling Products Block
    Hand picked Products Block
    Featured Product Block
    Products by Tag block

Allow visitors to explore your products

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

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

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 Products by Attribute
  • Filter Products by Price
  • 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.

You can use these blocks within a block to add, remove, or re-arrange elements like the product image, product titleproduct ratingproduct priceproduct 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

The feature plugin also includes two new blocks:

  • Cart
  • Checkout

These blocks are a ground-up rebuild of the purchase flow, based on industry best practices. These blocks are under active development, and are intended as a replacement for the Cart and Checkout shortcodes.

Click here to find out more about the status of the Cart & Checkout blocks.

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.

Was this article helpful?
Dislike 0
Views: 6

Cart

Log in

Create an Account
Back to Top