Una de las opciones que puede ser más frustrante a la hora de realizar un pago en WooCommerce es la falta de accesibilidad sobre los errores que se generan cuando se intenta procesar un pago y este no se procesa.
Uno de estos grandes problemas de accesibilidad como mencionamos es que a la hora de realizar un pago si tenemos algún campo que nos hace falta o está escrito de forma incorrecta al procesar WooCommerce muestra todos los errores en la parte superior del formulario de pago y no precisamente donde se está marcando el error.
Este problema de accesibilidad sobre todo en dispositivos móviles puede ser un poco frustrante para el usuario, ya que tiene que hacer scroll hasta arriba para ver que está fallando.
En esta entrada veremos cómo podemos solucionar este fallo y mejorar la usabilidad de nuestro sitio para los usuarios a la hora de pagar.
Tabla de contenidos
¿Qué es la usabilidad en un sitio web?
Es probable halláis escuchado antes este término, ¿pero conocemos exactamente a que se refiere?, más allá de su significado principal el cual es la facilidad de uso de cualquier herramienta, sitio web o aplicación para un usuario, como por ejemplo que tan fácil es para un usuario ingresar a un sitio web y poder realizar alguna tarea especifica que desee.
Crear un sitio web que permita la facilidad al usuario de crear sus tareas o navegar en ella es muy importante, ten en cuenta que un sitio web difícil de utilizar o poco amigable tiende a tener un gran porcentaje de abandono de usuario en nuestro sitio web, es por esto por lo que es sumamente importante mantener mejorado nuestro sitio para ofrecer a nuestros usuarios un sitio web accesible y navegable.
Una vez tenemos claro lo que significa esto y su importancia podremos comenzar a revisar nuestro sitio web y comenzar a encontrar estos detalles que, aunque parecen ser muy mínimos pueden tener un alto impacto en los clientes que visitan nuestro sitio web y desean comprar algún producto o servicio que ofrecemos.
¿El problema de las validaciones en WooCommerce y la usabilidad?
Si has estado utilizando WooCommerce hasta ahora sabrás que si lo utilizas y cometes algún error en alguna de los campos del formulario de la página de finalizar compra estos no aparecen junto al campo que se tiene el error, sino todos juntos en la parte superior del formulario, podemos ver un ejemplo de esto en la siguiente imagen.
Esto es gran fallo de usabilidad y accesibilidad para los clientes, ya que algunas veces el usuario no consigue finalizar la compra porque estos mensajes no son muy obvios y puede ser un poco frustrante para el leer línea por línea para ver donde se está mostrando el error o en que campo específicamente está cometiendo el error.
Basados en este problema veremos como mejorar la usabilidad de nuestros clientes en nuestra tienda y ofrecerles una experiencia de compra agradable y satisfactoria.
Para esto utilizaremos dos códigos, el primero, ira en nuestro archivo function.php y se encargará de buscar entre los campos de nuestro formulario y añadir una etiqueta con el mensaje de WooCommerce, la segunda parte será un código CSS nos permitirá mostrar la etiqueta de forma correcta junto al campo.
Mostrando los mensajes de error en encima de los campos en WooCommerce.
Para poder añadir esta característica adicional que nos ayudará a mejorar la usabilidad de nuestro sitio web estaremos utilizando el archivo function.php de nuestro tema.
Añadiendo el código en el function.php de nuestro tema
Para comenzar a añadir esta característica primero necesitamos ingresar a nuestra cuenta de cPanel/wePanel y localizar el archivo function.php de nuestro tema.
Una vez estamos dentro de nuestra cuenta de hosting necesitamos acceder a Administrador de archivos public_html y dentro de este directorio ingresar a la carpeta donde se encuentran los archivos de nuestro sitio web.
Dentro de este directorio necesitamos ubicar la ruta wp-content/themes/tu_tema seleccionar el archivo function.php y editarlo.
En este archivo añadiremos la primera parte del código que les dejo a continuación.
/* Mostrar Errores junto al campo con el error */
add_filter( 'woocommerce_form_field', 'blogweb_checkout_fields_in_label_error', 10, 4 );
function blogweb_checkout_fields_in_label_error( $field, $key, $args, $value ) {
if ( strpos( $field, '' ) !== false && $args['required'] ) {
$error = '';
$field = substr_replace( $field, $error, strpos( $field, '' ), 0);
}
return $field;
}
Esta primera parte del código lo que hará de buscar por todos los campos que son requeridos en nuestro formulario y antes de la etiqueta de cierre del campo añadir el mensaje adicional que contiene el error.
Añadiendo el código CSS en las opciones de nuestro tema.
Una vez tenemos el código anterior añadido en nuestro archivo function.php lo siguiente será mostrar el mensaje en el campo haciendo uso de un código CSS, para esto lo que necesitamos hacer es acceder a la administración de nuestro sitio web y luego al apartado de Apariencia Personalizar CSS Adicional y pegar el siguiente código.
Te dejo el código a continuación para que los copies y pegues en tu sitio web.
.woocommerce-checkout p.woocommerce-invalid-required-field span.error {
color: #93003c;
display: block !important;
font-weight: bold;
}
Con este código estamos haciendo uso de una validación mediante Javascript que hace WooCommerce utilizando la clase llamada woocommerce-invalid-required-field que se aplica cuando un campo obligatorio en el formulario se rellena.
De esta forma los errores se mostrarán directamente en la línea superior del campo que se está validando de nuestro formulario.
Conclusiones:
Como puedes ver mejorar la funcionalidad y experiencia del usuario en nuestro sitio web algunas veces puede no ser una tarea sencilla si no sabemos como podemos hacerlo, afortunadamente WooCommerce nos permite añadir cualquier característica adicional que necesitamos extendiendo las funcionalidades personalizando nuestro sitio web de la forma que necesitemos.
Mantener un sitio web de fácil acceso y navegación puede ser una gran diferencia si queremos tener un sitio web con una buena experiencia para los clientes y usuarios que la visitan.
Si deseas que otras características y funcionalidades puedes añadir en tu tienda puedes darle un vistazo a los diferentes artículos que tenemos sobre WooCommerce.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
