How to add a custom field to the WooCommerce block checkout

Why the usual snippet does nothing

The classic checkout is a PHP template, so a filter such as woocommerce_checkout_fields could add a field to it before the page was drawn. The Checkout block is drawn in the browser, and it talks to WooCommerce through the Store API. Neither reads that filter, so a field added through it never appears, and nothing tells you why.

The code route: WooCommerce's Additional Checkout Fields API

WooCommerce has its own API for fields on the Checkout block. You register a field once, and WooCommerce draws it, validates it and saves the answer on the order:

add_action( 'woocommerce_init', function () {
    woocommerce_register_additional_checkout_field(
        array(
            'id'       => 'my-store/gift-message',
            'label'    => 'Gift message',
            'location' => 'order',
            'type'     => 'text',
        )
    );
} );

That covers a handful of field types in three places: the contact section, the address forms, and the additional order information section. Anything else (a date, a long text box, radio buttons, a field after the shipping options or before the Place order button) needs your own block code, and so does showing the answer anywhere WooCommerce does not already.

The no-code route

Fieldwright is a checkout field editor built for the block checkout. It uses that same API wherever the API can carry a field, and draws the rest itself.

1. Install Fieldwright from WordPress.org and activate it. WooCommerce 10.0 or newer is needed.
2. Go to WooCommerce → Fieldwright.
3. Under the section you want the field in, press Add field and pick a type: text, email, phone, number, dropdown, checkbox, long text, radio buttons, checkbox group, date, time, and more.
4. Give it a label. The preview beside the editor shows the checkout with the field in place as you type.
5. Press Save changes. Nothing reaches your checkout until you do.

Fields can go in nine places, from the contact section to just before the Place order button. The answer shows on the admin order screen (where you can edit it), in the order emails, on the order confirmation page and in the customer's order history, and each of those can be switched off per field.

Before you start

• Check which checkout your store actually uses. If the Checkout page holds the [woocommerce_checkout] shortcode, you are on the classic checkout and none of this applies. Fieldwright's Compatibility tab tells you, and can make a draft copy of the page with the Checkout block to try.
• Pick the field's key with care. It is the name the answer is stored under on every order, so it cannot change once customers have used it.