The Ultimate Guide to WooCommerce Blocks in 2026

Customizing a WooCommerce store seems easy until you try it.

Even small changes can disrupt your layout, compromise the checkout process, or confuse customers. Most store owners simply want to showcase products, highlight a few best sellers, and make it easy for customers to buy. But doing that with shortcodes or template files often leads to frustration or requires hiring a developer.

But thankfully, WooCommerce Blocks solve that.

They let you build and manage your store visually, right inside the WordPress editor. No shortcodes. No templates. Just drag, drop, and customize.

In this guide, we’ll walk you through how to use WooCommerce Blocks the right way. You’ll see which blocks to use, how to place them, and how to set up your store for performance and reliability.

Let’s start with the basics. What are WooCommerce Blocks, and why do they matter?

What Are WooCommerce Blocks? (Overview)

WooCommerce Blocks are ready-made content elements that let you build your ecommerce store without writing code. You use them through the WordPress block editor, and each block serves a specific purpose.

• Want to display all your products? Use the All Products block.
• Want to highlight a single item? Use the Featured Product block.
• Want to help shoppers narrow down results? Use the Product Filters block, it includes options like price, color, size, and availability.

You can mix and match these blocks to create custom layouts for your homepage, shop page, cart, and checkout. Everything is editable directly in the WordPress editor.

If you’re hosting on Cloudways, you also benefit from faster backend processing. That matters, especially since many WooCommerce Blocks rely on dynamic data, such as filters, cart totals, and customer interactions, all of which need to load quickly and work reliably.

Now that you know what blocks are, let’s walk through how to access and use them.

The Complete List of Available WooCommerce Blocks

To help you navigate the new block-based experience, here is a complete list of the default WooCommerce blocks available right now, categorized by their function.

Product Display Blocks

• Product Collection: A dynamic grid to display products based on criteria (newest, best-selling, specific categories).
• Featured Product: Highlights a single product with a custom background and call-to-action.
• Featured Category: Spotlights a specific product category visually.
• All Products: Displays your entire store’s catalog in a grid.
• Best Selling / Newest / Top Rated Products: Pre-filtered grids based on performance or recency.
• Hand-Picked Products: Lets you manually select specific products to display together.
• Products by Category / Tag / Attribute: Grids filtered by specific taxonomies.

Filter & Search Blocks

• Product Filters: The new unified block that lets customers filter by Price, Rating, Attribute (Size, Color), and In-Stock status dynamically.
• Product Search: A dedicated search bar specifically for finding products.

Cart & Checkout Blocks

• Cart: A modern, customizable replacement for the classic cart shortcode.
• Checkout: A conversion-optimized, block-based checkout experience.
• Mini-Cart: A flyout cart icon that can be placed in headers or widget areas.

Review Blocks

• All Reviews: Displays a list of all product reviews across your store.
• Reviews by Product / Category: Shows reviews filtered by specific items or categories.

How to Start Using WooCommerce Blocks (Step-by-Step)

You do not need to install anything extra. The blocks come bundled with the WooCommerce plugin.

Step 1: Open the Page Editor

• Go to Pages > Add Page in your WordPress dashboard. Or open any existing page you want to edit.

Step 2: Add a WooCommerce Block

• Click the plus (+) icon in the top-left corner of the editor to open the block inserter.

Scroll to the WooCommerce section. Here you’ll find a list of available blocks such as:

• Product Search
• All Reviews
• Cart Link
• Classic Checkout
• Minit-Cart
• Featured Product
• Product Collection
• Best Sellers
• Reviews by Product

• Select the block you want, and it will appear on the page.

• You can move the block up or down, place it in columns, and customize it using the block settings on the right side.

How to Create a Simple Product Display Page

Let’s say you want to create a custom Products page that shows your entire catalog and highlights a best-seller at the top. Here’s how to do it.

Step 1: Add the Product Collection Block to Display Products

The Product Collection block lets you display your products in a grid layout. You can choose to show all products or filter them by category, tag, sale status, or other attributes. Once you add the block to your page, a live preview of your products will appear.

Once you insert the block, a live preview of your products appears. To customize it:

1. Click the block once and you’ll see a toolbar directly above the block. From here, you can move the block or open additional options like copy, duplicate, group, or delete.
2. Click the gear icon in the top-right corner of the editor (if it’s not already open). This opens the block settings sidebar.
3. In the block settings panel, you’ll be able to:
   • Set the number of rows and columns
   • Show or hide the sorting dropdown
   • Toggle visibility for product details like price, ratings, and buttons

If you’re only seeing the Advanced section in the sidebar, it’s likely the block is still in beta or you’re working in a template file where customization is limited. In that case, try editing the page instead of a full site template, or ensure you’re using the latest WooCommerce version.

Step 2: Add a Featured Product Block

• Look for Featured Product and click it.

