WooCommerce 📱 phone number verification (+381)

One of the most important checkout fields for online stores that is also prone to oversight is phone verification. Order confirmation and delivery can both be made much simpler with proper phone verification.

In WooCommerce, the phone number field provides an HTML check for a straightforward number:

<input type="tel" class="input-text"

But by ensuring that the number contains a country code and a maximum of nine digits, we can take that verification a step further.

Add the following code to the functions.php file of your active theme, or better yet, create a new Child Theme first.

add_action('woocommerce_checkout_process', 'phone_check_field');

function phone_check_field() {
    global $woocommerce;

    if ( ! (preg_match('/^[0-9]{12}$/D', $_POST['billing_phone'] ))){

        wc_add_notice( "Please enter valid 12 digits phone number!"  ,'error' );

    }
}

This will restrict the phone number field to 12 digits, and if the user enters a number that is not in that format, an error message will be displayed. Make sure to edit the snippet according to your needs:

Here is another, a bit complex snippet that will show a placeholder on the phone number field and, after being submitted, check to see if the phone number is in the proper format, which is country code (+381) followed by a maximum of 9 numbers.

add_action('woocommerce_checkout_process', 'phone_check2_speedplus');
function phone_check2_speedplus() {

	// Is there a phone number
	if ( !empty( $_POST['billing_phone'] ) ) {
		$number = $_POST['billing_phone'];
		$length = strlen($number);

		// 13 symbols max ( +381 and 9 more numbers )
		if (($length == 13) && (preg_match('/\+381[1-9]\d{8}\b/', $number))) {

		}
		else {

			// If not in this format, display an error
			wc_add_notice( '<strong>' . sprintf( __("Phone number must start with +381 for example: +381645537842.") ) . '</strong>', 'error' );
		}
	}
}

// Display a placeholder with an example +381645537842
add_filter( 'woocommerce_checkout_fields' , 'speedplus_overrides_checkout_fields', 20, 1 );

function speedplus_overrides_checkout_fields( $fields ) {
    $fields['billing']['billing_phone']['placeholder'] = '+381645537842';
    return $fields;
}

If user input doesn’t match this pattern, the following error notice will be shown:

Make sure to edit the snippet according to your needs: