WooCommerce结账页自定义字段sf_region无法按配送方式隐藏的问题

自定义WooCommerce结账页面时，通过代码创建了名为sf_region的选择字段，希望在选择指定自提配送方式（local_pickup:6、local_pickup:7）时隐藏该字段，但现有实现代码未生效。

原创建字段代码 #

add_action( 'woocommerce_after_checkout_billing_form', 'ecommercehints_checkout_select_field' );

function ecommercehints_checkout_select_field($checkout) {
    echo '<h3 style=" font-family: var(--theme-font-family); font-style: var(--theme-font-style, inherit);">' . esc_html__( 'New field' ) . '</h3>';
    
    woocommerce_form_field(
        'sf_region',
        array(
            'type'        => 'select',
            'required'    => true, // Shows an asterisk if true (*)
            'label'       => 'sf',
            'options'     => array(
                ''      => 'choose...',
                'aaa'   => 'aaa',
                'bbb'   => 'bbb',
                'ccc'   => 'ccc',
                'ddd'   => 'ddd'
            )
        ),
        $checkout->get_value( 'sf_region' )
    );
}

原隐藏逻辑代码 #

// Hide Local Pickup shipping method
add_filter( 'woocommerce_checkout_fields', 'hide_local_pickup_method_sf' );
function hide_local_pickup_method_sf ( $fields_pickup ) {
    // change below for the method pickup
    $shipping_method_pickup1 ='local_pickup:6';
    $shipping_method_pickup2 ='local_pickup:7';
    // change below for the list of fields. Add (or delete) the field name you want (or don’t want) to use
    $hide_fields_pickup = array( 'sf_region');
 
    $chosen_methods_pickup = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping_pickup = $chosen_methods_pickup[0];
 
    foreach($hide_fields_pickup as $field_pickup ) {
        if ($chosen_shipping_pickup == $shipping_method_pickup1 || $chosen_shipping_pickup == $shipping_method_pickup2) {
            $fields_pickup['billing'][$field_pickup]['required'] = false;
            $fields_pickup['billing'][$field_pickup]['class'][] = 'hide_pickup';
        }
        $fields_pickup['billing'][$field_pickup]['class'][] = 'billing-dynamic_pickup';
    }
    return $fields_pickup;
}
// Local Pickup - hide fields
add_action( 'wp_head', 'local_pickup_fields_sf', 999 );
function local_pickup_fields_sf() {
    if (is_checkout()) :
    ?>
    <style>
        .hide_pickup {display: none!important;}
    </style>
    <script>
        jQuery( function( $ ) {
            if ( typeof woocommerce_params === 'undefined' ) {
                return false;
            }
            $(document).on( 'change', '#shipping_method input[type="radio"]', function() {
                // change local_pickup:4 accordingly
            $('.billing-dynamic_pickup').toggleClass('hide_pickup', this.value == 'local_pickup:6' || this.value == 'local_pickup:7');
            });
        });
    </script>
    <?php
    endif;
}

问题分析 #

1. 字段归属错误：通过woocommerce_after_checkout_billing_form钩子手动输出的字段，不属于WooCommerce默认的billing字段组，因此woocommerce_checkout_fields过滤器无法识别并修改该字段的属性（比如添加billing-dynamic_pickup类）。
2. JS无法定位字段：由于PHP代码无法给手动输出的字段添加目标类，JS中的.billing-dynamic_pickup选择器找不到对应元素，自然无法触发隐藏效果。

修正方案 #

直接针对手动输出的字段容器进行操作，在创建字段时添加自定义类，同时在PHP中处理初始加载时的隐藏状态，JS中监听配送方式变化并切换字段显示状态。

修正后的完整代码

// 创建自定义结账字段
add_action( 'woocommerce_after_checkout_billing_form', 'ecommercehints_checkout_select_field' );
function ecommercehints_checkout_select_field($checkout) {
    // 获取当前选中的配送方式
    $chosen_shipping = WC()->session->get('chosen_shipping_methods')[0] ?? '';
    $is_pickup = in_array($chosen_shipping, ['local_pickup:6', 'local_pickup:7']);
    
    // 字段容器的类：默认显示，选中自提时添加hide_pickup类
    $field_container_class = $is_pickup ? 'hide_pickup' : '';
    
    echo '<h3 style="font-family: var(--theme-font-family); font-style: var(--theme-font-style, inherit);">' . esc_html__( 'New field' ) . '</h3>';
    echo '<div class="sf-region-field-container ' . esc_attr($field_container_class) . '">';
    
    woocommerce_form_field(
        'sf_region',
        array(
            'type'        => 'select',
            'required'    => !$is_pickup, // 自提时取消必填
            'label'       => 'sf',
            'options'     => array(
                ''      => 'choose...',
                'aaa'   => 'aaa',
                'bbb'   => 'bbb',
                'ccc'   => 'ccc',
                'ddd'   => 'ddd'
            )
        ),
        $checkout->get_value( 'sf_region' )
    );
    
    echo '</div>';
}

// 添加样式和JS监听配送方式变化
add_action( 'wp_head', 'local_pickup_fields_sf', 999 );
function local_pickup_fields_sf() {
    if (!is_checkout()) return;
    ?>
    <style>
        .hide_pickup { display: none !important; }
    </style>
    <script>
        jQuery(function($) {
            if (typeof woocommerce_params === 'undefined') return;
            
            // 定义自提配送方式ID
            const pickupMethods = ['local_pickup:6', 'local_pickup:7'];
            const $fieldContainer = $('.sf-region-field-container');
            const $sfField = $('#sf_region');
            
            // 切换字段显示/隐藏的函数
            function toggleSfField(shippingMethod) {
                const isPickup = pickupMethods.includes(shippingMethod);
                $fieldContainer.toggleClass('hide_pickup', isPickup);
                // 切换必填属性
                $sfField.prop('required', !isPickup);
            }
            
            // 初始加载时检查配送方式
            const initialMethod = $('#shipping_method input[type="radio"]:checked').val();
            if (initialMethod) {
                toggleSfField(initialMethod);
            }
            
            // 监听配送方式变化
            $(document).on('change', '#shipping_method input[type="radio"]', function() {
                toggleSfField(this.value);
            });
        });
    </script>
    <?php
}

关键修改点 #

1. 给字段外层添加了自定义容器.sf-region-field-container，方便JS直接定位。
2. PHP中获取初始选中的配送方式，在渲染字段时直接决定是否隐藏、是否必填。
3. JS中封装了切换字段状态的函数，处理初始加载和配送方式变化两种场景，同时同步修改字段的必填属性。

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