基于 WooCommerce 结帐页面中的单选按钮隐藏送货方式

Question

我使用以下代码在结帐页面中放置了一个单选按钮。

add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
function custom_shipping_radio_button( $checkout ) {

    woocommerce_form_field( 'shipping_type', array(
        'type' => 'radio',
        'class' => array( 'form-row-wide' ),
        'label' => __('收件方式 *'),
        'options' => array(
            'shipping_1' => __('全家店到店'),
            'shipping_2' => __('指定地址'),
            'shipping_3' => __('自行取貨'),
        ),
    ), $checkout->get_value( 'shipping_type' ) );
}

我想隐藏基于送货方式的选项。例如，如果客户选择本地取货，选项 shipping_1 和 shipping_2 将消失。我搜索了一些资料并尝试制作如下代码。

add_action( 'woocommerce_after_checkout_form', 'hide_shipping_type' );
function hide_shipping_type( $available_gateways ) {
global $woocommerce;

    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping_no_ajax = $chosen_methods[0];
        if ( 0 === strpos( $chosen_shipping_no_ajax, 'local_pickup' ) ) {
            ?>
                <script type="text/javascript">
                    jQuery('#shipping_type_shipping_1,#shipping_type_shipping_2').fadeOut();
                </script>
            <?php
    }

    ?>
        <script type="text/javascript">
            jQuery('form.checkout').on('change','input[name^="shipping_method"]',function() {
                var val = jQuery( this ).val();
                    if (val.match("^local_pickup")) {
                        jQuery('#shipping_type_shipping_1,#shipping_type_shipping_2').fadeOut();
                    } else {
                    jQuery('#shipping_type_shipping_1,#shipping_type_shipping_2').fadeIn();
                    }
                });
        </script>
    <?php
}

我发现选项的标签无法隐藏。我认为问题可能是由 jQuery 脚本引起的。但是，我不能让它变得更好。

有人知道这个问题吗？

更新

关于在购物车页面中取消设置送货方式并根据送货类型单选按钮在结帐页面中隐藏送货方式，我有了一个新想法。结果，我尝试编写如下代码。这些代码可以工作，运输方式标签可以消失。但是，选择其中一种发货方式后，其他隐藏发货方式会淡入，请问有什么解决办法吗？

//Unset shipping method in cart page
add_filter( 'woocommerce_cart_ready_to_calc_shipping', 'disable_shipping_calc_on_cart', 99 );
function disable_shipping_calc_on_cart( $show_shipping ) {
    if( is_cart() ) {
        return false;
    }
    return $show_shipping;
}

//Hide shipping method in checkout page based on the selection of radio button.

add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
function custom_shipping_radio_button( $checkout ) {

    woocommerce_form_field( 'shipping_type', array(
        'type' => 'radio',
        'class' => array( 'form-row-wide' ),
        'label' => __('收件方式 *'),
        'options' => array(
            'shipping_1' => __('全家店到店'),
            'shipping_2' => __('指定地址'),
            'shipping_3' => __('自行取貨'),
        ),
    ), $checkout->get_value( 'shipping_type' ) );

  ?>
    <script type="text/javascript">
    jQuery(function($){
        $("input[name=shipping_type]").on("change",function(){
            if($("#shipping_type_shipping_1").is(":checked")) {
                $("#add_familimart,#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field,#shipping_method_0_flat_rate9,label[for='shipping_method_0_flat_rate9']").fadeIn();
            } else {
                $("#add_familimart,#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field,#shipping_method_0_flat_rate9,label[for='shipping_method_0_flat_rate9']").fadeOut();
            }
            if($("#shipping_type_shipping_2").is(":checked")) {
                $("#shipping_postcode_field,#shipping_address_1_field,#shipping_method_0_flat_rate10,#shipping_method_0_flat_rate11,#shipping_method_0_flat_rate12,label[for='shipping_method_0_flat_rate12'],label[for='shipping_method_0_flat_rate11'],label[for='shipping_method_0_flat_rate10']").fadeIn();
            } else {
                $("#shipping_postcode_field,#shipping_address_1_field,#shipping_method_0_flat_rate10,#shipping_method_0_flat_rate11,#shipping_method_0_flat_rate12,label[for='shipping_method_0_flat_rate12'],label[for='shipping_method_0_flat_rate11'],label[for='shipping_method_0_flat_rate10']").fadeOut();
            }
          if($("#shipping_type_shipping_3").is(":checked")) { $("#shipping_address_2_field,#shipping_method_0_local_pickup8,label[for='shipping_method_0_local_pickup8']").fadeIn();
            } else {
                $("#shipping_address_2_field,#shipping_method_0_local_pickup8,label[for='shipping_method_0_local_pickup8']").fadeOut();
            }
        });
    });
</script>
    <?php
}

Answer 1

您可以将所有代码合并到第一个函数中，它也能正常工作。现在你应该需要在开始时添加 jQuery ready() 功能。

在您的案例中使用 label[for="shipping_type_shipping_1"] 和 label[for="shipping_type_shipping_2"]…

使用 "for" 属性定位 <label> 标签非常简单和容易

我已经在一个独特的钩子函数中重新访问并压缩了您的代码：

