WooCommerce: Show Required Field Errors Inline on Checkout Page.

How To Show Required Field Errors Inline on Checkout Required Fields.

On WooCommerce checkout page all error are shown on top of form as we can see this in image.

Before:

Before Adding inline error to required field first we need to get all the fields that are required and have labels.
After getting required field we need to add error message for it .

Now the question is how can we add error message to it?

We will do this in two steps:
1. Add Span Tag With Error Message, and set display none by default.
2. Show This Error When Form Is Submitted.

1. Add Span Tag With Error Message, and set display none by default.

We will use ‘woocommerce_form_field’ hook for it. Using this hook we can add a span containing error, before the closing label tag.

By default, this is set as display:none, which will be displayed via CSS later.

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

2. Show This Error When Form Is Submitted.

When form is submitted, the field which has an error ,WooCommerce will add “woocommerce-invalid-required-field” class to the parent “p” tag of input field. so we can use this as parent class and add css “display: block !important;” to show error msg.

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

After:

Enjoy