May 8, 2023

Add Phone Prefixes to WooCommerce Checkout Fields

Play Video

What is the tutorial about?

WP Simple Hacks will show you how to add phone prefixes to WooCommerce checkout fields automatically. By default, WooCommerce does not include these prefixes, but with the help of this tutorial, you can enhance your online store’s user experience and provide a more efficient checkout process.

Use Cases for this Tutorial

  • Streamlining the checkout process by automatically adding phone prefixes to the fields
  • Ensuring a standardized format for phone numbers entered during the checkout process
  • Reducing errors in customer’s contact information
  • Enhancing the user experience and increasing conversions by simplifying the checkout process

Required Code

Original Post:

// 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 ) { 



            } );

        } )( jQuery );




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;



Required Resources

WP Code Box Logo
Free Options
WooCommerce Logo
Free Options
Code Snippets Logo
Free Options
Credit to WP Simple Hacks
WP Simple Hacks is a YouTube channel that focuses on delivering valuable and straightforward video tutorials for WordPress enthusiasts. The channel's creator, a seasoned WordPress expert, shares his knowledge and experience by covering various topics, such as theme customization, plugin usage, site optimization, and problem-solving techniques.
Add Phone Prefixes to WooCommerce Checkout Fields
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.