By default, WooCommerce adds the “autocomplete” attribute to almost all checkout fields. For example, “billing_phone” has “autocomplete=tel”, “billing_country” has “autocomplete=country” and so on.
When logged out or if the logged in user has never done a purchase before, the WooCommerce Checkout page fields are possibly autofilled by the browser based on saved data / addresses.
Today, we’ll take a look at how to disable this autofill behavior, so that the customer is forced to enter data inside an empty input, and maybe in this way you can apply your custom validation or pattern, such as a specific phone number format. Enjoy!
PHP Snippet: Disable Autocomplete For Billing Phone @ WooCommerce Checkout
/**
* @snippet Disable Phone Autocomplete @ WooCommerce Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_checkout_fields', 'bbloomer_disable_autocomplete_checkout_fields' );
function bbloomer_disable_autocomplete_checkout_fields( $fields ) {
$fields['billing']['billing_phone']['autocomplete'] = false;
return $fields;
}
You can target any of these checkout fields:
Billing
- billing_first_name
- billing_last_name
- billing_company
- billing_address_1
- billing_address_2
- billing_city
- billing_postcode
- billing_country
- billing_state
- billing_email
- billing_phone
Shipping
- shipping_first_name
- shipping_last_name
- shipping_company
- shipping_address_1
- shipping_address_2
- shipping_city
- shipping_postcode
- shipping_country
- shipping_state
Account
- account_username
- account_password
- account_password-2
Order
- order_comments