June 8, 20232 min read

How to Add a Phone Input Mask to WooCommerce Checkout

On this page

Why Enforce a Phone Number Format
Step 1: Set the Placeholder and Maxlength
Step 2: Auto-Insert Dashes While Typing
Troubleshooting
Frequently Asked Questions
Conclusion

You can add a phone input mask to WooCommerce checkout with a small jQuery snippet that automatically inserts formatting characters (like dashes) as the customer types, combined with a matching placeholder and maxlength so the phone field enforces a consistent format.

Why Enforce a Phone Number Format

Consistent phone formatting makes customer data easier to use for shipping labels and SMS notifications
A visible placeholder tells customers exactly what format is expected before they start typing
It reduces malformed entries that would otherwise need manual cleanup later

Step 1: Set the Placeholder and Maxlength

/** Show a formatted placeholder and cap the billing phone field length */
add_filter( 'woocommerce_checkout_fields', 'apply_us_phone_format_hints' );

function apply_us_phone_format_hints( $fields ) {
    $fields['billing']['billing_phone']['placeholder'] = '123-456-7890';
    $fields['billing']['billing_phone']['maxlength'] = 12;
    return $fields;
}

Step 2: Auto-Insert Dashes While Typing

/** Automatically format the phone number as 123-456-7890 while typing */
add_action( 'woocommerce_after_checkout_form', 'apply_us_phone_input_mask' );

function apply_us_phone_input_mask() {
    wc_enqueue_js( "
        $('#billing_phone').on('keydown', function (e) {
            var key = e.which || e.keyCode || 0;
            var field = $(this);

            if ( key !== 8 && key !== 9 ) {
                if ( field.val().length === 3 ) {
                    field.val( field.val() + '-' );
                }
                if ( field.val().length === 7 ) {
                    field.val( field.val() + '-' );
                }
            }

            return ( key === 8 || key === 9 || key === 46 ||
                ( key >= 48 && key <= 57 ) || ( key >= 96 && key <= 105 ) );
        });
    " );
}

Add a phone input mask to WooCommerce checkout: the page before adding the code — Before

Add a phone input mask to WooCommerce checkout: the page after adding the code — After

Troubleshooting

The mask blocks pasting a phone number

This mask only intercepts keydown events, so pasted values bypass the automatic dash insertion — add a matching “paste” event handler if you need pasted numbers reformatted too.

International customers can’t enter their actual format

This mask assumes a US-style 10-digit number — if you serve international customers, either scope the mask to a specific billing country or skip masking and rely on validation instead.

Frequently Asked Questions

Can I use a different format than 123-456-7890?

Yes, adjust the character-length checks in the script (where dashes are inserted) and the maxlength/placeholder values to match your desired format.

Does this replace proper phone number validation?

No, a mask only controls formatting as the customer types — pair it with server-side validation if you need to guarantee the number is genuinely valid.

Will this work on the block-based checkout?

This jQuery-based approach targets the classic checkout form’s phone field ID — block-based checkout would need a different, block-compatible implementation.

Test the mask specifically with a screen reader if accessibility matters to your store, since automatically inserted characters can sometimes interact unpredictably with assistive technology depending on how the browser announces the field’s changing value.

Conclusion

A placeholder, maxlength, and a short script are enough to add a phone input mask to WooCommerce checkout, keeping phone number formatting consistent across every order.

Prefer no code? All-in-One Utilities Woo Add-on adds over 50 WooCommerce features, so you can switch them on without code.