WooCommerce : Personalizar pagina de PAGO o CHECKOUT

Mostrar los errores debajo de los campos del formulario de la pagina de PAGO o CHECKOUT 

Autor : https://ayudawp.com/woocommerce-errores-pago-integrados/

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.

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;
}