Sunday, October 11, 2020

Woocommerce HIDE Checkout Fields if customer pays with CASH

 

Adding this code to your theme's functions.php will be able to hide certain checkout field on the Checkout page by detecting if customer is paying with CASH or CREDIT CARD.

Because it doesn't make sense for us to ask for BILLING ADDRESS if the customer is paying with cash.

Here is the code, just make some changes and then add it to your functions.php



// Conditional Show hide checkout fields based on chosen payment methods

add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );

function conditionally_show_hide_billing_custom_field(){

    // Only on checkout page

     if ( is_checkout() && ! is_wc_endpoint_url() ) :

    ?>

    <script>

        jQuery(function($){

            var a = 'input[name="payment_method"]',

                b = a + ':checked',

                c = '#billing_country_field,#billing_address_1_field,#billing_address_2_field,#billing_city_field,#billing_state_field, #billing_postcode_field'; // The checkout field <p> container selector


// Function that shows or hide checkout fields

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

                if( action == '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 choosen payment method is "cod"

            if( $(b).val() == 'cod' ){

              showHide( c, 'hide' );

}

            else

                showHide( c );


            // Live event (When payment method is changed): Show or Hide based on "cod"

            $( 'form.checkout' ).on( 'change', a, function() {

                if( $(b).val() == 'cod' ){

showHide( c, 'hide' );

}

                else

                    showHide( c );

            });

        });

    </script>

    <?php

    endif;

}

//






ADDITIONALLY, you might want to hide only if both CASH and PICKUP are selected by CUSTOMER. 

THIS CODE WILL HIDE BILLING ADDRESS FIELD IF CASH AND PICKUP ARE SELECTED ON CHECKOUT PAGE



// Conditional Show hide checkout fields based on chosen payment methods
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
    // Only on checkout page
     if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
        jQuery(function($){
            var a = 'input[name="payment_method"]',
                b = a + ':checked',
                c = '#billing_country_field,#billing_address_1_field,#billing_address_2_field,#billing_city_field,#billing_state_field, #billing_postcode_field'; // The checkout field <p> container selector

// Function that shows or hide checkout fields
            function showHide( selector = '', action = 'show' ){
                if( action == '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 choosen payment method is "cod"
            if( $(b).val() == 'cod' ){
             
if($('#shipping_method_0_local_pickup4').is(':checked')){
showHide( c, 'hide' );
}
}
            else
                showHide( c );

            // Live event (When payment method is changed): Show or Hide based on "cod"
            $( 'form.checkout' ).on( 'change', a, function() {
                if( $(b).val() == 'cod' ){
                    if($('#shipping_method_0_local_pickup4').is(':checked')){
showHide( c, 'hide' );
}
}
                else
                    showHide( c );
            });
        });
    </script>
    <?php
    endif;
}
//