WooCommerce: Dynamically Hide / Show Checkout Field

We already saw a lot of examples e.g. hiding checkout fields if a product is virtual or hiding checkout fields if a checkbox is manually checked… but this time I want to hide a field dynamically – automatically – based on whether another checkout field is empty or has a specific value.

In this example, I will demonstrate how to hide the “billing phone” if “billing company” is empty or no information is entered. Of course, you also have to disable the mandatory attribute for the billing phone from the Customizer settings, otherwise checkout validation will fail. You can readapt this snippet to any other checkout field combo – just identify the input IDs and change jQuery accordingly. Enjoy!

PHP Snippet: Toggle a Checkout Field Based on Whether Another Field is Empty

/**
 * @snippet       Hide/Show Field @ WooCommerce Checkout
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 5
 * @donate $9     https://www.tutoraspire.com
 */

add_action( 'woocommerce_after_checkout_form', 'tutoraspire_conditionally_hide_show_checkout_field', 9999 );
 
function tutoraspire_conditionally_hide_show_checkout_field() {
wc_enqueue_js( "
$('#billing_company').keyup(function() {
if ($(this).val().length == 0) {
$('#order_comments_field').hide();
} else {
$('#order_comments_field').show();
}
});
" );
}