WooCommerce: Show Required Field Errors Inline on Checkout Page

For Showing inline required error , first we search all fields that are required and have labels , and before the closing label tag we add a span containing error.
By default, this is set as display:none, which will be displayed via CSS later.

Before:
null


function CheckoutFieldsInlineError( $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;
}
add_filter( 'woocommerce_form_field', 'CheckoutFieldsInlineError', 99, 4 );

<style>
.woocommerce-checkout p.woocommerce-invalid-required-field span.error {
color: #e2401c;
display: block !important;
font-weight: bold;
}
<style>

After:
null

Enjoy

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top