隐藏WooCommerce中特定帐单状态的一些结帐字段类型

时间:2020-05-06 18:03:05

标签: jquery wordpress woocommerce checkout hook-woocommerce

当用户选择特定的billing_address_1时,我试图在结帐时隐藏billing_state字段(在上面的代码中,状态必须为“ CA”),但是我的代码无法正常工作。另外,我想隐藏更多字段,例如billing_address_2,但是下面的代码仅包含1个字段。

有人可以帮我解决这个问题吗?提前非常感谢您!

// Conditional Show hide checkout fields based on chosen state
add_action( 'wp_footer', 'conditionally_hidding_billing_address_1' );
function conditionally_hidding_billing_address_1(){
    // Only on checkout page
    if( ! is_checkout() ) return;

    // HERE your state ID is "CA"
    $home_delivery = 'CA';
    ?>
    <script>
        jQuery(function($){
            // Choosen billing state selectors slug
            var billingState = 'input[name^="billing_state"]',
                billingStateChecked = billingState+':checked';

            // Function that shows or hide input select fields
            function showHide( actionToDo='show', selector='' ){
                if( actionToDo == 'show' )
                    $(selector).show( 200, function(){
                        $(this).addClass("validate-required");
                    });
                else
                    $(selector).hide( 200, function(){
                        $(this).removeClass("validate-required");
                    });
                $(selector).removeClass("woocommerce-validated");
                $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // Initialising: Hide if chosen billing_state is "CA"
            if( $(billingStateChecked).val() == '<?php echo $home_delivery; ?>' )
                showHide('hide','#billing_address_1' );

            // Live event (When billing state is changed)
            $( 'form.checkout' ).on( 'change', billingState, function() {
                if( $(billingStateChecked).val() == '<?php echo $home_delivery; ?>' )
                    showHide('hide','#billing_address_1');
                else
                    showHide('show','#billing_address_1');
            });
        });
    </script>
    <?php
}

1 个答案:

答案 0 :(得分:1)

add_action( 'wp_footer', 'conditionally_hidding_billing_address_1' );

function conditionally_hidding_billing_address_1() {
            // Only on checkout page
            if ( !is_checkout() )
                return;

            // HERE your state ID is "CA"
            $home_delivery = 'CA';
            ?>
        <script>
            jQuery(function($){
                // Choosen billing state selectors slug
                //var billingState = '#billing_state',

                // Function that shows or hide input select fields
                var billingState = $('#billing_state').val();

                // Initialising: Hide if chosen billing_state is "CA"
                if( billingState == '<?php echo $home_delivery; ?>' )
                    showHide('hide','#billing_address_1' );

                // Live event (When billing state is changed)
            $( '#billing_state' ).on( 'change', function() {

                if( $('#billing_state').val() == '<?php echo $home_delivery; ?>' ){
                    showHide('hide','#billing_address_1');
                    showHide('hide','#billing_address_2');
                    $('label[for="billing_address_1"]').hide();
                }
                else{
                    showHide('show','#billing_address_1');
                    showHide('show','#billing_address_2');
                    $('label[for="billing_address_1"]').show();
                }
            });

                        function showHide( actionToDo='show', selector='' ){

                    if( actionToDo == 'show' )
                        $(selector).show( 200, function(){
                            $(this).addClass("validate-required");
                        });
                    else
                        $(selector).hide( 200, function(){
                            $(this).removeClass("validate-required");
                        });
                    $(selector).removeClass("woocommerce-validated");
                    $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
                }

            });


        </script>
    <?php
}