Para algunos usuarios de tu tienda online, el proceso de compra de un producto puede ser muy diferente de lo que cabría esperar.
Su conexión a internet puede ser lenta, pueden depender de un lector de pantalla por una discapacidad visual o pueden navegar con un teclado debido a la incapacidad de usar un ratón.
Una solución de accesibilidad que puedes implementar para mejorar la experiencia de compra en tu tienda online es cambiar el sistema de notificación de errores en la página de pago.
Por defecto en Woocommerce, el error de campos obligatorios se muestra en la parte superior de la página, pero una vez que se desplaza hacia abajo para completarlos nuevamente, es posible que necesite un recordatorio de qué campo falta sin tener que desplazarse hacia arriba para verificar el error.
En este tutorial te explico como cambiar los errores de validación en la página Checkout de WooCommerce para mejorar la accesibilidad en tu tienda online
Añade el siguiente código PHP a tu archivo functions.php o plugin de funcionalidades:
Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.
Ahora que cada campo muestra el error correspondiente, debemos darle el estilo visual que queramos.Esto generalmente se realiza a través de la validación de JavaScript … pero WooCommerce ya lo hace por nosotros ?
WooCommerce JS agrega una clase CSS llamada «woocommerce-invalid-required-field» a un campo obligatorio que no se completa.
Cada campo obtendrá esta clase y generará un error, simplemente podemos «apuntar» a la clase con esta linea de código CSS:
Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.
Conclusión
Con estos snippets de código ayudarás a tus usuarios a tener una experiencia de compra más inclusiva.
Cumplir con los estándares de accesibilidad , asegura que todas las personas puedan usar tu tienda online, independientemente de independientemente de las limitaciones propias del individuo o de las derivadas del contexto de uso: ya sea que necesiten asistencia, personas con discapacidad visual o no puedan usar métodos de navegación convencionales.
¿Tienes alguna pregunta o quieres mandarme una sugerencia para próximos tutoriales ó snippets?
Déjala en el formulario de soporte de la intranet.
Recuerda solo si estás suscrito, si no estás suscrito no ?