Migrate to WooCommerce Block Checkout in 2026

woocommerce checkout blocks conversion

Migrate to WooCommerce Block Checkout in 2026

Why migrate now

WooCommerce’s classic checkout (shortcode [woocommerce_checkout]) relies on outdated architecture: PHP hooks, jQuery, full page reload on every change. Block Checkout, progressively introduced since WooCommerce 8.3, uses a React architecture with real-time updates.

The numbers speak for themselves. According to the Baymard Institute, the average cart abandonment rate in e-commerce is 70.19%. Among the top reasons: a checkout process that’s too long or complicated (22%) and site errors or crashes (13%).

Block Checkout addresses both: fewer steps, real-time validation, no page reloads.

What actually changes

For the user

  • Fields validate in real time (no need to submit to see errors)
  • Order summary updates instantly (shipping, taxes)
  • Checkout can fit on a single page without reloading

On the technical side

  • Rendering is client-side (React), no longer server-side (PHP)
  • Classic hooks (woocommerce_before_checkout_form, woocommerce_after_order_notes, etc.) no longer work
  • Customizations go through the Blocks API (JS filters, IntegrationInterface)
  • Payment gateways must support the Block Checkout API

Performance

  • Fewer server requests during checkout
  • No full page reload
  • Heavier initial JS load (~80 KB vs ~30 KB), but smoother overall experience

Payment gateway compatibility

Before migrating, verify your gateways support Block Checkout:

Natively compatible:

  • Stripe (official WooCommerce plugin)
  • PayPal Payments
  • Mollie
  • Adyen

Compatible with update:

  • Stripe via WooCommerce Stripe Gateway (check version)
  • PayPal via WooCommerce PayPal Payments (not the old PayPal Standard)

Potentially incompatible:

  • Old or poorly maintained gateways
  • Local payment solutions without recent updates

Always test on a staging environment first.

Pre-migration audit

Before touching anything in production, take inventory:

1. Custom PHP hooks

Search your theme and snippets for anything using classic checkout hooks:

// These hooks DO NOT work with Block Checkout
woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_before_checkout_billing_form
woocommerce_after_checkout_billing_form
woocommerce_before_checkout_shipping_form
woocommerce_after_order_notes
woocommerce_review_order_before_payment

If you have code hooked to these, it needs to be rewritten for the Blocks API.

2. Plugins that modify the checkout

Common plugins to check:

  • Checkout Field Editor (or equivalent)
  • Upsell/cross-sell plugins at checkout
  • Loyalty point plugins
  • Custom shipping plugins

3. Custom fields

If you’ve added checkout fields (VAT number, delivery instructions, etc.), they need to be migrated to the __experimentalRegisterCheckoutFilters API or via a custom block.

Migration process

Step 1: Staging

Clone your site to a staging environment. Never do this migration directly in production.

Step 2: Enable Block Checkout

Edit the Checkout page in the WordPress editor. Remove the [woocommerce_checkout] shortcode and add the “Checkout” block. Do the same for the Cart page with the “Cart” block.

Step 3: Test

Run test orders with every active payment gateway:

  • Simple order (1 product)
  • Order with coupon
  • Order with shipping (verify cost calculation)
  • Order with virtual/downloadable product
  • Order as guest AND as logged-in customer

Step 4: Adapt custom code

Rewrite incompatible PHP hooks. Example for adding a custom field:

// Old world: PHP hook
// New world: client-side JS filter
const { registerCheckoutFilters } = window.wc.blocksCheckout;

registerCheckoutFilters( 'my-plugin', {
    additionalCartDataValidation: ( value ) => {
        // Custom validation
        return value;
    },
});

Step 5: Go live

After full validation on staging, apply the same changes in production. Monitor orders for 24-48 hours.

Common pitfalls

Checkout appears empty after migration. You probably have a plugin forcing the classic shortcode. Deactivate plugins one by one to identify the conflict.

Shipping costs don’t appear. Check that your shipping zones are properly configured. Block Checkout is stricter about address validation.

Custom CSS no longer applies. CSS classes have changed. Block Checkout uses wc-block-* prefixed classes instead of classic woocommerce-* classes.

Confirmation emails look different. Block Checkout may slightly change the data format sent. Check your custom email templates.

Measurable impact

On migrations I’ve guided, switching to Block Checkout combined with form simplification typically produces:

  • -20 to 35% checkout abandonment (source: WooCommerce internal data)
  • Checkout completion time reduced by ~15 seconds

The exact gain depends on your starting point. An already-optimized checkout will see less improvement than one overloaded with unnecessary fields.

Your WooCommerce checkout needs an upgrade? Request a free audit.

Need a WooCommerce store audit?

I'll send you a personalized report with the top priorities to improve. Free, no strings attached.

Request a free audit