Si está familiarizado con el próximo editor de Gutenberg, sabrá que ha habido un millón de dudas con respecto a la accesibilidad. Por lo tanto, la accesibilidad es importante, y WooCommerce también tiene algunos problemas.
Una solución de accesibilidad interesante es el sistema de notificación de error en la página de pago. Sí, el error de los campos faltantes se muestra en la parte superior de la página al intentar hacer un pedido, pero una vez que se desplaza hacia abajo para llenarlos nuevamente, es posible que necesite un recordatorio de qué campo falta sin tener que desplazarse nuevamente Para verificar el error.
Esto es bastante difícil de explicar, así que eche un vistazo a la captura de pantalla. La sugerencia aquí también es agregar notificaciones de error «en línea» («Xyz es un campo requerido«) Justo encima de cada campo, para que el usuario sepa exactamente qué hacer. Entonces, veamos cómo se hace.
Fragmento Parte 1 (PHP): Imprima los errores de campo requeridos en línea @ WooCommerce Checkout
La primera parte es una solución de PHP. Básicamente, buscamos todos esos campos que tienen una etiqueta y se requieren, y justo antes de la etiqueta de la etiqueta de cierre agregamos un tramo que contiene el error.
De manera predeterminada, esto se establece como pantalla: Ninguno, que se mostrará como bloque y, por lo tanto, se hará visible a través de CSS más adelante (fragmento 2).
/** * @snippet Add Inline Field Error Notifications @ WooCommerce Checkout * @how-to businessbloomer.com/woocommerce-customization * @author Rodolfo Melogli, Business Bloomer * @compatible WooCommerce 5 * @community https://businessbloomer.com/club/ */ add_filter( 'woocommerce_form_field', 'bbloomer_checkout_fields_in_label_error', 10, 4 ); function bbloomer_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; }
Fragmento Parte 2 (CSS): Muestre los errores de campo requeridos en línea @ WooCommerce Checkout
Ahora que esos tramos se imprimen en la página, necesitamos mostrarlos en caso de que los usuarios vayan a realizar el pedido, pero olviden completar un campo requerido.
Esto generalmente se hace a través de la validación de JavaScript … pero WooCommerce ya lo hace por nosotros 🙂
WooCommerce JS agrega una clase de CSS llamada «WooCommerce-inválido-campo requirido» a un campo requerido que no se completa.
Cada campo obtendrá esta clase y generará un error. Entonces, afortunadamente, no necesitamos JS para mostrar esos tramos ocultos, ¡simplemente podemos apuntar a la clase!
.woocommerce-checkout p.woocommerce-invalid-required-field span.error { color: #e2401c; display: block !important; font-weight: bold; }
