Standaard wordt een foutmelding in de WooCommerce checkout bovenaan de pagina getoond. Met deze code + stukje css zorg je ervoor dat de foutmelding direct bij het juiste veld staat.


/**
* @snippet Add Inline Field Error Notifications @ WooCommerce Checkout
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=86570
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.6
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_filter( 'woocommerce_form_field', 'checkout_fields_in_label_error', 10, 4 );

function 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;
}
.woocommerce-checkout p.woocommerce-invalid-required-field span.error {
color: #e2401c;
display: block !important;
font-weight: bold;
}