CODEWITHSUNDEEP
phpjquerywordpresswoocommercecheckout
Koangi
Koangi

Reputation: 23

Show hide Order notes field based on a checkbox in Woocommerce checkout

In Woocommerce checkout page there is a "ship-to-different-address" checkbox and I would like when it is checked, to hide order_comments field (Order notes). If the checkbox is unchecked back again, order_comments field should be visible (unhidden).

Is this possible in functions.php?

Upvotes: 0

Views: 555

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253783

The following code will hide Order notes section field when "ship-to-different-address" checkbox is checked and vice versa:

add_action( 'wp_footer', 'checkout_custom_script_js');
function checkout_custom_script_js() {
    // Only on front-end and checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
    jQuery(function($){
        $('form.checkout').on( 'change', '#ship-to-different-address-checkbox', function(){
            if( $(this).prop('checked') === true )
                $('#order_comments_field').hide(); // Show
            else
                $('#order_comments_field').show(); // Hide
        })
    });
    </script>
    <?php
    endif;
}

Code goes on function.php file of your active child theme (or active theme). Tested and works.

Upvotes: 1

Related Questions