How to add a country calling code prefix in Woocommerce billing phone field?

If you have a Woocommerce store and sell products internationally, you may want to add phone prefixes to the checkout page. This can help ensure that customers from different countries can easily enter their phone numbers and complete their purchases. In this blog post, I will guide you through the steps of adding a county calling code prefix in the Woocommerce billing phone field.

Step 1: Install and Activate the Code Snippets plugin

So, if you would like to add a country calling code prefix in Woocommerce billing phone field, then use this snippet here below. If you don’t know where to add the code snippet, then add it either to your child theme’s functions.php file or better yet, use a snippet manager like Code Snippets

Step 2: Paste the snippet here below

After installing and activating the plugin, you will need to add a new snippet. So, go to Snippets >> Add new and give it a title. For example: “Add country calling code prefix in Woocommerce billing phone”. Next, paste the snippet here below inside the code box and choose “Run snippet everywhere”. Now choose “Save and activate”

// Add country calling code prefix in woocommerce billing phone
add_action( 'wp_footer', 'wpsh_add_callback' );
function wpsh_add_callback(){
    ?>
    <script type="text/javascript">
        ( function( $ ) {
            $( document.body ).on( 'updated_checkout', function(data) {
                var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>",
                country_code = $('#billing_country').val();

                var ajax_data = {
                    action: 'append_country_prefix_in_billing_phone',
                    country_code: country_code
                };

                $.post( ajax_url, ajax_data, function( response ) { 
                    $('#billing_phone').val(response);
                });
            } );
        } )( jQuery );
    </script>
    <?php
}

add_action( 'wp_ajax_nopriv_append_country_prefix_in_billing_phone', 'wpsh_add_phone_prefix' );
add_action( 'wp_ajax_append_country_prefix_in_billing_phone', 'wpsh_add_phone_prefix' );
function wpsh_add_phone_prefix() {
    $calling_code = '';
    $country_code = isset( $_POST['country_code'] ) ? sanitize_text_field( $_POST['country_code'] ) : '';
    if( $country_code ){
        $calling_code = WC()->countries->get_country_calling_code( $country_code );
        $calling_code = is_array( $calling_code ) ? $calling_code[0] : $calling_code;
    }
    echo $calling_code;
    die();
}
// Phone number shoud be at least 6 digits long. This avoids the problem with not adding a phone number
add_action('woocommerce_checkout_process', 'wpsh_validate_phone');
function wpsh_validate_phone() {
    if (isset($_POST['billing_phone'])) {
        $phone = strlen(preg_replace('/[^0-9]/', '', $_POST['billing_phone']));
        if ($phone < 6) {
            wc_add_notice( __( '<strong>Billing Phone</strong> must be at least 6 digits long.' ), 'error' );
        }
    }
}

Pay attention that lines 37-46 are added because with this snippet phone number field is filled with the prefix and appears as completed in the Woocommerce checkout. This way the user can proceed with the order even without entering the rest of the number. To avoid this we add another small piece of code that won’t allow to enter phone numbers with less than 6 digits. You can modify this in line 42 and the message itself in line 43.

Step 3: Test the Checkout Page

Once you have configured the plugin settings, it is important to test the checkout page to ensure that the phone prefix is working correctly. To do this, add a product to your cart and proceed to the checkout page. You should now see a prefix next to the phone number field that changes every time you change your country. Make sure that the phone number is validated correctly and that the country code is included when the order is submitted.

Alternative method: Install “Country code selector” plugin

If the previous method seems too complicated for you then you may want to install and activate “Country code selector” plugin. This plugin allows you to add phone prefixes to the Woocommerce checkout page. You can find this plugin in the WordPress plugin directory and install it from there.

In conclusion, adding phone prefixes to the Woocommerce checkout page can be very beneficial for international customers. It can help them enter their phone numbers more easily and can reduce the risk of errors during checkout.

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get a 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration, and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I like but the one that stands out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). By the way, this site is hosted in Verpex.)

To see all my most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Janek T.
Janek T.

Improve this text: {CLIPBOARD}

- I have been passionate about Wordpress since 2011, creating websites and sharing valuable tips on using Wordpress and Woocommerce on my site.
- Be the first to receive notifications about new tutorials by subscribing to my Youtube channel .
- Follow me on Twitter here

Articles: 105