WooCommerce: Cómo mostrar los errores en el pago junto al campo con error

La verdad es que no sabía cómo titular esta guía, así que te lo explico…

Índice de contenidos

El problema

Si utilizas WooCommerce habrás comprobado que cuando se cometen errores en alguno de los campos de la página de finalizar compra estos no aparecen junto al campo con el error sino todos juntos en la parte superior de la página.

Esto supone un importante problema de usabilidad y también de accesibilidad, porque los usuarios no consiguen finalizar la compra, y además no es nada obvio que los errores estén arriba todos juntos.

La única parte buena de ello es que, al menos, en la mayoría de los temas la página hace scroll ella solita hacia arriba, para que veas los errores.

Así que, digo yo, ¿no sería mejor que los mensajes de error se mostrasen directamente junto al campo con cada error, integrados, para que el usuario no tenga que mirar la lista de errores, repasar los campos y así todo el rato?

Vamos a ello, porque puedes provocar este comportamiento de mostrar integrados los errores al finalizar compra.

La solución

Vamos a solucionar este problema en dos partes, y la primera es un poco de  PHP.

Lo que haremos será buscar todos los campos que tengan la tag de required (obligatorios) y, justo antes de la tag de cierre, añadiremos un span con el error.

/* Errores junto al campo con el error */
add_filter( 'woocommerce_form_field', 'ayudawp_etiqueta_error_pago', 10, 4 );
function ayudawp_etiqueta_error_pago( $field, $key, $args, $value ) {
if ( strpos( $field, '</label>' ) !== false && $args['required'] ) {
$error = '<span class="error" style="display:none">';
$error .= sprintf( __( '%s es un campo obligatorio.', 'woocommerce' ), $args['label'] );
$error .= '</span>';
$field = substr_replace( $field, $error, strpos( $field, '</label>' ), 0);
}
return $field;
}

Por defecto está configurado para que sea display:none, pero luego lo mostraremos como un bloque visible mediante CSS, en el segundo paso.

Una vez mostramos los span en la página solo queda mostrarlos cuando el usuario haga el pedido pero olvide rellenar algún campo obligatorio.

Esto normalmente se realiza con una validación mediante JavaScript que hace WooCommerce, en concreto una clase CSS llamada woocommerce-invalid-required-field, que se aplica cuando un campo obligatorio no se rellena.

Y gracias a que WooCommerce ya aplica este JavaScript que añade la clase CSS no tenemos que hacerlo nosotros, solo tenemos que personalizar la clase, así por ejemplo:

.woocommerce-checkout p.woocommerce-invalid-required-field span.error {
color: #ff2a00;
display: block !important;
font-weight: bold;
}

Y lo que obtendremos será lo siguiente…

No eliminamos la lista de errores de la parte superior de la página pero es mucho más claro para el usuario qué campos son los que tiene que completar para poder hacer el pedido.

Con unas pocas de líneas de código mejoramos mucho la usabilidad en la página de finalizar compra, y también la accesibilidad, porque los lectores en pantalla tendrán el error justo en el campo a rellenar.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

7 comentarios en “WooCommerce: Cómo mostrar los errores en el pago junto al campo con error”

  1. Muy buena personalización que voy a intentar aplicar. Me falta confirmar si lo que imagino es cierto:
    1.- El primer snippet ¿se colocaría en el archivo functions.php del tema hijo (en CodeSnippet en mi caso)?
    2.- El segundo snippet ¿debe colocarse en el archivo style.css del tema hijo? ¿va insertado junto al primero en el functions.php ó CodeSnippet?
    Un saludo.

      1. ¡Qué bien puesto el nombre de éste blog! Muchísimas gracias, amigo. Asombrado por la velocidad de tú respuesta.
        Habrá membresías de pago que no lleguen a la suela de los zapatos a la ayuda que proporcionas por aquí.
        Mi abuela diría que eres «la purga de Benito» (por la rapidez en responder) y «el pan de los pobres» (por la generosidad).
        Te debo un jamón (por lo menos una gallina). Si le hago funcionar al invento y salgo del ruinón cuenta con ello.

  2. Fernando como estas?. Te hago una consulta, Tenes idea como puedo poner un buscador desplegable usando elementor pro?. Me refiero a una lupa que al hacer hover se extienda el formulario/input. Te agradezco la ayuda

  3. Hola.

    Pero como hago para insertar el código php?
    Tienes un ejemplo de cómo hacerlo?

    Como configurar el functions.php del tema hijo ?

    Agradezco la ayuda.

    Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido