WooCommerce: Show Required Field Errors Inline on Checkout Page.

Code

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:
null

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:
null

Enjoy

Shiv kumawat

Executive Director & CEO

"Shiv kumawat is the Executive Director and CEO of Eoxys It Solution LLP and the strategic mind behind the company"s growth. His expertise in operational efficiency and team leadership empowers his colleagues to excel and innovate.”

Latest Posts

Smarter Learning for a Smarter Era: How AI Is Transforming Learning Management Systems (LMS) in 2025

  Smarter Learning for a Smarter Era: How AI IsTransforming Learning Management Systems(LMS) in 2025 From Static Systems to Intelligent…

Shafeeq Khan
October 3, 2025

AI Overviews and Google Search: What Businesses Need to Know in 2025

  AI Overviews and Google Search: What Businesses Need to Know in 2025 Entering the Age of AI Overviews The…

Shafeeq Khan
September 23, 2025

Ride Smarter: How AI Is Transforming Cab Apps in the USA for 2025

  Ride Smarter: How AI Is Transforming Cab Apps in the USA for 2025 The New Pulse of Urban Travel…

Shafeeq Khan
September 20, 2025
, ,

One response to “WooCommerce: Show Required Field Errors Inline on Checkout Page.”

Leave a Reply

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