How to Mask the Phone Number field on WooCommerce Checkout?

Are you looking to customize the phone number input field on your WooCommerce checkout page? If so, we have a solution to add a phone number input field with the country flag and phone code. This will make checkout easier for your customers, as they won’t have to worry about whether or not they should include the country’s phone code. Also, we have used the external library to add a mask to the phone number field which is intlTellinput.js

add_action( 'wp_enqueue_scripts', 'ts_add_phone_mask' );

function ts_add_phone_mask() {
    wp_enqueue_style( 'intltelinput', 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css' );
    wp_enqueue_script( 'intltelinput', 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput-jquery.min.js', array( 'jquery' ), '', true );
}

// Initialize the phone mask script
add_action( 'wp_footer', 'ts_init_phone_mask' );

function ts_init_phone_mask() {
    ?>
    <script>
        jQuery( function( $ ) {
            // Add the phone mask to the phone field on the checkout page
            $( '#billing_phone' ).intlTelInput( {
                preferredCountries: [ 'IN' ],
                nationalMode: false,
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
            } );
        } );
    </script>
    <style>
        .iti { width: 100%; }
    </style>
    <?php
}

Output

The following output shows that the WooCommerce checkout page now displays the country flag along with the country’s phone code. In addition, the phone input field has also been customized to include a dropdown for countries, making it easier to select your country’s phone code.

Similarly, you can also add custom dropdown list in billing section of WooCommerce checkout page.