时间戳

首页 > 解决方案 > 在 WooCommerce 中隐藏特定计费状态的一些结帐字段类型

jquery - 在 WooCommerce 中隐藏特定计费状态的一些结帐字段类型

问题描述

billing_address_1当用户选择特定的（在上面的代码中，状态必须为“CA”）时，我试图在结帐时隐藏字段billing_state，但我的代码不起作用。另外我想隐藏更多字段，例如 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
}

标签： jquerywordpresswoocommercecheckouthook-woocommerce

解决方案

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
}

推荐阅读