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

  • Resolved Amin Jabari Asl

    (@aminjabari)


    4 years, 4 months ago

    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]*”>
    https://css-tricks.com/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

Viewing 1 replies (of 1 total)
  • Thread Starter Amin Jabari Asl

    (@aminjabari)

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

    
// 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
    https://www.businessbloomer.com/woocommerce-change-input-type-checkout-fields/

Viewing 1 replies (of 1 total)
  • The topic ‘How to activate numeric keypad on woocommerce checkout fields for mobile users?’ is closed to new replies.

Tags