Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins

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', '' );
    wp_enqueue_script( 'intltelinput', '', array( 'jquery' ), '', true );

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

function ts_init_phone_mask() {
        jQuery( function( $ ) {
            // Add the phone mask to the phone field on the checkout page
            $( '#billing_phone' ).intlTelInput( {
                preferredCountries: [ 'IN' ],
                nationalMode: false,
                utilsScript: ""
            } );
        } );
        .iti { width: 100%; }


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.

How to Mask the Phone Number field on WooCommerce Checkout?

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

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x