WooCommerce结账页面：添加单选按钮禁用指定字段

1. 添加单选按钮到结账页面 #

将以下PHP代码添加到当前主题的functions.php文件或自定义插件中，在结账账单区域添加控制单选按钮：

// 添加"不需要VAT信息"单选按钮到结账账单表单
add_action('woocommerce_before_checkout_billing_form', 'add_vat_removal_radio');
function add_vat_removal_radio() {
    ?>
    <div class="form-row form-row-wide">
        <label for="skip_vat_field" class="checkbox">
            <input type="radio" name="skip_vat_field" id="skip_vat_field" value="1">
            不需要填写VAT信息
        </label>
    </div>
    <?php
}

2. 前端控制字段显示/隐藏及必填属性 #

通过JS监听单选按钮状态，切换目标字段的显示状态并修改必填属性，适配WooCommerce前端验证规则：

// 加载结账页面专属JS脚本
add_action('wp_footer', 'vat_field_toggle_logic');
function vat_field_toggle_logic() {
    if (!is_checkout()) return;
    ?>
    <script>
        jQuery(document).ready(function($) {
            const $vatFieldContainer = $('#billing_company_wi_vat_field');
            const $vatField = $('#billing_company_wi_vat');
            const $radioBtn = $('#skip_vat_field');

            // 初始化状态处理
            if ($radioBtn.is(':checked')) {
                $vatFieldContainer.hide();
                $vatField.removeAttr('required').removeClass('validate-required');
            }

            // 监听单选按钮切换事件
            $radioBtn.on('change', function() {
                if ($(this).is(':checked')) {
                    $vatFieldContainer.hide();
                    $vatField.removeAttr('required').removeClass('validate-required');
                } else {
                    $vatFieldContainer.show();
                    $vatField.attr('required', 'required').addClass('validate-required');
                }
            });
        });
    </script>
    <?php
}

3. 后端跳过必填验证 #

由于目标字段默认是必填项，需在后端验证环节根据单选按钮状态，跳过该字段的必填校验：

// 结账验证时跳过VAT字段必填检查
add_action('woocommerce_after_checkout_validation', 'bypass_vat_field_validation', 10, 2);
function bypass_vat_field_validation($fields, $errors) {
    if (isset($_POST['skip_vat_field']) && $_POST['skip_vat_field'] === '1') {
        // 移除VAT字段相关的错误提示
        foreach ($errors->get_error_messages() as $errorKey => $errorMsg) {
            if (strpos($errorMsg, 'billing_company_wi_vat') !== false) {
                $errors->remove($errorKey);
            }
        }
    }
}

注意事项 #

• 若目标字段的容器ID不是billing_company_wi_vat_field，请根据页面实际HTML结构调整选择器（WooCommerce字段容器通常为字段ID加_field后缀）
• 测试结账全流程，确保单选按钮切换时字段正常显示/隐藏，选中状态下不会因VAT字段为空导致结账失败

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