WooCommerce Blocks

Overview

WooCommerce Blocks replaces the classic shortcode-based cart and checkout with React-powered Gutenberg blocks. Custom plugins can extend the Checkout Block by registering inner blocks (custom fields inside checkout steps), using SlotFills (inject UI into predefined injection points), and extending the Store API to save and retrieve custom data. The block-based checkout is the default for new WooCommerce stores since version 8.3.

When to Use This Skill

• When adding custom fields to the checkout form (gift message, delivery date picker, VAT number)
• When injecting promotional content or upsell banners into the cart or checkout block
• When creating a custom checkout step with additional business logic
• When replacing the legacy shortcode checkout on existing WooCommerce sites
• When building a plugin that extends checkout behavior without modifying core templates

Core Instructions

1. Register a Checkout Inner Block

   Inner blocks are React components that render inside a checkout step. They require PHP block registration + a JS/React frontend: