{"id":564,"date":"2022-02-11T22:28:21","date_gmt":"2022-02-12T03:28:21","guid":{"rendered":"https:\/\/robertableson.com\/?p=564"},"modified":"2023-06-30T13:29:28","modified_gmt":"2023-06-30T17:29:28","slug":"phone-number-format-woocommerce-checkout-page","status":"publish","type":"post","link":"https:\/\/robertableson.com\/phone-number-format-woocommerce-checkout-page\/","title":{"rendered":"How to easily validate phone number format in WooCommerce checkout page"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#defining_the_phone_number_format_to_validate\"><span class=\"toc_number toc_depth_1\">1<\/span> Defining the phone number format to validate<\/a><\/li><li><a href=\"#validating_the_phone_number_in_the_woocommerce_checkout_page_with_php\"><span class=\"toc_number toc_depth_1\">2<\/span> Validating the phone number in the WooCommerce checkout page with PHP <\/a><\/li><li><a href=\"#a_better_foolproof_way_of_validating_the_phone_number_in_the_woocommerce_checkout_page_with_php\"><span class=\"toc_number toc_depth_1\">3<\/span> A better foolproof way of validating the phone number in the WooCommerce checkout page with PHP<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\" id=\"defining-the-phone-number-format-to-validate\"><span id=\"defining_the_phone_number_format_to_validate\">Defining the phone number format to validate<\/span><\/h2>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>For this example, I will validate that the phone number looks like this format: 111-111-1111.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>The rules could be as follow:<\/p>\n\n\n\n<ul>\n<li>The phone number must have 12 characters (no more, no less)<\/li>\n\n\n\n<li>The phone number must have 2 hyphens (no more, no less)<\/li>\n<\/ul>\n\n\n\n<p>You could even go crazier by making sure that the hyphens are at the correct index or use RegEx, etc.<\/p>\n\n\n\n<p>For my use case, that&#8217;s enough.<\/p>\n\n\n\n<p>Now to coding.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"validating-the-phone-number-in-the-woocommerce-checkout-page-with-php\"><span id=\"validating_the_phone_number_in_the_woocommerce_checkout_page_with_php\">Validating the phone number in the WooCommerce checkout page with PHP <\/span><\/h2>\n\n\n\n<p>To add this code as easily as possible, you can use the <a href=\"https:\/\/en-ca.wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noopener\">Code Snippets<\/a> plugin, your theme&#8217;s functions.php file, a custom plugin or any other alternative. Code Snippets works great for short snippets like this one.<\/p>\n\n\n\n<p>So now, simply add this code:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-php\" data-lang=\"PHP\"><code>function ra_custom_validate_billing_phone() {\n\t$phone_number = preg_replace( &#39;\/\\D\/&#39;, &#39;&#39;, $_POST[&#39;billing_phone&#39;] );\t\n\t\n\tif( strlen( preg_replace( &#39;\/\\D\/&#39;, &#39;&#39;, $phone_number ) ) != 10 ) {\t\t\n        wc_add_notice( __( &#39;Please enter a phone number with the format &lt;strong&gt;111-111-1111&lt;\/strong&gt;. &lt;a href=&quot;#billing_phone&quot;&gt;Update \u00bb&lt;\/a&gt;&#39; ), &#39;error&#39; );\n    } else {\n\t\t$formatted_phone = substr_replace( substr_replace( $phone_number, &#39;-&#39;, 3, 0 ), &#39;-&#39;, 7, 0);\n\t\t$_POST[&#39;billing_phone&#39;] = $formatted_phone;\n\t}\n}\nadd_action(&#39;woocommerce_checkout_process&#39;, &#39;ra_custom_validate_billing_phone&#39;);<\/code><\/pre><\/div>\n\n\n\n<p>And you should get an error message if the phone number is incorrecly formatted like so:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"421\" height=\"75\" src=\"https:\/\/robertableson.com\/wp-content\/uploads\/2022\/02\/Woocommerce-phone-format-validation-message.png\" alt=\"Woocommerce phone format validation message\" class=\"wp-image-577\" srcset=\"https:\/\/robertableson.com\/wp-content\/uploads\/2022\/02\/Woocommerce-phone-format-validation-message.png 421w, https:\/\/robertableson.com\/wp-content\/uploads\/2022\/02\/Woocommerce-phone-format-validation-message-300x53.png 300w\" sizes=\"(max-width: 421px) 100vw, 421px\" title=\"\"><figcaption class=\"wp-element-caption\">Woocommerce phone format validation message<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span id=\"a_better_foolproof_way_of_validating_the_phone_number_in_the_woocommerce_checkout_page_with_php\">A better foolproof way of validating the phone number in the WooCommerce checkout page with PHP<\/span><\/h2>\n\n\n\n<p>The above solution is a good solution for a simple phone validation. However, since this code comes from a customer&#8217;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. <\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>The formula behind the snippet is:<\/p>\n\n\n\n<ul>\n<li>Get the phone number input<\/li>\n\n\n\n<li>Strip everything that is not a digit<\/li>\n\n\n\n<li>If it does not contain 10 digits (1111111111), throw error and hint the correct format<\/li>\n\n\n\n<li>If it contains 10 digits, add two dashes to format it like the following: 111-111-1111<\/li>\n<\/ul>\n\n\n\n<p><strong>Result:<\/strong> No more messing around and no more formating needed from the customers!<\/p>\n\n\n\n<p>Full snippet:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-php\" data-lang=\"PHP\"><code>function ra_custom_validate_billing_phone() {\n\t$phone_number = preg_replace( &#39;\/\\D\/&#39;, &#39;&#39;, $_POST[&#39;billing_phone&#39;] );\t\n\t\n\tif( strlen( preg_replace( &#39;\/\\D\/&#39;, &#39;&#39;, $phone_number ) ) != 10 ) {\t\t\n        wc_add_notice( __( &#39;Please enter a phone number with the format &lt;strong&gt;111-111-1111&lt;\/strong&gt;. &lt;a href=&quot;#billing_phone&quot;&gt;Update \u00bb&lt;\/a&gt;&#39; ), &#39;error&#39; );\n    } else {\n\t\t$formatted_phone = substr_replace( substr_replace( $phone_number, &#39;-&#39;, 3, 0 ), &#39;-&#39;, 7, 0);\n\t\t$_POST[&#39;billing_phone&#39;] = $formatted_phone;\n\t}\n}\nadd_action(&#39;woocommerce_checkout_process&#39;, &#39;ra_custom_validate_billing_phone&#39;);<\/code><\/pre><\/div>\n\n\n\n<p>If you have any questions, <a href=\"https:\/\/robertableson.com\/contact\/\" data-type=\"page\" data-id=\"91\">please let me know<\/a>.<\/p>\n\n\n\n<p>Cheers!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Contents1 Defining the phone number format to validate2 Validating the phone number in the WooCommerce checkout page with PHP 3 A better&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[12,13,11],"tags":[],"_links":{"self":[{"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/posts\/564"}],"collection":[{"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/comments?post=564"}],"version-history":[{"count":21,"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/posts\/564\/revisions"}],"predecessor-version":[{"id":602,"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/posts\/564\/revisions\/602"}],"wp:attachment":[{"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/media?parent=564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/categories?post=564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robertableson.com\/wp-json\/wp\/v2\/tags?post=564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}