Home » WooCommerce: Dynamically Hide / Show Checkout Field

WooCommerce: Dynamically Hide / Show Checkout Field

by Tutor Aspire

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!

In this example, we will see how to hide and keep hidden the Billing Phone entire field unless some content is entered inside Company name field

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://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) {
} else {
" );

You may also like