The WooCommerce checkout page has a default phone input field that gets validated upon checkout (for HTML geeks, it’s actually an input type = “tel”). Usually, if such phone number contains letters, it will fail and checkout will stop.
But that’s not the problem. Let’s suppose you only have US customers, or that you want to force customer to enter a certain format (e.g. “+” or “01” as prefix)… well, there is no way to achieve that out of the box within the WooCommerce settings.
However, anything is possible in regard to customization, so all we need are 3 small changes: force the billing phone input to stay within a “maxlength“, set the phone input placeholder so that users know what the format should be before typing in, and finally add some JavaScript to provide an input “mask”, so that the final output is exactly what we want (123-456-7890 in this case scenario, but it could be anything).
Enjoy!
PHP Snippet: Phone Placeholder and Input Mask @ WooCommerce Checkout
/**
* @snippet Phone Mask @ WooCommerce Checkout
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 5
* @community https://businessbloomer.com/club/
*/
add_filter( 'woocommerce_checkout_fields', 'bbloomer_checkout_phone_us_format' );
function bbloomer_checkout_phone_us_format( $fields ) {
$fields['billing']['billing_phone']['placeholder'] = '123-456-7890';
$fields['billing']['billing_phone']['maxlength'] = 12; // 123-456-7890 is 12 chars long
return $fields;
}
add_action( 'woocommerce_after_checkout_form', 'bbloomer_phone_mask_us' );
function bbloomer_phone_mask_us() {
wc_enqueue_js( "
$('#billing_phone')
.keydown(function(e) {
var key = e.which || e.charCode || e.keyCode || 0;
var phone = $(this);
if (key !== 8 && key !== 9) {
if (phone.val().length === 3) {
phone.val(phone.val() + '-'); // add dash after char #3
}
if (phone.val().length === 7) {
phone.val(phone.val() + '-'); // add dash after char #7
}
}
return (key == 8 ||
key == 9 ||
key == 46 ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
});
" );
}
Amazing help!! Is there a way to add a (new) optional field that the user can input an “extension” field to the checkout? We often have customers placing orders from companies and they put the main company telephone number, and forget to include their direct extension.
example:
Phone*: 718-555-1212
Extension: 544
Ariel, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Having trouble with this. It’s giving me syntax error , unexpected ‘function’ (T-FUNCTION).
Hi Heather I get no such error, so maybe it’s a copy/paste issue on your end?
This code does not work when the browser autofill’s phone number?
I’m pretty sure there is a way to disable “autocomplete” on the phone field – I’ll see if I can post a tutorial when I get some time
Also, is this for logged in or logged out customers?
Both logged in and non-logged in customers. Have you figured out a way to disable auto complete?
Hi Anan, try with https://www.businessbloomer.com/woocommerce-disable-checkout-field-autocomplete/
Thanks Man
Welcome Man
If I have clients from different country how to create mask depends on different country ?
Ex. Israel +972 xx xxx xxxx
Russia +7 xxx xxx xxxx
Hello Rina thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I’m glad I’m subscribed to your newsletter.. Every week I learn something new, Thanks Rodolfo!
Glad to hear that!