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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
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.
Ok a lo primero, en cuanto al CSS puedes ponerlo directamente en el personalizador
¡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.
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
Elementor no tiene esa funcionalidad, ni de lejos
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
De eso he hablado en varias ocasiones, aquí te dejo enlace:
https://ayudawp.com/que-es-y-como-se-usa-el-fichero-functions-php/
Fernando cordial saludo,
Primero que todo excelente tu pagina web y sobre todo la funcionalidad que tiene para las demas personas
1. Queria preguntarte si ese mismo codigo sirve para la caja de chequeo de «Terminos y condiciones»
2. Tienes alguna ayuda sobre el mensaje de error cuando el usuario ya esta registrado (email) o cuando digita en finalizar compra mal la clave
Muchas gracias
Hola.
Excelente artículo.
Hay algunos campos que no muestran el error, por qué será? Por ejemplo: En Dirección, Ciudad, Código Potal, entre otros. En ninguno de estos campos muestra el nuevo mensaje de error.
Muchas gracias.
Buenas, es una gran idea mostrarlo así.
Lo que pasa es que me sigue pareciendo un engorro que aparrezca el error también arriba.
– ¿Hay alguna forma de quitar el mensaje de error en la parte superior?
– ¿Existe forma de no indicar el campo para decir que es requerido? A veces queda por ejemplo: «Telefono Telefono es un campo requerido»
¡Mil gracias!
muchas gracias muy útil.
Tengo 2 errores:
1-aparecen todos los campos como requerido aunque estén rellenos:
Facturación Nombre es un campo requerido.
Facturación Apellidos es un campo requerido.
Facturación País / Región es un campo requerido.
Facturación Dirección de la calle es un campo requerido.
Facturación Código postal es un campo requerido.
Facturación Localidad / Ciudad es un campo requerido.
Facturación Provincia es un campo requerido.
Facturación Teléfono es un campo requerido.
Facturación Dirección de correo electrónico es un campo requerido.
2_ esta mensaje me parece 3 veces en pantalla
Agradezco la ayuda que puedan prestarme.