根据所选字段值显示/隐藏WooCommerce注册字段

原代码存在的问题 #

• 下拉框事件监听错误：使用keyup事件，下拉选择操作不会触发该事件，应改为change事件
• 条件判断逻辑错误：$(this).val().length == 'subscriber'是将值的长度与字符串做比较，完全不符合需求，应直接对比下拉框的选中值
• 隐藏逻辑不符合需求：原代码else分支仅隐藏billing_product，但实际需求是选择Agent（subscriber角色）时隐藏两个自定义字段，选择Client（customer角色）时显示
• 未处理页面初始加载状态：如果刷新页面后有默认选中的角色，不会自动触发对应字段的显示/隐藏

修正后的完整代码 #

// 添加需要根据角色隐藏的自定义字段
add_action('woocommerce_register_form_start', 'text_domain_woo_reg_form_fields');
function text_domain_woo_reg_form_fields() {
    ?>
    <p class="form-row form-row-first company-field">
        <label for="billing_company"><?php _e('公司名称', 'text_domain'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_company" id="billing_company" value="<?php if (!empty($_POST['billing_company'])) esc_attr_e($_POST['billing_company']); ?>" />
    </p>
    <p class="form-row form-row-last product-field">
        <label for="billing_product"><?php _e('公司产品', 'text_domain'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_product" id="billing_product" value="<?php if (!empty($_POST['billing_product'])) esc_attr_e($_POST['billing_product']); ?>" />
    </p>
    <div class="clear"></div>
    <?php
}

// 添加角色选择字段
add_action( 'woocommerce_register_form', 'wc_extra_registation_fields' );
function wc_extra_registation_fields() {
    ?>
        <p class="form-row form-row-first">
            <label for="reg_role"><?php _e( '是否为代理？', 'woocommerce' ); ?></label>
            <select class="input-text" name="role" id="reg_role">
            <option <?php if ( empty( $_POST['role'] ) || ( ! empty( $_POST['role'] ) && $_POST['role'] == 'customer') ) esc_attr_e( 'selected' ); ?> value="customer">客户</option>
            <option <?php if ( ! empty( $_POST['role'] ) && $_POST['role'] == 'subscriber') esc_attr_e( 'selected' ); ?> value="subscriber">代理</option>
            </select>
        </p>
    <?php
}

// 实现字段显示/隐藏逻辑
add_action( 'woocommerce_register_form', 'hide_show_field', 9999 );
  
function hide_show_field() {
    // 获取当前选中的角色（如果有POST值则用POST，否则默认customer）
    $current_role = !empty($_POST['role']) ? $_POST['role'] : 'customer';
    
    wc_enqueue_js( "
        // 定义显示/隐藏字段的函数
        function toggleCustomFields(role) {
            if (role === 'subscriber') {
                // 选择代理时隐藏两个自定义字段（连同父元素p标签一起隐藏）
                $('.company-field').hide();
                $('.product-field').hide();
            } else {
                // 选择客户时显示字段
                $('.company-field').show();
                $('.product-field').show();
            }
        }

        // 页面加载时执行一次，处理初始状态
        toggleCustomFields('{$current_role}');

        // 监听下拉框的change事件
        $('#reg_role').on('change', function() {
            toggleCustomFields($(this).val());
        });
    " );
}

关键修改说明 #

1. 给自定义字段的父元素p标签添加了类名company-field和product-field，方便批量选择并隐藏整个字段（包括标签）
2. 优化角色选择字段的默认选中逻辑：当没有POST值时默认选中客户
3. 替换监听事件为change，适配下拉框的选择操作
4. 封装toggleCustomFields函数，统一处理显示/隐藏逻辑，代码更易维护
5. 增加页面初始加载时的字段状态处理，确保刷新页面后状态正确
6. 修正条件判断逻辑，直接对比下拉框的选中值

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