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!

Once the snippet below is active, the phone input will display a placeholder “123-456-7890” and also, once you start typing in it, it will stick to that format and won’t allow you to change it. It also won’t allow you to enter more than 12 characters because we’ve set a maxlength.

PHP Snippet: Phone Placeholder and Input Mask @ WooCommerce Checkout

/** * @snippet       Phone Mask @ WooCommerce Checkout * @how-to        Get CustomizeWoo.com FREE * @author        Rodolfo Melogli * @compatible    WooCommerce 5 * @donate $9     https://businessbloomer.com/bloomer-armada/ */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));		  });		  	" );}

WooCommerce: Phone Input Mask @ Checkout .

Navigate