WooCommerce结账页未选指定国家且含特定商品时禁用下单按钮实现问询

问题根因 #

WooCommerce结账页修改地址信息时会触发AJAX重载结账区域DOM，原有代码仅在页面初始化和国家下拉切换时执行校验，AJAX刷新后DOM更新，原有逻辑未重新运行，因此操作失效。

修正后完整代码 #

直接替换你现有的对应代码即可：

add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
function display_shipping_notice() {
    echo '<div class="shipping-notice woocommerce-error" role="alert" style="display:none">您的收货国家无法配送该商品，请从购物车中移除后再继续结算！</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
function show_shipping_notice_js(){
    ?>
    <script>
        jQuery(function($){
            // 可自行修改以下配置项
            var allowedCountry  = 'LV', // 支持配送的指定国家代码
                restrictedProductClass = 'id-27733', // 限制境外配送的商品对应的类名，对应下方商品ID加的类
                countryField = 'select#billing_country'; // 国家字段选择器
            
            function checkShippingRestriction(){
                var currentCountry = $(countryField).val();
                var hasRestrictedProduct = $('.shop_table tr').hasClass(restrictedProductClass);
                var $placeOrderBtn = $('#place_order');

                if( currentCountry !== allowedCountry && hasRestrictedProduct ){
                    $('.shipping-notice').show();                   
                    $placeOrderBtn.attr('disabled', true).css('opacity', '0.5').css('cursor', 'not-allowed');
                    // 若需要隐藏支付区域可保留下行代码
                    // $('.woocommerce-checkout-payment').hide();
                }
                else {
                    $('.shipping-notice').hide();
                    $placeOrderBtn.attr('disabled', false).css('opacity', '1').css('cursor', 'pointer');
                    // $('.woocommerce-checkout-payment').show();
                }
            }

            // 页面初始化时执行
            checkShippingRestriction();

            // 国家切换时执行
            $('form.checkout').on('change', countryField, function() {
                checkShippingRestriction();
            });

            // 结账AJAX刷新后执行，解决AJAX更新后逻辑失效问题
            $(document.body).on('updated_checkout', function(){
                checkShippingRestriction();
            });
        });
    </script>
    <?php
}

function cart_item_class( $class, $values, $values_key ) {
    if ( isset( $values['product_id'] ) ) {
        $class .= ' id-' . $values['product_id'];
    }
    return $class;
}
add_filter( 'woocommerce_cart_item_class', 'cart_item_class', 10, 3 );

配置说明 #

• 将allowedCountry参数的值修改为你允许配送的指定国家代码
• 将restrictedProductClass里的ID27733替换为你实际限制境外配送的商品ID，如果有多个限制商品，可调整判断逻辑为匹配多个类名即可

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