How to easily validate phone number format in WooCommerce checkout page

Need to validate the phone number format used by customers in the WooCommerce checkout page to have a specific format? Discover how to easily do this here with a quick PHP code snippet.

Defining the phone number format to validate

The first step to validating a specific format in the WooCommerce checkout page is to set specific rules for what you want the phone number to be.

For this example, I will validate that the phone number looks like this format: 111-111-1111.

I like to go as simple as possible to start with and then tweek it as needed. Given that WooCommerce already checks that the input for a phone number contains only numbers, hyphens and parentheses, we should have some pretty good luck with some very simple rules.

The rules could be as follow:

  • The phone number must have 12 characters (no more, no less)
  • The phone number must have 2 hyphens (no more, no less)

You could even go crazier by making sure that the hyphens are at the correct index or use RegEx, etc.

For my use case, that’s enough.

Now to coding.

Validating the phone number in the WooCommerce checkout page with PHP

To add this code as easily as possible, you can use the Code Snippets plugin, your theme’s functions.php file, a custom plugin or any other alternative. Code Snippets works great for short snippets like this one.

So now, simply add this code:

function mn_custom_validate_billing_phone() {
	$phone_number = preg_replace( '/\D/', '', $_POST['billing_phone'] );	
	
	if( strlen( preg_replace( '/\D/', '', $phone_number ) ) != 10 ) {		
        wc_add_notice( __( 'SVP inscrire un numéro de téléphone avec le format <strong>1234567890</strong>. <a href="#billing_phone">Corriger ici »</a>' ), 'error' );
    } else {
		$formated_phone = substr_replace( substr_replace( $phone_number, '-', 3, 0 ), '-', 7, 0);
		$_POST['billing_phone'] = $formated_phone;
	}
}
add_action('woocommerce_checkout_process', 'mn_custom_validate_billing_phone');

And you should get an error message if the phone number is incorrecly formatted like so:

Woocommerce phone format validation message
Woocommerce phone format validation message

A better foolproof way of validating the phone number in the WooCommerce checkout page with PHP

The above solution is a good solution for a simple phone validation. However, since this code comes from a customer’s site and has been through real world usage, it was reported that customers using some iPhones could not input the dash character in the phone field.

With this feedback in mind, I opted to change the script for a foolproof solution that does not demand the customer to adhere to a particular format. Instead, we just validate if the input can be formated with code to what we need, which is 111-111-1111.

The formula behind the snippet is:

  • Get the phone number input
  • Strip everything that is not a digit
  • If it does not contain 10 digits (1111111111), throw error and hint the correct format
  • If it contains 10 digits, add two dashes to format it like the following: 111-111-1111

Result: No more messing around and no more formating needed from the customers!

Full snippet:

function mn_custom_validate_billing_phone() {
	$phone_number = preg_replace( '/\D/', '', $_POST['billing_phone'] );	
	
	if( strlen( preg_replace( '/\D/', '', $phone_number ) ) != 10 ) {		
        wc_add_notice( __( 'SVP inscrire un numéro de téléphone avec le format <strong>1234567890</strong>. <a href="#billing_phone">Corriger ici »</a>' ), 'error' );
    } else {
		$formated_phone = substr_replace( substr_replace( $phone_number, '-', 3, 0 ), '-', 7, 0);
		$_POST['billing_phone'] = $formated_phone;
	}
}
add_action('woocommerce_checkout_process', 'mn_custom_validate_billing_phone');

If you have any questions, please let me know.

Cheers!

Similar Posts