If you’re using WooCommerce block-based checkout and want to remove or hide certain fields, this code snippet is perfect for you. It’s especially helpful in situations where you’re selling products in just one country and don’t need information like state, postcode, or city. By removing these fields, you can simplify the checkout process, making it quicker for customers to complete their purchase.
Solution: Remove / Disable Billing and Shipping Address Fields in WooCommerce Checkout Blocks page
The code snippet will help to remove the fields such as address, postcode, city and state fields from the checkout blocks page.
add_filter('woocommerce_get_country_locale', function( $locale ) {
foreach ( $locale as $key => $value ) {
// Make address_1, postcode, city, state fields optional and hidden for all countries
$locale[ $key ]['address_1'] = [
'required' => false,
'hidden' => true,
];
$locale[ $key ]['postcode'] = [
'required' => false,
'hidden' => true,
];
$locale[ $key ]['city'] = [
'required' => false,
'hidden' => true,
];
$locale[ $key ]['state'] = [
'required' => false,
'hidden' => true,
];
}
return $locale;
});
Output
If the store is using the new blocks-based checkout page, you can now see the address fields being removed from both billing and shipping fields.
Solution: Disable Phone Field in Checkout blocks Page
As you may have noticed, the hook used in the classic checkout no longer works with checkout blocks. The following snippet allows you to hide the phone fields in both the shipping and billing sections, which is useful when offering services that don’t require phone contact, such as digital downloads.
function ts_hide_phone_fields_in_block_checkout() {
// Check if it's the checkout page
if (is_checkout()) {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// Hide all phone input fields in the checkout page (both billing and shipping)
const phoneFields = document.querySelectorAll('input[type="tel"]');
phoneFields.forEach(function(field) {
field.closest('div').style.display = 'none'; // Hide the parent div
});
});
</script>
<?php
}
}
add_action('wp_footer', 'ts_hide_phone_fields_in_block_checkout');
This code snippet will hide the phone fields (both billing and shipping) on the WooCommerce checkout blocks page.
Additionally, if you’re looking to add a custom field to your checkout, such as a delivery date picker, you can easily do that too. We’ve got a detailed guide on adding a date field to your WooCommerce checkout blocks, which could be a great way to enhance your checkout process further.
