WooCommerce: mostrar errores de campo obligatorios "en línea" al finalizar la compra
Si está familiarizado con el próximo editor de Gutenberg, sabrá que ha habido un millón de dudas con respecto a la accesibilidad. Entonces, la accesibilidad es importante, y WooCommerce también tiene algunos problemas.
Una solución de accesibilidad interesante es el sistema de notificación de errores en la página de pago. Sí, el error de campos faltantes se muestra en la parte superior de la página cuando intenta realizar un pedido, 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.
Esto es bastante difícil de explicar, así que echa un vistazo a la captura de pantalla. La sugerencia aquí es agregar también notificaciones de error "en línea" (" XYZ es un campo obligatorio ") 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, vamos a buscar todos aquellos campos que tienen una etiqueta y son obligatorios, y justo antes de la etiqueta de cierre, agregamos un intervalo que contiene el error.
De forma predeterminada, esto se establece como display:none, 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 Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @compatible WooCommerce 5 * @donate $9 https://businessbloomer.com/bloomer-armada/ */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, '</label>' ) !== false && $args['required'] ) { $error = '<span class="error" style="display:none">'; $error .= sprintf( __( '%s is a required field.', 'woocommerce' ), $args['label'] ); $error .= '</span>'; $field = substr_replace( $field, $error, strpos( $field, '</label>' ), 0); } return $field;} |
Fragmento Parte 2 (CSS): Mostrar errores de campo obligatorios en línea @ WooCommerce Checkout
Ahora que esos lapsos están impresos en la página, debemos mostrarlos en caso de que los usuarios realicen el pedido pero olviden completar un campo obligatorio.
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 CSS llamada "woocommerce-invalid-required-field" a un campo obligatorio 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;} |
Deja una respuesta