如何在WooCommerce结账区块中调整自定义VAT字段位置？

针对你在区块式结账中调整自定义VAT字段位置的需求，以下是无需外部插件的实现方法：

1. 将字段放在公司字段下方 #

修改你注册字段的代码，添加parent_id和position参数，指定字段挂载到公司字段之后：

add_action( 'woocommerce_init', function() {
    woocommerce_register_additional_checkout_field(
        array(
            'id'            => 'billit-for-woocommerce/btw_nummer',
            'label'         => 'BTW/Ondernemingsnr.',
            'location'      => 'address',
            'parent_id'     => 'billing_company', // 指定父字段为账单地址的公司字段
            'position'      => 'after', // 放在父字段之后（下方）
            'hidden'        => [
                'type' => 'object',
                'properties' => [
                    'customer' => [
                        'properties' => [
                            'billing_address' => [
                                'properties' => [
                                    'company' => [
                                        'const' => ''
                                    ]
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ),
    );
});

parent_id需对应目标字段的ID：账单地址的公司字段ID为billing_company，若需适配配送地址可改为shipping_company；position可选值为before（目标字段之前）或after（目标字段之后）。

2. 将字段放在公司字段右侧（并排） #

区块结账的字段默认是垂直堆叠布局，要实现并排需结合自定义类名和CSS：

步骤1：注册字段时添加自定义类名 #

add_action( 'woocommerce_init', function() {
    woocommerce_register_additional_checkout_field(
        array(
            'id'            => 'billit-for-woocommerce/btw_nummer',
            'label'         => 'BTW/Ondernemingsnr.',
            'location'      => 'address',
            'parent_id'     => 'billing_company',
            'position'      => 'after',
            'className'     => 'vat-field-inline', // 添加自定义类名用于样式控制
            'hidden'        => [
                'type' => 'object',
                'properties' => [
                    'customer' => [
                        'properties' => [
                            'billing_address' => [
                                'properties' => [
                                    'company' => [
                                        'const' => ''
                                    ]
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ),
    );
});

步骤2：添加CSS实现并排布局 #

通过内联样式加载自定义CSS，仅在结账页面生效：

add_action( 'wp_enqueue_scripts', function() {
    // 仅在结账页面加载样式
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        wp_add_inline_style( 'wc-blocks-style', '
            .wc-block-components-address-form__field-wrapper:has(.billing_company) {
                display: flex;
                gap: 1rem;
                flex-wrap: wrap;
            }
            .wc-block-components-address-form__field-wrapper .vat-field-inline {
                flex: 1;
                min-width: 200px;
            }
        ' );
    }
});

这段CSS会将公司字段与VAT字段的容器改为弹性布局，实现并排效果，同时适配响应式场景（屏幕较小时自动堆叠）。

你之前尝试无效的原因 #

• woocommerce_checkout_fields过滤器仅对传统短代码结账生效，区块式结账不依赖该钩子；
• 直接通过register_block_type覆盖内置结账区块的方式不可行，WooCommerce Blocks的区块注册逻辑不支持此操作；
• order参数是传统字段的排序方式，区块式结账使用parent_id和position控制字段位置。

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