How to Add Phone Number Mask to Phone Input Field on WooCommerce Product Page?

Adding a custom input field, such as a phone number input field, on product pages is a great start to collect customer personal details, but it’s not enough. Customers often enter phone numbers in inconsistent formats, which can lead to errors and confusion. That’s why it’s crucial to enhance the phone field so it automatically formats the information based on the customer’s input. This customization ensures that phone numbers are entered in a consistent and correct format according to the country selected. Let’s dive in to see how it works!

Solution: Add Phone Number Mask to Phone Input Field

The code adds a custom phone number input field on WooCommerce product pages. It initializes the phone number input field with intl-tel-input, allowing it to automatically format the phone number with the country code based on the country selected by the user.

function ts_enqueue_phone_mask_script() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'intl-tel-input', 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js', array( 'jquery' ), '', true );
    wp_enqueue_style( 'intl-tel-input-css', 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css' );
    wp_enqueue_script( 'intl-tel-input-utils', 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js', array( 'intl-tel-input' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'ts_enqueue_phone_mask_script' );

add_action( 'woocommerce_before_add_to_cart_button', 'ts_add_phone_number_field_to_product_page', 9 );
function ts_add_phone_number_field_to_product_page() {
    echo '<div class="custom-phone-field">';
    woocommerce_form_field( 'phone_number', array(
        'type' => 'tel',
        'required' => true,
        'label' => 'Phone Number',
        'placeholder' => 'Enter your phone number...',
        'class' => array('input-text', 'custom-phone-field'),
    ));
    echo '</div>';
}

add_action( 'wp_footer', 'ts_initialize_phone_number_mask' );
function ts_initialize_phone_number_mask() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        var input = $("#phone_number");
        var iti = window.intlTelInput(input[0], {
            initialCountry: "auto",
            geoIpLookup: function(callback) {
                $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
                    var countryCode = (resp && resp.country) ? resp.country : "us";
                    callback(countryCode);
                });
            },
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js" // Load utils.js for formatting and validation
        });

        // Format phone number on blur event
        input.on('blur', function() {
            var formattedNumber = iti.getNumber();
            input.val(formattedNumber);
        });
    });
    </script>
    <?php
}

Output

When a customer visits the product page, they will see a new field labeled “Phone Number” above the “Add to Cart” button. This field includes a dropdown menu where they can select their country code. After selecting the country code, they can then manually input their phone number.

To ensure customer data is entered correctly, phone fields should be masked to prevent unnecessary errors during input. Similarly, you can also add custom input fields, such as a URL input field on a product page, and validate the entered values to maintain data integrity and accuracy.