An Introduction to WooCommerce Blocks

WooCommerce is the world’s number one ecommerce solution based on the popular WordPress CMS. Flexible and open source, WooCommerce is used to build virtually any type of online ecommerce website. In this article, we are going to review WooCommerce blocks, which are a flexible way to display your products in different pages through the new WordPress Block Editor.

What are WooCommerce blocks?

Blocks are the essential building functionality of the block editor. By using WooCommerce blocks you are able to benefit from creating custom shop, cart, checkout pages and more.

WooCommerce Blocks

If you are interested in building a custom WooCommerce website using Elementor, you can try the Jupiter X theme and SellKit plugin, which offer many features to optimize WooCommerce websites.

Available Blocks

There are around 22 WooCommerce blocks to help you build an online store using the new WordPress editor. Let’s briefly review them. Stable blocks are available in the WooCommerce plugin but some of them are available in the WooCommerce Blocks plugin.

  • Featured Product
    Shows a single product in any part of the page. This is helpful for highlighting an important product.
  • Featured Category
    Shows a product category. It can be used to draw visitors’ attention to a specific product category in your shop.
  • Hand-picked Products
    Shows a grid of hand picked products.
  • Best Selling Products
    Shows a grid of your best selling product.
  • Top Rated Products
    Shows a grid of your top rated products.
  • Newest Products
    Shows a grid of your newest products.
  • On Sale Products
    Shows a grid of on sale products.
  • Products by Category
    Shows a grid of products from shop categories.
  • Products by Tag
    Shows a grid of products based on specific tags.
  • Products by Attribute
    Shows a grid of products by selected attributes.
  • Product Categories List
    Shows all product categories as a list or dropdown. It makes navigation easier.
  • Reviews by Product
    Shows reviews of a specific product. This helps gain visitors’ trust.
  • Reviews by Category
    Shows reviews from specific categories.
  • All Reviews
    Shows a list of all product reviews.
  • Product Search
    Shows a search box to help users find any product by searching its name.
  • All Products
    Shows all products of the store as a grid with pagination and sorting options.
  • Filter Products by Price
    Shows a slider to filter products in your store by price.
  • Filter Products by Attribute
    Shows a list of filters of selected product attributes.
  • Filter Products by Stock
    Shows an item in the list to filter products based on stock status.
  • Active Product Filters
    Shows a list of active product filters.
  • Cart
    Displays the current cart items.
  • Checkout
    Shows the checkout page, with customer details, shipping options and payment method with a new UI.
  • Mini Cart
    Allows visitors to see the items of their cart. It can be added to any page or sidebar.

Build a Custom Shop and Checkout Page Using WooCommerce Blocks

There are two ways at the moment to test blocks.

  1. Replacing the existing shortcodes (if available) in the default shop pages with the appropriate block in the block editor.
  2. Creating new pages and adding blocks. You just need to make sure to change the settings in WooCommerce > Settings > Advanced.

 In this article, we will use the first method.

Shop Page

The Shop page is the most important page in the store. It normally shows all the products. Edit the Shop page in your pages and add All Products in blocks in the editor.


  • Display demo products for preview purposes
  • Customize columns, rows and order of products
  • Show or hide sorting dropdown 
  • Employ paged-based pagination


  • Columns
  • Rows
  • Align Last Block
  • Show Sorting Dropdown
  • Order Products By

Checkout Page

The checkout page has received a new appealing look in comparison with the traditional checkout page. Edit the default checkout page then add the Checkout block. This block does not have many settings at the moment as it is still under active development.

To be able to see this block, you need to install the WooCommerce Blocks plugin.

WooCommerce Blocks


  • Display demo products for preview purposes


  • Dark Mode Inputs

Wrapping Up

This post provided a general introduction of what WooCommerce Blocks are and how we can create a custom shop and checkout page using blocks in the Block Editor. Some of the features are still under active development. Hopefully in the near future, we will be able to customize any part of our shops using blocks.

We’d love it if you would share your thoughts with us in the comments section below!

Recommended Posts


  1. To that end, I wanted to say thanks for the excellent material you’ve provided, and in particular for taking the time to describe the best WordPress plugins for comments. Because of your dedication to providing genuine and up-to-date information, I often consult your posts.

  2. If you want to create a unique WooCommerce storefront with Elementor, you can do it with the help of the Jupiter X theme and the SellKit plugin.

  3. If you just want to merge several videos together or trim a large file, one track is enough. When you have a more complex project with titles, sound and video effects, one track won’t do without animation studio.

    To add a track, click on the empty timeline area and choose “Add Video Track”. If you want to add an audio track, select the first menu item.

  4. Thank you very much for the very interesting information.

  5. Thanks for your sharing the knowledge about woocommerce blocks. The game geometry dash unblocked have a background about it.

  6. If you want to build a one-of-a-kind WooCommerce storefront with Elementor, you can accomplish it with the assistance of the Jupiter X theme and the SellKit plugin. These two components work together to make this possible.

  7. SMM Panel One is your one-stop solution for skyrocketing your social media presence and success. With our cutting-edge Social Media Marketing (SMM) panel, you can harness the power of various platforms to elevate your brand, engage your audience, and drive unprecedented growth. From increasing followers, likes, and comments to generating buzz around your content, our platform offers a seamless and efficient way to conquer the digital landscape. Boost your social media game with SMM Panel One and witness the magic of organic reach and genuine interactions like never before!

  8. Very helpful blog post! There’s a lot of information here that can help any business start a social networking campaign that works age of war

  9. When it comes to choosing the best SMM panel this one is the clear winner. It’s a game-changer for my business! I love the user-friendly interface of this SMM panel. Ordering likes, followers, and comments has never been easier. I’ve tried several SMM panels, but this one truly stands out as the best in terms of quality and reliability.

  10. With Elementor, the Jupiter X theme, and the SellKit plugin, you can build a one-of-a-kind WooCommerce storefront.

Add a Comment

Your email address will not be published. Required fields are marked *