WooCommerce切换国家时AJAX更新结账运费的替代方案求助

我完全懂你的困扰——WooCommerce 3.x之后把全局的wc_checkout_params给移除了，旧代码直接依赖这个全局对象肯定会失效。别担心，咱们可以用WordPress官方推荐的脚本本地化功能来替代，同时调整AJAX请求逻辑，完美适配新版本的WooCommerce。

核心解决思路 #

1. 弃用全局对象，改用脚本本地化传参：WordPress的wp_localize_script()可以安全地把PHP端的参数传递到JS，这是官方认可的最佳实践，彻底摆脱对弃用全局变量的依赖。
2. 适配WooCommerce当前AJAX逻辑：更新订单摘要的AJAX动作woocommerce_update_order_review还在，但请求参数和响应处理需要调整，确保能正确解析返回的页面片段。
3. 优化事件监听与请求防抖：监听账单/配送地址的国家/州切换事件，加入防抖延迟避免频繁请求，提升用户体验和性能。

完整可运行代码 #

PHP部分（放到主题functions.php或自定义插件中） #

add_action('wp_enqueue_scripts', 'custom_checkout_enqueue_scripts');
function custom_checkout_enqueue_scripts() {
    // 仅在结账页加载脚本
    if (!is_checkout()) return;

    // 注册自定义脚本，依赖jQuery和WooCommerce结账核心脚本
    wp_register_script(
        'custom-checkout-shipping-updater',
        get_stylesheet_directory_uri() . '/js/custom-checkout-shipping.js',
        array('jquery', 'woocommerce-checkout'),
        '1.0',
        true
    );

    // 本地化脚本，传递必要参数
    wp_localize_script('custom-checkout-shipping-updater', 'custom_checkout_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'update_order_review_nonce' => wp_create_nonce('woocommerce-update-order-review'),
        'ajax_loader_url' => includes_url('images/spinner-2x.gif') // 用WordPress内置加载图标
    ));

    // 加载脚本
    wp_enqueue_script('custom-checkout-shipping-updater');
}

// WooCommerce已内置该AJAX动作的处理逻辑，无需额外编写
// add_action('wp_ajax_woocommerce_update_order_review', 'woocommerce_update_order_review');
// add_action('wp_ajax_nopriv_woocommerce_update_order_review', 'woocommerce_update_order_review');

JS部分（创建主题目录下js/custom-checkout-shipping.js文件） #

jQuery(document).ready(function($) {
    // 检查本地化参数是否存在，避免报错
    if (typeof custom_checkout_params === 'undefined') return;

    let updateTimer = null;
    let xhr = null;

    // 更新订单摘要（运费）的核心函数
    function updateShippingReview() {
        // 取消未完成的请求，避免重复请求
        if (xhr) xhr.abort();

        // 显示加载状态
        $('#order_review').block({
            message: null,
            overlayCSS: {
                background: '#fff url(' + custom_checkout_params.ajax_loader_url + ') no-repeat center',
                backgroundSize: '16px 16px',
                opacity: 0.6
            }
        });

        // 序列化整个结账表单，WooCommerce会自动提取所需字段计算运费
        const formData = $('form.checkout').serialize();

        // 发送AJAX请求
        xhr = $.ajax({
            type: 'POST',
            url: custom_checkout_params.ajax_url,
            data: {
                action: 'woocommerce_update_order_review',
                security: custom_checkout_params.update_order_review_nonce,
                post_data: formData
            },
            success: function(response) {
                // 遍历响应片段，更新对应DOM元素
                if (response.fragments) {
                    $.each(response.fragments, function(key, value) {
                        $(key).replaceWith(value);
                    });
                }

                // 触发WooCommerce全局更新事件，确保其他组件同步
                $('body').trigger('updated_checkout');
            },
            error: function(xhr, status, error) {
                console.error('更新运费失败:', error);
                $('#order_review').unblock();
            },
            complete: function() {
                xhr = null;
                $('#order_review').unblock();
            }
        });
    }

    // 监听国家切换事件（账单+配送地址）
    $('form.checkout').on('change', '#billing_country, #shipping_country', function() {
        // 300ms防抖，避免快速切换时频繁请求
        clearTimeout(updateTimer);
        updateTimer = setTimeout(updateShippingReview, 300);
    });

    // 可选：监听州/省切换事件（部分地区需要州信息计算运费）
    $('form.checkout').on('change', '#billing_state, #shipping_state', function() {
        clearTimeout(updateTimer);
        updateTimer = setTimeout(updateShippingReview, 300);
    });
});

关键调整说明 #

• 脚本本地化：用wp_localize_script()替代旧全局对象，参数传递更安全，符合WordPress开发规范。
• 请求参数简化：不再单独传递billing_state/billing_country，直接序列化整个结账表单，兼容WooCommerce动态字段逻辑。
• 响应处理优化：遍历响应中的fragments对象更新DOM，这是WooCommerce当前推荐的方式，确保订单摘要和支付方式同步更新。
• 防抖机制：加入300ms延迟执行，避免用户快速切换国家时发送过多AJAX请求，提升页面性能。

这样调整后，代码就能在WooCommerce 3.x及以上版本正常工作，切换国家时会自动AJAX更新运费和订单摘要啦。

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