WooCommerce block checkout: less friction, more orders.
70% of carts are abandoned before payment. WooCommerce's new block checkout reduces that number. Here's how.
The classic checkout is from another era.
WooCommerce's legacy checkout is a monolithic form built with shortcodes. It loads everything at once: all fields, all validation scripts, all styles — even those the customer doesn't need.
What it costs:
- High load time: 200-400 KB of CSS/JS for a single page
- No native express payment (Apple Pay, Google Pay)
- Rigid form, hard to customize without code
- No dynamic updates (changing country = full page reload)
The numbers: Average cart abandonment rate in e-commerce is 70.19% (Baymard Institute, 2024). Top reasons: process too complex (22%), mandatory account creation (26%), not enough payment options (13%).
Block checkout changes the game.
Introduced in WooCommerce 8.3, the block checkout is a complete rewrite. Built on the Gutenberg editor: modular, lightweight, and designed for conversion.
Modular loading
Only the needed blocks are loaded. No useless CSS/JS.
Native express payment
Apple Pay, Google Pay, and other wallets automatically appear at the top of the checkout.
Dynamic updates
Changing the country updates shipping costs and taxes without reloading the page.
No-code customization
Via the Gutenberg block editor, add or remove fields as you wish.
Simplified form
WooCommerce automatically detects required fields based on country and shipping method.
Moving from legacy to block checkout.
Migration isn't automatic. The legacy checkout uses PHP hooks (woocommerce_checkout_fields, woocommerce_after_order_notes...) that the block checkout no longer supports. If you have customizations, they need to be adapted.
What I check:
- Custom fields added to the checkout (via code or plugin)
- Payment gateway compatibility (Stripe, PayPal, Mollie, etc.)
- Plugins that modify the checkout (upsell, cross-sell, conditional fields)
- Custom PHP snippets using legacy hooks
- Coupons and promotions working correctly
The process:
- Audit existing customizations
- Identify incompatibilities
- Adapt custom code to the block checkout API
- Test on staging with real orders
- Switch to production
Compatibility with your payment methods.
Major gateways are block checkout compatible:
For more specific gateways (Alma, Oney, French bank gateways), compatibility needs case-by-case verification. It's one of the first things I check during the audit.
Your checkout is costing you sales.
I migrate your checkout to blocks, verify every payment gateway, and make sure your customizations work. Result: a faster, more effective sales funnel.