WooCommerce: Change Input Type @ Checkout Fields

This challenging task (yet very simple at the end…!) was requested by one of my WooCommerce Support clients. As they trade in USA only, they wanted to force “numbers only” in the ZIP input field, so that letters would not be allowed. Strange WooCommerce doesn’t do this out of the box!

WooCommerce Snippet: Change ZIP to Input Type = Number

/**
 * @snippet       Change a Checkout Field Input Type
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=19109
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 2.4.7
 */

// Change field type to number woocommerce checkout

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