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

Question

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

Answer 1

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