如何在WooCommerce Checkout Blocks中通过JS更新自定义结账字段值？

1. 确保PHP注册字段时绑定Extension Key #

在通过woocommerce_register_additional_checkout_field注册自定义字段时，必须指定extension_key，这个key要和后续JS代码完全对应：

add_action( 'woocommerce_register_additional_checkout_field', function( $additional_fields ) {
    $additional_fields['my_custom_pickup_point'] = array(
        'label'         => '取货点',
        'type'          => 'text',
        'required'      => true,
        'extension_key' => 'my-pickup-extension', // 核心关联标识，JS需完全匹配
        'location'      => 'shipping', // 字段显示位置，按需选shipping/billing/other
    );
    return $additional_fields;
} );

2. 在JS组件中调用setExtensionData更新值 #

在你基于ExperimentalOrderShippingPackages创建的弹窗组件里，导入WooCommerce的data工具函数，然后在用户选择取货点的事件回调中执行更新：

// 导入所需工具函数
import { setExtensionData } from '@woocommerce/data';

// 处理取货点选择的回调函数
const handlePickupSelect = ( selectedPickupPoint ) => {
    // 第三个参数为要设置的字段新值，按需替换为取货点的对应属性
    setExtensionData( 
        'my-pickup-extension', // 和PHP里的extension_key完全一致
        'my_custom_pickup_point', // PHP中注册的字段名
        selectedPickupPoint.name // 要更新的字段值
    );
};

3. 自动同步到渲染字段 #

如果你的自定义输入框是通过woocommerce_register_additional_checkout_field让WooCommerce自动渲染的，调用setExtensionData后输入框的值会自动同步，无需额外处理。

如果是手动渲染的字段，可以用useExtensionData获取当前值并绑定到输入框：

import { useExtensionData } from '@woocommerce/data';

// 在组件内获取字段当前值
const pickupPointValue = useExtensionData( 
    'my-pickup-extension', 
    'my_custom_pickup_point' 
);

// 渲染输入框
<input
    type="text"
    value={ pickupPointValue || '' }
    disabled // 若通过弹窗选择，可设置禁用避免手动修改
    placeholder="请选择取货点"
/>

关键注意事项 #

• extension_key在PHP和JS中必须完全一致，大小写敏感。
• setExtensionData的第二个参数必须是PHP注册时的字段名，不能填错。
• 确保JS代码运行在WooCommerce Blocks的上下文环境中，才能正常调用data store方法。

内容的提问来源于stack exchange，提问作者adielbm