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

我在结帐页面放了一个单选按钮,下面是代码 .

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脚本引起的 . 但是,我无法做到更好 .

有人对这个问题有所了解吗?


UPDATE

我根据运输类型单选按钮了解了在购物车页面中取消运输方法以及在结帐页面隐藏运送方式的新想法 . 结果,我试着编写如下代码 . 这些代码可以工作,运输方法的标签可以消失 . 但是,在选择其中一种运输方式后,其他隐藏运输方式将会淡入 . 是否有任何解决方案?

//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
}

回答(2)

2 years ago

您可以在第一个函数中合并所有代码,它也可以 . 现在您应该在开始时添加 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文件中 .

Tested and works. 它显示/隐藏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
}

经过测试和工作 .

2 years ago

我尝试使用您的代码添加其他选项的代码 . 但是,它不能很好地工作 .

$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