• Once added, you’ll be prompted to select a product from your catalog using the dropdown. This block is ideal for highlighting a specific item you want to promote.

To customize how it looks:

1. Click the block to reveal the toolbar
2. Then click the gear icon in the top-right of the editor (if it’s not already open) to access the settings sidebar

From there, you can:

• Show or hide the price
• Add or edit the description
• Adjust the overlay color and background styling
• Customize the button label and action

Place this block above the Product Collection block to make sure it’s the first thing visitors see.

Making Products Easier to Find with Filters

When you have multiple products, giving customers the ability to filter by price, color, size, or other attributes makes shopping easier and faster. WooCommerce now bundles these options into a single block called Product Filters.

This block lets you combine several filtering options, like price, attributes, stock, and rating, into one flexible panel that works with your product grid.

Step 1: Add the Product Filters Block

• Click the plus icon in the editor
• Search for Product Filters and add the block to your page
• Place it above or beside your Product Collection block, depending on your layout

The block will instantly scan your store’s catalog and display available filters, no extra setup required. Depending on your product data, you may see filters for:

• Color (e.g., Blue, Red)
• Size (e.g., Large)
• Stock status (e.g., In Stock, On Sale)
• Price slider
• Ratings (shown only if your products have reviews)

At the top, you’ll also see a “Clear Filters” option that resets the selection. If some filters are missing or showing a warning, you likely haven’t created any product attributes yet.

Step 2: What to Expect in the Block

The Product Filters block is dynamic. It shows only the filters your store data supports.

If you see messages like:

“Attributes are needed for filtering your products. You haven’t created any attributes yet.”

That means your products don’t have filterable attributes like size or color. Let’s fix that in the next step.

Step 3: Create Attributes (e.g. Size, Color)

• Go to your WordPress dashboard
• Navigate to Products > Attributes

• Under Name, type something like Color or Size
• Leave the Slug as-is or customize it
• Choose Default sort order (optional)
• Click Add attribute

Once added, the attribute will appear in the list below. Now you need to define terms (the actual values like “Red”, “Large”, etc.).

• Click Configure terms next to the attribute you just created
• Add each value one by one, for example:
  • Red
  • Blue
  • Green
• Repeat this for other attributes like Size or Material.

Step 4: Assign Attributes to Products

Now that the attributes exist, assign them to products:

• Go to Products > All Products
• Edit a product

• Scroll down to the Product data section
• Click on the Attributes tab
• Select your new attribute from the dropdown

• Click Add, then choose relevant values (e.g., Red, Blue)

• Check the box for “Visible on the product page”
• Click Save attributes or update the product

Once a few products have assigned attributes, revisit your Product Filters block, the warnings will disappear, and the filters will be active.

Redesigning the Cart and Checkout Experience

Most customers drop off just before buying. A slow, clunky checkout flow is usually to blame.

With WooCommerce Blocks, you don’t have to settle for the default layout. You can rebuild both the cart and checkout pages from scratch using modern blocks that look clean and load fast.

Step 1: Replace Classic Shortcodes

If you’ve been using the default WooCommerce setup, your cart and checkout pages probably use shortcodes like:

[woocommerce_cart]
[woocommerce_checkout]

You can replace these with blocks for a better experience.

• Go to Pages > All Pages
• Edit the Cart and Checkout pages

Remove the shortcode and use the block inserter to add the Cart or Checkout block instead.

Step 2: Customize the Cart and Checkout Layouts

When you insert the Cart or Checkout block, you get more than just a static form. These blocks are built to be flexible, so you can adjust their layout and control what customers see.

What the Cart Block Displays:

• A product list with quantity controls
• A coupon code field
• A shipping calculator
• A checkout button

You can move or remove any of these sections using the List View or by selecting and deleting blocks directly in the editor. You can also style each part individually if needed.

What the Checkout Block includes:

• Billing and shipping fields
• A payment section
• An order summary

Each section is split into its own block, so you can:

• Rearrange them
• Toggle sections on or off
• Rename labels
• Streamline the process for your customers

This setup makes it easy to simplify your checkout flow and remove distractions, no plugins or code required.

How to Build a Custom Shop Page That Converts

Instead of relying on your theme’s default Shop page, you can create one that looks exactly the way you want using blocks.

This also lets you tailor the experience to your customers, like adding filters, highlighting categories, or showing recently added items.

Step 1: Create a New Page

• Go to Pages > Add Page, and name it something like Shop or Browse All Products.

Step 2: Add Key Blocks

For a solid structure, add the following blocks in this order:

1) Product Search

This adds a search bar so users can quickly look for items.

2) Product Categories List

Display categories as a list or dropdown. Enable images or product counts if needed.

3) Product Filters

Place this near the top or left side for quick access.

4) Featured Product

Choose one product to spotlight with a custom message or offer.

• Once done, publish the page, then go to WooCommerce > Settings > Products and set your new page as the Shop page.

