在 WooCommerce 中隐藏特定运输方式的结帐运输字段部分

Posted

技术标签:

【中文标题】在 WooCommerce 中隐藏特定运输方式的结帐运输字段部分【英文标题】:Hide checkout shipping fields section for specific shipping method in WooCommerce 【发布时间】:2020-10-03 10:50:10 【问题描述】:

有人问了我已经回答的以下问题。然后他删了。因此,我将问题和我的答案发布回来,因为这可能对社区有用:

在 WooCommerce 中,我试图在不重新加载结帐页面的情况下动态更新复选框表单。 我有 2 种运输方式:“交付”和“收集”。我试图只禁用送货地址部分(使用“如果选择的方法是收集”复选框选项,则运送到另一个地址)和所有送货字段。

首先我尝试了这个:

add_action( 'woocommerce_after_shipping_rate', 'carrier_custom_fields', 30, 2 );
function carrier_custom_fields( $method, $index ) 
    if( ! is_checkout()) return; // Only on checkout page

    $customer_carrier_method = 'local_pickup:1';


    if( $method->id != $customer_carrier_method ) return; // Only display for "local_pickup"

    $chosen_method_id = WC()->session->chosen_shipping_methods[ $index ];

    // echo $chosen_method_id;

    // If the chosen shipping method is 'legacy_local_pickup' we display
    if($chosen_method_id == $customer_carrier_method ):

        add_filter( 'woocommerce_cart_needs_shipping_address', '__return_false');

    else :
        add_filter( 'woocommerce_cart_needs_shipping_address', '__return_true');


    endif;


然后我尝试了这个:

add_action( 'woocommerce_shipping_method_chosen', 'check_if_local_pickup', 10, 1 );
function check_if_local_pickup( $chosen_method ) 
    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping = $chosen_methods[0]; 
    if ($chosen_shipping == 'local_pickup:1')  
        add_filter( 'woocommerce_ship_to_different_address_checked', '__return_false' );
        add_filter( 'woocommerce_cart_needs_shipping_address', '__return_false');
        return true;
    
    else
    
        add_filter( 'woocommerce_cart_needs_shipping_address', '__return_true');
        return true;

    
 

它们都不起作用。

如何在 WooCommerce 中隐藏特定选择的运输方式的结帐运输字段部分?

【问题讨论】:

【参考方案1】:

php 不是这种方式,因为这是“客户端”(不是“服务器端”)上的事件,因此它需要使用 jQuery。因此,要隐藏特定运输方式的运输字段部分,您将使用以下内容:

// Auto Show hide checkout shipping fields section based on chosen shipping methods
add_action( 'wp_footer', 'custom_checkout_field_script' );
function custom_checkout_field_script() 
    // Only on checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):

    // HERE below define your local pickup shipping method
    $local_pickup = 'local_pickup:1';

    // Jquery code start
    ?>
    <script>
        jQuery(function($)
            var a = 'checked',      
                b = 'input#ship-to-different-address-checkbox', 
                c = 'input[name^="shipping_method"]',   
                d = '<?php echo $local_pickup; ?>',     
                e = c + ':' + a
                f = 'div.woocommerce-shipping-fields,' + b;

            // 1. On load: when the chosen shipping method is our defined shipping method
            if( $(e).val() === d ) 
                // Hide shipping fields section
                $(f).hide(); 
            

            // 2. On shipping method "change" (Live event)
            $( 'form.checkout' ).on( 'change', c, function() 
                // When the chosen shipping method is our defined shipping method
                if( $(e).val() === d ) 
                    // if the checkbox is checked, uncheck it first
                    if ( $(b).prop(a) ) 
                        $(b).click();
                    

                    // Hide shipping fields section
                    $(f).hide();
                 else if ( $(e).val() !== d ) 
                    // show closed shipping fields section with (unchecked checkbox)
                    $(f).show();                    
                
            );
        );
    </script>
    <?php
    endif;

代码在您的活动子主题(或活动主题)的functions.php 文件中。经过测试并且可以工作。

相关:How to make ship to different address checked when using Free Shipping and Flat Rate?

【讨论】:

它很棒而且非常有用。但是有一些问题我无法解决。该解决方案在桌面上就像一个魅力,但在移动设备上不起作用。我的意思是,当我在移动设备上选择本地取货时,结帐字段没有任何变化。这是一种奇怪的行为,因为 jquery 在移动设备上运行良好。我以为它与一台设备有关,但我检查了三台。 @VictorSokoliuk 抱歉,但它在移动 Google chrome(和 Safari)上完美运行:我刚刚在 android 手机和 ios(Mac 平板电脑)上测试了最后一个 WooCommerce 版本。 嗨 Loic,我可能需要你的帮助来解决我最新的 WooCommerce 问题。也许你已经这样做了并且有一个想法? @LoicTheAztec 如果有多种交付方式,我该如何更改代码?例如,local_pickup:1local_pickup:2local_pickup:3

以上是关于在 WooCommerce 中隐藏特定运输方式的结帐运输字段部分的主要内容,如果未能解决你的问题,请参考以下文章

在 WooCommerce 中隐藏运输和付款方式

根据 WooCommerce 结帐字段值显示/隐藏运输方式

根据 WooCommerce 结帐字段值显示/隐藏运输方式

在 Woocommerce 中选择的运输方式更改时显示或隐藏 html 元素

在 Woocommerce 中发送特定运输方式的订单保留电子邮件

根据 Woocommerce 3 中的运输方式显示或隐藏结帐字段