如何在WordPress/WooCommerce地址更新后执行jQuery代码？

需求背景 #

• 环境：WordPress + WooCommerce + WooReer（按距离计算配送费插件）
• 目标：
  • 地址过远时，隐藏配送选项并显示「地址过远，无法配送」提示
  • 订单总额低于30美元时，仅提供自提服务，隐藏配送地址输入入口
• 当前问题：原有代码仅在页面刷新时生效，商品数量调整、配送地址更新时无法自动触发逻辑

原有代码（仅页面刷新生效） #

jQuery(document).ready(function($) {
    
    var total = jQuery('.order-total').text().replace(',','').match(/(\d+)/g)[0];
    
    if(jQuery('#shipping_method_0_local_pickup20').prop('type') == 'hidden' && total >=30 ) {
        var newText = jQuery('.woocommerce-shipping-destination').parent().html().replace("Delivery address", "Enter delivery address");
        jQuery('.woocommerce-shipping-destination').parent().html(newText); 
    } else if(jQuery('#shipping_method_0_local_pickup20').prop('type') == 'hidden') {
        jQuery('.woocommerce-shipping-destination').hide();
        jQuery('.shipping-calculator-button').hide();
        jQuery('#shipping_method_0_local_pickup20').show();
        jQuery('#shipping_method_0_local_pickup20').prop('checked', true);
    } 
    else if(jQuery('#shipping_method_0_wcsdm16').parent().text().indexOf('999,999') != -1 ) {
        jQuery('#shipping_method_0_wcsdm16').hide();
        jQuery('#shipping_method_0_wcsdm16').parent().html('<b>地址过远，无法配送</b>') ;
    } else {
        // do nothing
    }
});

注：原代码存在语法错误（逻辑与使用&而非&&），已先修正该问题

优化后代码（支持动态触发） #

将逻辑封装为独立函数，并绑定WooCommerce的购物车/配送更新事件，确保数据变化时自动执行：

jQuery(document).ready(function($) {
    // 封装核心逻辑为函数
    function updateShippingOptions() {
        // 提取订单总额（处理千分位逗号）
        var totalText = $('.order-total .woocommerce-Price-amount').text().replace(/,/g, '');
        var total = parseFloat(totalText.match(/\d+\.?\d*/)[0]);

        // 自提选项DOM对象
        var localPickup = $('#shipping_method_0_local_pickup20');
        // 配送选项DOM对象
        var deliveryOption = $('#shipping_method_0_wcsdm16');

        // 逻辑1：订单总额低于30美元时，强制显示自提，隐藏配送入口
        if (localPickup.prop('type') === 'hidden') {
            if (total >= 30) {
                // 总额达标，显示配送地址输入提示
                var parentHtml = $('.woocommerce-shipping-destination').parent().html();
                $('.woocommerce-shipping-destination').parent().html(parentHtml.replace("Delivery address", "Enter delivery address"));
                $('.woocommerce-shipping-destination').show();
                $('.shipping-calculator-button').show();
            } else {
                // 总额不足，隐藏配送入口，强制选中自提
                $('.woocommerce-shipping-destination').hide();
                $('.shipping-calculator-button').hide();
                localPickup.show().prop('checked', true);
            }
        }

        // 逻辑2：地址过远时，替换高额配送费为提示文字
        if (deliveryOption.length > 0 && deliveryOption.parent().text().indexOf('999,999') !== -1) {
            deliveryOption.hide();
            deliveryOption.parent().html('<b>地址过远，无法配送</b>');
        }
    }

    // 页面加载时执行一次
    updateShippingOptions();

    // 绑定WooCommerce购物车更新事件（商品数量变化触发）
    $(document.body).on('updated_cart_totals', function() {
        updateShippingOptions();
    });

    // 绑定WooCommerce配送方式更新事件（地址修改、配送选项切换触发）
    $(document.body).on('updated_shipping_method', function() {
        updateShippingOptions();
    });
});

关键优化点 #

• 函数封装：将核心逻辑抽离为独立函数，便于重复调用
• 事件绑定：利用WooCommerce内置的updated_cart_totals和updated_shipping_method自定义事件，监听购物车数据变化
• 总额提取优化：直接定位金额元素（.woocommerce-Price-amount），避免匹配整个文本的误差
• DOM元素缓存：提前获取DOM对象，减少重复查询提升性能

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