Custom Fields WooCommerce Blocks

The block-based checkout does **not support PHP hooks like `woocommerce_checkout_fields`** directly because it is rendered via JavaScript (React). However, you can still add custom fields using a custom **Block-based Checkout Field Extension**, or by reverting to the classic checkout if needed.

—

## ✅ Option 1: Add Custom Fields via JS/React (For WooCommerce Blocks)

### Step-by-step (Recommended for Blocks-based checkout)

1. **Install & Activate** the [WooCommerce Blocks plugin](https://wordpress.org/plugins/woo-gutenberg-products-block/), if not already.

2. **Create a custom JavaScript plugin** to inject custom fields. Here's a simple outline:

### Step 1: Enqueue your JS
Add the following to your theme’s `functions.php`:

function enqueue_custom_checkout_block_assets() {
    if ( function_exists( 'wc_get_checkout_url' ) && is_checkout() ) {
        wp_enqueue_script(
            'custom-checkout-fields',
            get_stylesheet_directory_uri() . '/js/custom-checkout-fields.js',
            [ 'wp-element', 'wp-hooks', 'wp-components', 'wp-i18n', 'wc-blocks-checkout' ],
            '1.0',
            true
        );
    }
}
add_action( 'enqueue_block_assets', 'enqueue_custom_checkout_block_assets' );

### Step 2: Create the `custom-checkout-fields.js` file

Here’s a **basic field injection example**:

const { registerCheckoutBlockExtension } = window.wc.blocksCheckout;
const { createElement } = wp.element;

registerCheckoutBlockExtension(
  'custom-checkout-extension',
  () => {
    return {
      'checkout.shipping': {
        after: () =>
          createElement('div', {},
            createElement('label', {}, 'Your Custom Field:'),
            createElement('input', {
              type: 'text',
              name: 'custom_field',
              onChange: (e) => {
                window.wc.checkout.setBillingData({
                  ...window.wc.checkout.getBillingData(),
                  custom_field: e.target.value,
                });
              },
            })
          ),
      },
    };
  }
);

> You’ll need to extend this to save the data in the order. Currently, WooCommerce Blocks doesn’t provide native support for saving this additional field data on order submission, so further customization is needed via a custom endpoint or by switching back to classic checkout.

—

## ❌ Limitations with WooCommerce Blocks

– There's **no `woocommerce_checkout_fields` hook**.
– PHP-based checkout field plugins **won’t work**.
– Data saving to orders requires **custom endpoints or filters** (more dev work).

—

## ✅ Option 2: Use Classic Checkout

If you're not heavily dependent on the Block-based checkout UI, consider switching back to the classic checkout via:

**WooCommerce → Settings → Advanced → Page Setup**
Change the checkout page back to the default WooCommerce shortcode:

[woocommerce_checkout]

Then use this in `functions.php` to add custom fields:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
    $fields['billing']['custom_note'] = array(
        'type'        => 'text',
        'label'       => __('Custom Note'),
        'required'    => false,
        'class'       => array('form-row-wide'),
        'priority'    => 25,
    );
    return $fields;
}

add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields');
function custom_save_checkout_fields( $order_id ) {
    if ( ! empty( $_POST['custom_note'] ) ) {
        update_post_meta( $order_id, 'custom_note', sanitize_text_field( $_POST['custom_note'] ) );
    }
}

—

## 🧩 Alternative: Use Plugin (For Classic Checkout)

– **Checkout Field Editor (by WooCommerce)** – [Link](https://woocommerce.com/products/checkout-field-editor/)
– Works **only with classic checkout**, **not blocks**.

—

Do you want to proceed with **block-based checkout customization**, or would you prefer to **switch back to the classic checkout** for easier field handling via PHP?