如何为自定义WooCommerce结账字段实现显示/隐藏交互功能？

1. 调整自定义字段的HTML结构 #

先在添加自定义字段时，把需要控制显示隐藏的税号、增值税号字段包裹在统一容器中，同时确保勾选框的结构正确。示例代码：

add_filter('woocommerce_checkout_fields', 'add_custom_invoice_checkout_fields');
function add_custom_invoice_checkout_fields($fields) {
    // 添加发票勾选框
    $fields['billing']['billing_checkbox'] = array(
        'type'          => 'checkbox',
        'label'         => '需要开具发票',
        'required'      => false,
        'class'         => array('form-row-wide'),
        'clear'         => true,
        'priority'      => 25
    );

    // 包裹税号、增值税号的容器，默认隐藏
    ob_start();
    echo '<div class="billing-invoice-fields">';

    // 添加税号字段
    $fields['billing']['billing_fiscalcode'] = array(
        'label'         => '税号',
        'required'      => false,
        'class'         => array('form-row-wide'),
        'priority'      => 26
    );

    // 添加增值税号字段
    $fields['billing']['billing_vatcode'] = array(
        'label'         => '增值税号',
        'required'      => false,
        'class'         => array('form-row-wide'),
        'priority'      => 27
    );

    echo '</div>';
    $invoice_fields_html = ob_get_clean();

    // 把容器插入到勾选框之后
    add_action('woocommerce_after_checkout_billing_form', function() use ($invoice_fields_html) {
        echo $invoice_fields_html;
    });

    return $fields;
}

2. 编写JavaScript控制显示/隐藏 #

通过监听勾选框的change事件切换容器状态，同时兼容WooCommerce结账页AJAX刷新场景：

jQuery(document).ready(function($) {
    // 初始化显示状态
    toggleInvoiceFields($('#billing_checkbox'));

    // 监听勾选框切换
    $(document).on('change', '#billing_checkbox', function() {
        toggleInvoiceFields($(this));
    });

    // 处理AJAX更新后的重新初始化
    $(document.body).on('updated_checkout', function() {
        toggleInvoiceFields($('#billing_checkbox'));
    });

    // 核心切换函数
    function toggleInvoiceFields(checkbox) {
        const fieldContainer = $('.billing-invoice-fields');
        if (checkbox.is(':checked')) {
            fieldContainer.show();
            // 勾选后设置字段为必填
            $('#billing_fiscalcode').prop('required', true);
            $('#billing_vatcode').prop('required', true);
        } else {
            fieldContainer.hide();
            // 取消勾选后移除必填属性并清空内容
            $('#billing_fiscalcode').prop('required', false).val('');
            $('#billing_vatcode').prop('required', false).val('');
        }
    }
});

3. 添加服务器端验证 #

防止用户绕过前端验证提交空字段，补充后端校验逻辑：

add_action('woocommerce_checkout_process', 'validate_invoice_fields');
function validate_invoice_fields() {
    if (isset($_POST['billing_checkbox']) && $_POST['billing_checkbox'] === '1') {
        if (empty($_POST['billing_fiscalcode'])) {
            wc_add_notice('请填写税号', 'error');
        }
        if (empty($_POST['billing_vatcode'])) {
            wc_add_notice('请填写增值税号', 'error');
        }
    }
}

4. 优化CSS避免页面闪现 #

在样式表中添加默认隐藏规则，防止页面加载时字段短暂显示：

.billing-invoice-fields {
    display: none !important;
}

关键说明 #

• 原生"ship-to-different-address-checkbox"的核心逻辑就是通过事件监听切换容器display属性，同时动态修改字段必填状态，这套逻辑和它完全对齐。
• 用$(document).on()绑定事件是为了适配结账页AJAX刷新后元素重新渲染的场景，避免事件失效。
• 服务器端验证是必须的，能有效防止前端被篡改导致必填字段为空的情况。

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