add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_buttons', 10, 1 );
function custom_shipping_radio_buttons( $checkout ) {

    woocommerce_form_field( 'shipping_type', array(
        'type' => 'radio',
        'class' => array( 'form-row-wide' ),
        'label' => __('收件方式 *'),
        'options' => array(
            'shipping_1' => __('全家店到店'),
            'shipping_2' => __('指定地址'),
            'shipping_3' => __('自行取貨'),
        ),
    ), $checkout->get_value( 'shipping_type' ) );

    $chosen_shipping_methods = WC()->session->get( 'chosen_shipping_methods' )[0];
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var a = 'shipping_type_shipping_',
                b = 'label[for="'+a+'1"],label[for="'+a+'2"],#'+a+'1,#'+a+'2';
            <?php if ( 0 === strpos( $chosen_shipping_methods, 'local_pickup' ) ): ?>
            $(b).fadeOut(); // Once DOM is loaded
            <?php endif; ?>
            // On live "change event
            $('form.checkout').on('change','input[name^="shipping_method"]',function() {
                var c = $(this).val();
                if ( c.match('^local_pickup') )
                    $(b).fadeOut();
                else
                    $(b).fadeIn();
            });
        });
    </script>
    <?php
}

代码进入活动子主题（或活动主题）的 function.php 文件。

已测试并有效。 它显示/隐藏 2 个单选按钮及其标签，具体取决于 "local_pickup" 是否是所选的运输方式...

更新（与您的评论相关）

也许你应该尝试这样的事情：

add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_buttons', 10, 1 );
function custom_shipping_radio_buttons( $checkout ) {

    woocommerce_form_field( 'shipping_type', array(
        'type' => 'radio',
        'class' => array( 'form-row-wide' ),
        'label' => __('收件方式 *'),
        'options' => array(
            'shipping_1' => __('全家店到店'),
            'shipping_2' => __('指定地址'),
            'shipping_3' => __('自行取貨'),
        ),
    ), $checkout->get_value( 'shipping_type' ) );

    // HERE below define your shipping "flat rates" method IDs in the array
    $other_method_ids = array( 'flat_rate:09', 'flat_rate:10', 'flat_rate:11', 'flat_rate:12' );
    $local_pickup = 'local_pickup';

    // Get the chosen shipping method
    $chosen_shipping = WC()->session->get( 'chosen_shipping_methods' )[0];

    // Get the chosen shipping method ID
    $chosen_shipping_expl = explode( ':', $chosen_shipping );
    $chosen_method_id = $chosen_shipping_expl[0];
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var a = 'shipping_type_shipping_',
                b = 'label[for="'+a+'1"],label[for="'+a+'2"],#'+a+'1,#'+a+'2',
                c = <?php echo  json_encode( $other_method_ids ); ?>; // array of shipping methods ids

            // Once DOM is loaded
            <?php if ( $chosen_method_id === $local_pickup || in_array( $chosen_shipping, $other_method_ids) ): ?>
            $(b).fadeOut();
            <?php endif; ?>

            // On live "change event
            $('form.checkout').on('change','input[name^="shipping_method"]',function() {
                var d = $(this).val();
                console.log(e);
                if ( e.match('^local_pickup') || $.inArray(d, c) !== -1 )
                    $(b).fadeOut();
                else
                    $(b).fadeIn();
            });
        });
    </script>
    <?php
}

已测试并有效。

Answer 2

我试着用你的代码添加其他选项的代码。但是，它不能很好地工作。

$chosen_shipping_methods_2 = WC()->session->get( 'chosen_shipping_methods' )[0];
    ?>
        <script type="text/javascript">
        jQuery(document).ready(function($) {
            var d = 'shipping_type_shipping_',
                e ='label[for="'+d+'2"],label[for="'+d+'3"],#'+d+'2,#'+d+'3';
            <?php if ( 0 === strpos( $chosen_shipping_methods_2, 'flat_rate:9' ) ): ?>
                $(e).fadeOut(); // Once DOM is loaded
            <?php endif; ?>
        // On live "change event
            $('form.checkout').on('change','input[name^="shipping_method"]',function() {
                var f = $(this).val();
                if ( f.match('^flat_rate:9') )
                    $(e).fadeOut();
                else
                    $(e).fadeIn();
            });
        });
    </script>
    <?php

    $chosen_shipping_methods_3 = WC()->session->get( 'chosen_shipping_methods' )[0];
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var g = 'shipping_type_shipping_',
                h = 'label[for="'+g+'1"],label[for="'+g+'3"],#'+g+'1,#'+g+'3';
            <?php if ( 0 === strpos( $chosen_shipping_methods_3, 'flat_rate:10', 'flat_rate:11', 'flat_rate:12' ) ): ?>
            $(h).fadeOut(); // Once DOM is loaded
            <?php endif; ?>
        // On live "change event
            $('form.checkout').on('change','input[name^="shipping_method"]',function() {
                var i = $(this).val();
                if ( i.match('^flat_rate:10', '^flat_rate:11', '^flat_rate:12') )
                    $(h).fadeOut();
                else
                    $(h).fadeIn();
            });
        });
    </script>
    <?php

基于 WooCommerce 结帐页面中的单选按钮隐藏送货方式

Hide shipping method based on the radio button in WooCommerce checkout page

php

jquery

woocommerce

checkout

shipping