监听updated_checkout事件判断配送方式可用性 无可用配送时触发弹窗方案

以下代码适配WooCommerce默认结账页结构，可直接放到主题自定义JS文件或者结账页自定义脚本块中使用：

// 监听WooCommerce checkout更新事件
jQuery(document).on('updated_checkout', function() {
    // 判断是否存在可用配送方式
    // 无可用配送方式时，shipping_method单选按钮数量为0
    const hasShippingMethod = jQuery('input[name="shipping_method"]').length > 0;

    if (!hasShippingMethod) {
        // 这里替换为你自己的弹窗逻辑即可
        alert('当前地址无可用配送方式，请检查收货地址是否正确或联系客服咨询');
        // 可选：加标记避免重复弹窗
        // if (!window.shippingAlertShowed) {
        //     alert('xxx');
        //     window.shippingAlertShowed = true;
        // }
    } else {
        // 有可用配送方式时重置弹窗标记
        // window.shippingAlertShowed = false;
    }
});

注意事项 #

• 如果你使用的主题自定义了结账页的DOM结构，需要自行调整选择器匹配你站点的配送选项容器，也可以通过判断.woocommerce-shipping-methods下是否包含无配送方式的提示类名来做判断
• 上述代码中默认使用浏览器自带的alert做演示，你可以替换为站点自带的自定义弹窗组件实现更好的展示效果
• 如果需要避免同一状态下多次触发弹窗，可以放开代码中注释的状态标记逻辑即可

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