WooCommerce: máscara de entrada de teléfono al finalizar la compra

La página de pago de WooCommerce tiene un campo de entrada de teléfono predeterminado que se valida al finalizar la compra (para los geeks de HTML, en realidad es un tipo de entrada = «tel»). Por lo general, si dicho número de teléfono contiene letras, fallará y el pago se detendrá.

Pero ese no es el problema. Supongamos que solo tiene clientes de EE. UU., o que desea obligar al cliente a ingresar un formato determinado (por ejemplo, «+» o «01» como prefijo) … bueno, no hay forma de lograrlo de forma inmediata dentro de la configuración de WooCommerce .

Sin embargo, todo es posible con respecto a la personalización, por lo que todo lo que necesitamos son 3 pequeños cambios: obligar a la entrada del teléfono de facturación a permanecer dentro de una » longitud máxima «, establecer el marcador de posición de la entrada del teléfono para que los usuarios sepan cuál debe ser el formato antes de escribir, y finalmente agregue algo de JavaScript para proporcionar una «máscara» de entrada, de modo que el resultado final sea exactamente lo que queremos (123-456-7890 en este caso, pero podría ser cualquier cosa).

¡Disfrutar!

Una vez que el fragmento a continuación esté activo, la entrada del teléfono mostrará un marcador de posición «123-456-7890» y también, una vez que comience a escribirlo, se mantendrá en ese formato y no le permitirá cambiarlo. Tampoco le permitirá ingresar más de 12 caracteres porque hemos establecido una longitud máxima.

Fragmento de PHP: marcador de posición de teléfono y máscara de entrada @ WooCommerce Checkout

/**
 * @snippet       Phone Mask @ WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_checkout_fields', 'bbloomer_checkout_phone_us_format' );
   
function bbloomer_checkout_phone_us_format( $fields ) {
    $fields['billing']['billing_phone']['placeholder'] = '123-456-7890';
    $fields['billing']['billing_phone']['maxlength'] = 12; // 123-456-7890 is 12 chars long
    return $fields;
}
 
add_action( 'woocommerce_after_checkout_form', 'bbloomer_phone_mask_us' );
 
function bbloomer_phone_mask_us() {
   wc_enqueue_js( "
      $('#billing_phone')
      .keydown(function(e) {
         var key = e.which || e.charCode || e.keyCode || 0;
         var phone = $(this);         
         if (key !== 8 && key !== 9) {
           if (phone.val().length === 3) {
            phone.val(phone.val() + '-'); // add dash after char #3
           }
           if (phone.val().length === 7) {
            phone.val(phone.val() + '-'); // add dash after char #7
           }
         }
         return (key == 8 ||
           key == 9 ||
           key == 46 ||
           (key >= 48 && key <= 57) ||
           (key >= 96 && key <= 105));
        });
         
   " );
}

Fragmento de PHP: marcador de posición de teléfono y máscara de entrada @ WooCommerce Checkout

(adsbygoogle = window.adsbygoogle || []).push({});

Deja una respuesta Cancelar la respuesta