WooCommerce选择多个本地自提配送方式时隐藏结账字段的适配问题

本次修改核心逻辑是将原有的单个配送ID匹配改为数组范围匹配，无需改动原有字段隐藏逻辑，仅需调整变量定义和判断规则即可适配多个本地自提配送方式：

核心修改点 #

• PHP端将原单个本地自提ID字符串改为存储多ID的数组，输出到前端时转为JS可直接使用的数组格式
• JS端将所有单值相等判断改为数组包含判断，匹配所有定义的自提ID

修改后完整代码 #

// Conditional Show hide checkout fields based on chosen shipping methods
add_action( 'wp_footer', 'custom_checkout_field_script' );
function custom_checkout_field_script() {

    // 此处定义所有需要适配的本地自提配送方式ID
    $local_pickup = ['local_pickup:3', 'local_pickup:6', 'local_pickup:9'];
    $pickpoint = 'wc_custom_shipping_pickpoint';

    $required_text = esc_attr__( 'required', 'woocommerce' );
    $required_html = '<abbr class="required" title="' . $required_text . '">*</abbr>';
    ?>
    <script>
        jQuery(function($){
            var ism = 'input[name^="shipping_method"]',         ismc = ism+":checked",
                csa = 'input#ship-to-different-address-checkbox',
                rq = '-required',       vr = 'validate'+rq,     w = 'woocommerce',      wv = w+'-validated',
                iv = '-invalid',        fi = '-field',          wir = w+iv+' '+w+iv+rq+fi,
                b = '#billing_',        s = '#shipping_',       f = '_field',
                a1 = 'country',     a2 = 'address_1',   a3 = 'address_2',   a4 = 'postcode',    a5 = 'state',   a6 = 'city',
                b1 = b+a1+f,        b2 = b+a2+f,        b3 = b+a3+f,        b4 = b+a4+f,        b5 = b+a5+f,    b6 = b+a6+f,
                s1 = s+a1+f,        s2 = s+a2+f,        s3 = s+a3+f,        s4 = s+a4+f,        s5 = s+a5+f,    s6 = s+a6+f,
                pickPoint = '<?php echo $pickpoint; ?>',        localPickup = <?php echo json_encode($local_pickup); ?>;

            // Utility function to shows or hide checkout fields
            function showHide( action='show', selector='' ){
                if( action == 'show' )
                    $(selector).show(function(){
                        $(this).addClass(vr);
                        $(this).removeClass(wv);
                        $(this).removeClass(wir);
                        if( $(selector+' > label > abbr').html() == undefined )
                            $(selector+' label').append('<?php echo $required_html; ?>');
                    });
                else
                    $(selector).hide(function(){
                        $(this).removeClass(vr);
                        $(this).removeClass(wv);
                        $(this).removeClass(wir);
                        if( $(selector+' > label > abbr').html() != undefined )
                            $(selector+' label > .required').remove();
                    });
            }

            // Initializing at start after checkout init (Based on the chosen shipping method)
            setTimeout(function(){
                if( $(ismc).val() == pickPoint ) // Chosen "Pick point" (Hiding "Delivery")
                {
                    showHide('hide',b1 ); // Country
                    showHide('hide',b2 ); // Address 1
                    showHide('hide',b3 ); // Address 2
                    showHide('hide',b4 ); // Postcode
                    showHide('hide',b5 ); // State
                    showHide('hide',b6 ); // City
                }
                else if( localPickup.includes($(ismc).val()) ) // 匹配任意一个本地自提配送方式
                {
                    showHide('hide',b1);
                    showHide('hide',b2);
                    showHide('hide',b3);
                    showHide('hide',b4);
                    showHide('hide',b5);
                    showHide('hide',b6);
                }
                else
                {
                    showHide('hide',b1);
                    showHide('show',b2);
                    showHide('show',b3);
                    showHide('show',b4);
                    showHide('show',b5);
                    showHide('show',b6);
                }
            }, 100);

            // When shipping method is changed (Live event)
            $( 'form.checkout' ).on( 'change', ism, function() {
                if( $(ismc).val() == pickPoint )
                {
                    showHide('hide',b1);
                    showHide('hide',b2);
                    showHide('hide',b3);
                    showHide('hide',b4);
                    showHide('hide',b5);
                    showHide('hide',b6);

                    if( $(csa).prop('checked') ) {
                        showHide('hide',s1);
                        showHide('hide',s2);
                        showHide('hide',s3);
                        showHide('hide',s4);
                        showHide('hide',s5);
                        showHide('hide',s6);
                    }
                }
                else if( localPickup.includes($(ismc).val()) ) // 匹配任意一个本地自提配送方式
                {
                    showHide('hide',b1);
                    showHide('hide',b2);
                    showHide('hide',b3);
                    showHide('hide',b4);
                    showHide('hide',b5);
                    showHide('hide',b6);

                    if( $(csa).prop('checked') ) {
                        showHide('hide',s1);
                        showHide('hide',s2);
                        showHide('hide',s3);
                        showHide('hide',s4);
                        showHide('hide',s5);
                        showHide('hide',s6);
                    }
                }
                else
                {
                    showHide('hide',b1);
                    showHide('show',b2);
                    showHide('show',b3);
                    showHide('show',b4);
                    showHide('show',b5);
                    showHide('show',b6);

                    if( $(csa).prop('checked') ) {
                        showHide('hide',s1);
                        showHide('show',s2);
                        showHide('show',s3);
                        showHide('show',s4);
                        showHide('show',s5);
                        showHide('hide',s6);
                    }
                }
            });

            // When "shipping to different address" is changed (Live event)
            $(csa).click( function() {
                if( $(ismc).val() == pickPoint && $(this).prop('checked') )
                {
                    showHide('hide',b1);
                    showHide('hide',b2);
                    showHide('hide',b3);
                    showHide('hide',b4);
                    showHide('hide',b4);
                    showHide('hide',b6);

                    showHide('hide',s1);
                    showHide('hide',s2);
                    showHide('hide',s3);
                    showHide('hide',s4);
                    showHide('hide',s5);
                    showHide('hide',s6);
                }
                else if( localPickup.includes($(ismc).val()) && $(this).prop('checked') ) // 匹配任意一个本地自提配送方式
                {
                    showHide('hide',b1);
                    showHide('hide',b2);
                    showHide('hide',b3);
                    showHide('hide',b4);
                    showHide('hide',b4);
                    showHide('hide',b6);

                    showHide('hide',s1);
                    showHide('hide',s2);
                    showHide('hide',s3);
                    showHide('hide',s4);
                    showHide('hide',s5);
                    showHide('hide',s6);
                }
                else
                {
                    showHide('hide',b1);
                    showHide('show',b2);
                    showHide('show',b3);
                    showHide('show',b4);
                    showHide('show',b4);
                    showHide('show',b6);

                    showHide('hide',s1);
                    showHide('show',s2);
                    showHide('show',s3);
                    showHide('show',s4);
                    showHide('show',s5);
                    showHide('show',s6);
                }
            });
        });
    </script>
    <?php
}

后续扩展说明 #

如果后续需要新增更多本地自提配送方式，直接往$local_pickup数组中追加对应ID即可，无需修改其他逻辑。

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