Checkout

WooCommerce Only Allow Number Input For Billing Phone

WooCommerce checkout phone number field only allowing numbers only

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About This Solution

This snippet adds jQuery (run form the footer for performance reasons) which only allows number input in the billing phone field on the checkout. Specifically, it will find and delete anything which is not a number. This means the user will be unable to add any special characters, spaces, or letters in the billing phone field. This acts as an input mask rather than a validation method – the user simply will not be able to enter anything but numbers in the field.

/**
 * Snippet Name:	WooCommerce Only Allow Number Input For Billing Phone
 * Snippet Author:	ecommercehints.com
 */

add_action('wp_footer', 'ecommercehints_billing_phone_validation');
function ecommercehints_billing_phone_validation() {
        if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('#billing_phone').on( 'input focusout', function() {
            var p = $(this).val();
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });
    });
    </script>
    <?php
    endif;
}

Snippet Benefits

  • Force consistent phone numbers through the WooCommerce checkout.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.

26027
WELCOME OFFER