根据 Woocommerce 3 中的运输方式显示或隐藏结帐字段 [英] Show or hide checkout fields based on shipping method in Woocommerce 3

查看:38
本文介绍了根据 Woocommerce 3 中的运输方式显示或隐藏结帐字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试根据送货方式隐藏结帐字段.

I'm trying to hide checkout fields based on shipping method.

function premove_billing_checkout_fields($fields) {
    global $woocommerce;
    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping = $chosen_methods[0];

    if( $chosen_shipping === 'local_pickup:20' ) {
       unset($fields['billing']['billing_postcode']);
       unset($fields['billing']['billing_state']);
       unset($fields['billing']['billing_country']);
    }

    if( $chosen_shipping === 'wc_custom_shipping_pickpoint' ) {
       unset($fields['billing']['billing_postcode']);
       unset($fields['billing']['billing_address_1']);
       unset($fields['billing']['billing_state']);
    }
    return $fields;
}
add_filter('woocommerce_checkout_fields', 
'premove_billing_checkout_fields', 990 );

此代码有效,但要隐藏字段,我需要刷新页面.如何使用 Ajax 隐藏字段?

This code is working, but to hide the fields I need to refresh the page. How can I hide the fields using Ajax?

推荐答案

更新 4 (2018 年 6 月制作)
- 专门为 Woocommerce 3.4.x 添加了初始化延迟.
- 解决了启用送货地址复选框时的错误.
- 增强了更轻量和更有效的 jQuery 代码.
- 添加条件字段验证

Update 4 (made on June 2018)
- Added a delay on initialization specifically for Woocommerce 3.4.x.
- Solved a bug when shipping address checkbox is enabled.
- Enhanced lighter and more effective jQuery code.
- Added conditional fields validation

您不需要任何 Ajax 来实现这一点.第一个函数将使所有必要的结帐字段都不是必需的",因为这是有条件地显示/隐藏结帐字段所必需的.第二个函数(主要是 jQuery)将根据选择的运输方式显示/隐藏您想要的字段.

You don't need any Ajax to achieve this. The first function will make all necessary checkout fields not "required", as this is necessary to be able to conditionally show / hide checkout fields. The second function (mostly jQuery), will show / hide your desired fields depending on the chosen shipping method.

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

    // HERE your shipping methods rate IDs
    $local_pickup = 'local_pickup:20';
    $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',
                b1 = b+a1+f,        b2 = b+a2+f,        b3 = b+a3+f,        b4 = b+a4+f,        b5 = b+a5+f,
                s1 = s+a1+f,        s2 = s+a2+f,        s3 = s+a3+f,        s4 = s+a4+f,        s5 = s+a5+f,
                pickPoint = '<?php echo $pickpoint; ?>',        localPickup = '<?php echo $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('show',b1 ); // Country
                    showHide('hide',b2 ); // Address 1
                    showHide('hide',b3 ); // Address 2
                    showHide('hide',b4 ); // Postcode
                    showHide('hide',b5 ); // State
                }
                else if( $(ismc).val() == localPickup ) // Choosen "Local pickup" (Hidding "Take away")
                {
                    showHide('hide',b1);
                    showHide('show',b2);
                    showHide('show',b3);
                    showHide('hide',b4);
                    showHide('hide',b5);
                }
                else
                {
                    showHide('show',b1);
                    showHide('show',b2);
                    showHide('show',b3);
                    showHide('show',b4);
                    showHide('show',b5);
                }
            }, 100);

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

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

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

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

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

                    showHide('show',s1);
                    showHide('hide',s2);
                    showHide('hide',s3);
                    showHide('hide',s4);
                    showHide('hide',s5);
                }
                else if( $(ismc).val() == localPickup && $(this).prop('checked') )
                {
                    showHide('hide',b1);
                    showHide('show',b2);
                    showHide('show',b3);
                    showHide('hide',b4);
                    showHide('hide',b4);

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

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

// Checkout conditional fields validation
add_action('woocommerce_checkout_process', 'wps_select_checkout_field_process');
function wps_select_checkout_field_process() {
    // HERE your shipping methods rate IDs
    $local_pickup = 'local_pickup:20';
    $pickpoint    = 'wc_custom_shipping_pickpoint';


    $chosen_shipping_method = WC()->session->get( 'chosen_shipping_methods' )[0];
    $billing                = '<strong> ' . __('Billing', 'woocommerce') . ' ';
    $shipping               = '<strong> ' . __('Shipping', 'woocommerce') . ' ';
    $country                = __('country.', 'woocommerce');
    $address1               = __('address.', 'woocommerce');
    $postcode               = __('postcode.', 'woocommerce');
    $state                  = __('state.', 'woocommerce');
    $end_text               = '</strong> '. __('is a required field.', 'woocommerce');

    if( $chosen_shipping_method == $local_pickup ) {
        if( empty($_POST['billing_address_1']) )
            wc_add_notice( $billing . $address1 . $end_text, 'error' );

        if( $_POST['ship_to_different_address'] ){
            if( empty($_POST['shipping_address_1']) )
                wc_add_notice( $shipping . $address1 . $end_text, 'error' );
        }
    }
    elseif( $chosen_shipping_method == $pickpoint ) {
        if( empty($_POST['billing_country']) )
            wc_add_notice( $billing . $country . $end_text, 'error' );

        if( $_POST['ship_to_different_address'] ){
            if( empty($_POST['shipping_country']) )
                wc_add_notice( $shipping . $country . $end_text, 'error' );
        }
    }
    else {
        if( empty($_POST['billing_country']) )
            wc_add_notice( $billing . $country . $end_text, 'error' );

        if( empty($_POST['billing_address_1']) )
            wc_add_notice( $billing . $address1 . $end_text, 'error' );

        if( empty($_POST['billing_postcode']) )
            wc_add_notice( $billing . $postcode . $end_text, 'error' );

        if( empty($_POST['billing_state']) )
            wc_add_notice( $billing . $state . $end_text, 'error' );

        if( $_POST['ship_to_different_address'] ){
            if( empty($_POST['shipping_country']) )
                wc_add_notice( $shipping . $country . $end_text, 'error' );

            if( empty($_POST['shipping_address_1']) )
                wc_add_notice( $shipping . $address1 . $end_text, 'error' );

            if( empty($_POST['shipping_postcode']) )
                wc_add_notice( $shipping . $postcode . $end_text, 'error' );

            if( empty($_POST['shipping_state']) )
                wc_add_notice( $shipping . $state . $end_text, 'error' );
        }
    }
}

代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.

这已经过测试并且适用于 WooCommerce 3+

This is tested and works on WooCommerce 3+

这篇关于根据 Woocommerce 3 中的运输方式显示或隐藏结帐字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