Keeping It All Fast and Stable with Cloudways

Blocks make your store flexible, but they can also increase page load times if your hosting isn’t optimized. WooCommerce Blocks use dynamic content. Filters, carts, and product listings all rely on live database queries. If your server is slow or overloaded, this can break the experience. This is where Cloudways gives your store an edge.

With Cloudways, you get:

• Built-in caching for dynamic WooCommerce pages
• Optimized PHP stack that handles filters and checkout logic smoothly
• Auto-scaling infrastructure so you don’t crash during traffic spikes
• Staging environments to test new blocks without touching the live site

No extra plugins or server tweaks required. Just deploy WooCommerce and start building with blocks. Everything works out of the box, and if you need to troubleshoot, our support team is ready 24/7.

What to Do When WooCommerce Blocks Break or Don’t Work as Expected

WooCommerce Blocks are reliable, but issues can still happen, especially if you’re mixing old and new templates, or using a theme that isn’t fully block-compatible. Let’s walk through what to check if things go wrong.

Problem 1: A Block Doesn’t Show on the Frontend

If a block appears in the editor but not on the live site, try the following:

1. Go to the block settings on the right and make sure required fields are filled.
2. Check if your theme supports full block editing. If not, consider testing with a block-compatible theme like Storefront or Astra.
3. Review your WordPress and WooCommerce versions. Keeping them up to date is key.

Problem 2: The Page Layout Breaks or Looks Off

This usually happens when:

• A block is added in the wrong place
• Columns are mismatched
• There’s a CSS conflict from the theme or another plugin

Try using the List View to restructure blocks cleanly. You can also group related blocks and apply consistent spacing and alignment.

Problem 3: Checkout Fails to Load or Update Totals

This often points to a caching or server issue. If you’re not on Cloudways, dynamic pages like checkout may be cached incorrectly.

On Cloudways:

• Cart and Checkout pages are automatically excluded from full-page caching
• Dynamic WooCommerce pages use optimized server rules, so totals update instantly

You can also purge the cache from your Cloudways dashboard and retest the checkout flow.

How to Revert to Classic Templates (If You Really Need To)

If you’re using a theme or plugin that doesn’t fully support blocks, or a payment/shipping extension that requires the old layout, WooCommerce still gives you a fallback option. You can manually replace block-based templates with classic shortcode-based versions. Here’s how to do it.

• Go to Pages > All Pages
• Edit your Cart or Checkout page using the Block Editor
• Click on the Cart or Checkout block to select it
• Press Delete on your keyboard or use the block options menu to remove it

• Click the plus icon (+) to add a new block
• Search for and insert the Shortcode block

• In the block, enter the classic shortcode:
  • For Cart: [woocommerce_cart]
  • For Checkout: [woocommerce_checkout]
• Click Save to save your changes

This brings back the legacy layout and ensures compatibility with older plugins or custom templates.

Other Templates You Can Revert

You can apply a similar fallback method to:

• Product pages
• Category templates
• Order confirmation pages

If you’re editing these from the Template Editor (under Appearance > Editor), look in the right sidebar for a “Revert to Classic Template” button. This option is only available on supported templates.

Launch Scalable WooCommerce Stores

Handle unlimited custom fields with:
✓ Auto-scaling for traffic spikes
✓ Dedicated WooCommerce resources
✓ Built-in Redis caching

Launch Now

Advanced Tips for Power Users

If you’ve mastered the basics and want to go further, WooCommerce Blocks support more advanced workflows that can save time and improve design consistency.

Create and Save Block Patterns

You can save a group of blocks as a pattern to reuse across your site.

• Select multiple blocks using the List View
• Click the three-dot menu in the toolbar
• Choose Create Pattern
• Name your pattern and save

Next time you create a new page, you can insert this pattern instead of rebuilding the layout from scratch. This is perfect for:

• Product page sections
• Repeating call-to-actions
• Seasonal landing pages

Lock Critical Blocks

Want to prevent team members from accidentally deleting key sections? Click any block, then open the More Options menu. Choose Lock and disable move or delete options. This keeps your structure intact while still allowing content edits.

Final Thoughts: Build Better, Faster, and Smarter

WooCommerce Blocks give you flexibility without complexity. You can finally design your store the way you want, without custom code or risky plugin dependencies.

When paired with performance-first hosting like Cloudways, you get more than visual control. You get stability, speed, and a workflow that scales as your store grows.

Start small. Add a Featured Product. Swap out your old Cart page. Test filters and patterns. Over time, you’ll build a storefront that’s easier to manage and far more effective. And if you ever run into trouble, Cloudways makes it easy to test changes in a staging environment before going live.

Want to Try It Safely?

Spin up a WooCommerce site on Cloudways and test WooCommerce Blocks in a private staging area, no risk to your live site, and no slowdowns. Start your 3-day free trial and see the difference for yourself.