解决WooCommerce结账页切换配送国家时显示文本不更新问题

核心原因 #

woocommerce_before_checkout_form钩子仅在页面初始加载时执行一次，而WooCommerce修改地址时采用Ajax局部刷新结账区域，不会重新触发该钩子，导致内容无法实时更新。通过Ajax实现动态更新是可行方案，具体实现如下：

实现步骤 #

1. 修改PHP代码，添加容器与Ajax回调 #

替换原有代码，使用以下逻辑：

// 在结账表单前渲染消息容器（初始加载时显示内容）
add_action( 'woocommerce_before_checkout_form', 'render_shipping_country_message_container', 10 );
function render_shipping_country_message_container(){
    $shipping_country = WC()->session->get('customer')['shipping_country'] ?? '';
    $message = get_shipping_country_message($shipping_country);
    // 带ID的容器，方便JS定位更新
    echo '<div id="shipping-country-message">' . $message . '</div>';
}

// 复用的消息生成逻辑
function get_shipping_country_message($country_code){
    return $country_code == "SK" ? $country_code : "Other zone";
}

// 注册前台可访问的Ajax回调
add_action( 'wp_ajax_update_shipping_country_message', 'update_shipping_country_message_callback' );
add_action( 'wp_ajax_nopriv_update_shipping_country_message', 'update_shipping_country_message_callback' );

function update_shipping_country_message_callback(){
    // 确保WC会话初始化
    if( ! WC()->session ){
        WC()->session = new WC_Session_Handler();
        WC()->session->init();
    }
    $shipping_country = WC()->session->get('customer')['shipping_country'] ?? '';
    echo get_shipping_country_message($shipping_country);
    wp_die(); // 必须终止Ajax请求
}

2. 添加JavaScript监听地址变化并触发更新 #

先在主题functions.php中加载JS文件：

// 仅在结账页面加载自定义JS
add_action( 'wp_enqueue_scripts', 'enqueue_shipping_message_script' );
function enqueue_shipping_message_script(){
    if( is_checkout() && ! is_wc_endpoint_url() ){
        wp_enqueue_script(
            'shipping-country-message-script',
            get_stylesheet_directory_uri() . '/js/shipping-message.js', // 替换为你的JS文件路径
            array('jquery'),
            wp_get_theme()->get('Version'),
            true
        );
        // 传递Ajax地址到前端JS
        wp_localize_script( 'shipping-country-message-script', 'shipping_message_ajax', array(
            'ajax_url' => admin_url( 'admin-ajax.php' )
        ));
    }
}

然后在主题js/shipping-message.js文件中添加监听逻辑：

jQuery(document).ready(function($){
    // 监听WooCommerce地址更新完成事件
    $(document.body).on('updated_checkout', updateShippingCountryMessage);
    
    // 监听配送国家下拉框直接切换事件
    $('select#shipping_country').on('change', updateShippingCountryMessage);

    // Ajax更新消息的核心函数
    function updateShippingCountryMessage(){
        $.ajax({
            url: shipping_message_ajax.ajax_url,
            type: 'POST',
            data: { action: 'update_shipping_country_message' },
            success: function(response){
                $('#shipping-country-message').html(response);
            }
        });
    }
});

关键说明 #

• updated_checkout是WooCommerce内置的全局事件，覆盖所有地址修改场景（包括自动地址检测、配送区域切换等）
• 额外监听shipping_country下拉框变化，确保用户直接切换国家时即时更新
• 抽离消息生成逻辑为独立函数，便于后续修改维护

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