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 no value is entered in it.

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 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: Conditionally Hide / Show a Checkout Field Based on Whether Another Field is Empty

 * @snippet       Hide/Show Field @ WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.9
 * @donate $9     https://businessbloomer.com/bloomer-armada/

add_action( 'woocommerce_after_checkout_form', 'bbloomer_conditionally_hide_show_checkout_field', 9999 );
function bbloomer_conditionally_hide_show_checkout_field() {
	wc_enqueue_js( "
		jQuery('#billing_company').keyup(function() {
			if (jQuery(this).val().length == 0) {
			} else {

Leave a Reply