1. Home
  2. Docs
  3. Custom Code Samples
  4. Checkout Map
  5. How to hide a checkout field when map is set to hidden

How to hide a checkout field when map is set to hidden

You can hide various checkout fields based on the map visibility of LPAC by listening to a Javascript event. The list of available JS events for this functionality can be found here.

In the following snippet, we will hide the Shipping Address 1 and 2 field anytime the map is hidden.

PHP
function lpac_cc_hide_shipping_address_fields(){

	echo "
	
	<script>
	document.addEventListener( 'custom:lpacMapVisibilityCheckedAfter', function(){

		const mapContainer = document.querySelector('#lpac-map-container');
		
		// If map is hidden, hide shipping address 1 & 2 field
		if(mapContainer && mapContainer.style.display === 'none'){
			const field1 = document.querySelector('#shipping_address_1_field');
			field1.style.display = 'none';
			
			const field2 = document.querySelector('#shipping_address_2_field');
			field2.style.display = 'none';
		}
		
		// If map is hidden, show shipping address 1 & 2 field
		if(mapContainer && mapContainer.style.display === 'block'){
			const field1 = document.querySelector('#shipping_address_1_field');
			field1.style.display = 'block';
			
			const field2 = document.querySelector('#shipping_address_2_field');
			field2.style.display = 'block';
		}
	
	});

	</script>
	
	";
	
}
add_action('wp_head', 'lpac_cc_hide_shipping_address_fields');

NOTE

In the above example we hid the shipping address field 1, but this field is a REQUIRED FIELD. This means that checking out would fail even though the field is hidden. You need to make the field not required, you can read more here.

Was this article helpful to you? Yes No