How to Add Additional Checkout Fields to WooCommerce Checkout Blocks?

WooCommerce has been shifting much of its checkout experience to Checkout Blocks, a modern React-based interface that replaces the legacy shortcode-based checkout page. This change improves performance and flexibility, but it also means that classic filters like woocommerce_checkout_fields no longer work when you want to add custom fields to the checkout blocks page.

With WooCommerce’s new Checkout Fields API, you can easily add custom fields, like a text field to collect GSTIN, or a newsletter checkbox, to Checkout Blocks. For those who need more advanced control, we have previously written a blog post on creating a full custom checkout block, but for most store owners, the new API is simpler and faster. Let’s dive in and see how it is done.

Solution: Add Additional Checkout Fields to WooCommerce Checkout Blocks

In the code snippet below, we will be registering a simple text field such as GSTIN, but similar to this you can add a checkbox or any other field you want.

// 1. Register GSTIN in Additional Information (Checkout Blocks)
add_action( 'woocommerce_init', function() {
    woocommerce_register_additional_checkout_field( array(
        'id'       => 'namespace/gstin-number',
        'label'    => __( 'GSTIN', 'your-textdomain' ),
        'location' => 'order', // Shows in Additional Information section
        'type'     => 'text',
        'required' => false,

        // Sanitize GSTIN before saving
        'sanitize_callback' => function( $value ) {
            // Convert to uppercase and strip unwanted characters
            return strtoupper( sanitize_text_field( $value ) );
        },

        // Validate GSTIN format before order creation
        'validate_callback' => function( $value ) {
            if ( ! empty( $value ) && ! preg_match( '/^[0-9A-Z]{15}$/', $value ) ) {
                return new WP_Error(
                    'invalid_gstin',
                    __( 'Please enter a valid 15-character GSTIN (alphanumeric, uppercase).', 'your-textdomain' )
                );
            }
        },
    ) );
} );

// 2. Save GSTIN value to order meta
add_action( 'woocommerce_checkout_create_order', function( $order, $data ) {
    if ( isset( $data['namespace/gstin-number'] ) ) {
        $gstin = strtoupper( sanitize_text_field( $data['namespace/gstin-number'] ) );
        $order->update_meta_data( '_billing_gstin', $gstin );
    }
}, 10, 2 );

// 3. Display GSTIN in Admin Order Page
add_action( 'woocommerce_admin_order_data_after_billing_address', function( $order ) {
    $gstin = $order->get_meta( '_billing_gstin' );
    if ( $gstin ) {
        echo '<p><strong>' . __( 'GSTIN:' ) . '</strong> ' . esc_html( $gstin ) . '</p>';
    }
} );

Output

When a customer reaches the WooCommerce checkout page, they’ll see the GSTIN text field added to the order details section.

The field expects a 15-character GSTIN. If the customer enters a number shorter or longer than 15 characters, a validation message will appear, preventing them from completing the checkout.

Once a valid 15-character GSTIN is entered, the customer can proceed with the order. The GSTIN is then saved to the order’s metadata. Store owners can view this information both on the order details page and in the admin order page.

The GSTIN entered by the customer will also be visible in the admin order page for easy reference.

If you’d like to take block-based customization a step further, check out our post on WooCommerce Cart Blocks Customization, where we also cover adding interactive elements to the cart page, such as a checkbox to auto-apply coupons.