WooCommerce结账页切换配送方式时自定义字段函数不触发如何解决

问题根因 #

WooCommerce 结账页AJAX更新默认只会刷新系统预设的页面片段，你自定义输出的自提点选择区域不在更新列表中，因此切换配送方式后内容不会同步更新。

具体实现方案 #

1. 后端添加片段更新支持 #

在原有代码基础上新增片段过滤钩子，将自定义区域内容加入AJAX更新返回结果：

// 原有渲染字段的代码保留
add_filter( 'woocommerce_review_order_before_payment', 'localdealers_checkout_fields' );
function localdealers_checkout_fields() {
    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping = $chosen_methods[0];

    if ( 0 === strpos( $chosen_shipping, 'local_pickup:2' ) ) {
        
        echo '<div id="localdealers_checkout_field" class="row"><div class="col-12 col-lg-6 offset-lg-6">
        <h3>' . __('Local dealer', 'my_theme_slug') . 
        '<span>(extra paid)</span></h3>'
        ;

        // The selector
        woocommerce_form_field( 'local_dealers', array(
        'type'        => 'select',
        'required'    => true,
        'class'       => array('my-field-class form-row-wide'),
        'label'       => __('Chose location', 'my_theme_slug'),
        'options'     => array(
            '' => __('Location address', 'my_theme_slug'),
            'option1' => 'Address 1',
            'option2' => 'Address 2'
        )
        ), WC()->checkout->get_value( 'local_dealers' ));
        echo '</div></div>';
    }
}

// 新增：将自定义区域加入结账AJAX更新片段
add_filter( 'woocommerce_update_order_review_fragments', 'add_local_dealers_fragment' );
function add_local_dealers_fragment( $fragments ) {
    ob_start();
    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping = $chosen_methods[0];
    if ( 0 === strpos( $chosen_shipping, 'local_pickup:2' ) ) {
        ?>
        <div id="localdealers_checkout_field" class="row"><div class="col-12 col-lg-6 offset-lg-6">
            <h3><?php _e('Local dealer', 'my_theme_slug'); ?><span>(extra paid)</span></h3>
            <?php
            woocommerce_form_field( 'local_dealers', array(
                'type'        => 'select',
                'required'    => true,
                'class'       => array('my-field-class form-row-wide'),
                'label'       => __('Chose location', 'my_theme_slug'),
                'options'     => array(
                    '' => __('Location address', 'my_theme_slug'),
                    'option1' => 'Address 1',
                    'option2' => 'Address 2'
                )
            ), WC()->checkout->get_value( 'local_dealers' ));
            ?>
        </div></div>
        <?php
    } else {
        // 非自提配送方式时返回空节点覆盖原有内容
        echo '<div id="localdealers_checkout_field"></div>';
    }
    $fragments['#localdealers_checkout_field'] = ob_get_clean();
    return $fragments;
}

2. 前端添加配送方式切换监听 #

在主题的自定义JS文件或结账页嵌入如下JS代码，确保切换配送方式时触发AJAX更新：

jQuery(document).ready(function($) {
    // 监听配送方式选择变化
    $(document).on('change', 'input[name="shipping_method[0]"]', function() {
        $('body').trigger('update_checkout');
    });

    // 修复隐藏字段的必填校验问题
    $(document).on('updated_checkout', function() {
        var $dealerField = $('#local_dealers');
        if ($dealerField.length) {
            $dealerField.attr('required', true);
        } else {
            $dealerField.removeAttr('required');
        }
    });
});

3. 额外安全校验（可选） #

可添加后端提交校验逻辑，当用户选择自提配送方式时，强制校验自提点字段已填写，避免前端校验被绕过的风险。

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