How to add 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 purchase. In this blog post, I will guide you through the steps of adding county calling code prefix in Woocommerce billing phone field.

Step 1: Install and Activate the Code Snippets plugin

So, if you would like to remove site healt widget from the WordPress dashboard, 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 choos “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();
}

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 tome 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 wan 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 on 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

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Code Snippets manager: WPCodeBox allows you to add code snippets to your site. Also, it allows you to build and manage your WordPress Code Snippets library 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 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 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really 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). Btw, this site is hosted in Verpex.)

To see all my of 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)

Best selling plugins

Janek T.
Janek T.

I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce.
If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here
Follow me in Twitter here

Articles: 97