wordpressmobilewoocommercecheckoutnumeric-keypad

How to activate numeric keypad on woocommerce checkout fields for mobile users?


Is it possible to activate number keyboard for mobile user in woocommerce checkout?

I have customized woocommerce default checkout fields and some of these fields are just number (for example:Postal code, Phone, etc.).

Most of my website visitors are mobile users and I want to make the checkout session easier for them by activating numeric keypad for these input fields.

I searched the web and I realized if you add below code,numeric keyboard will be called automatically.

<input inputmode="numeric" pattern="[0-9]*"> 

Finger-friendly numerical inputs with inputmode

But I don't know how can I add this attribute to checkout fields like billing_phone,billing_postcode, or other custom fields which ask for number.

Any help would be appreciated Thanks


Solution

  • After further research I found a snippet for this question from businessbloomer:

    // Change field type to number woocommerce checkout
     
    function bbloomer_change_checkout_field_input_type() {
    echo "<script>document.getElementById('billing_postcode').type = 'number';</script>";
    echo "<script>document.getElementById('billing_city').type = 'number';</script>";       
        
    }
    add_action( 'woocommerce_after_checkout_form', 'bbloomer_change_checkout_field_input_type');

    WooCommerce: Change Input Type @ Checkout Fields