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

Seeds of Innovation: How AI is Redefining American Agriculture in 2025

  Seeds of Innovation: How AI is Redefining American Agriculture in 2025 Planting the Future with Artificial Intelligence In 2025,…

Shafeeq Khan
September 11, 2025

Building the Future: AI Innovations and Essential Features for Healthcare Apps in 2025

  Building the Future: AI Innovations and Essential Features for Healthcare Apps in 2025 The Dawn of Intelligent Health Apps…

Shafeeq Khan
September 10, 2025

When Machines Heal: Exploring the New Frontier of AI in Mental Health Care

  When Machines Heal: Exploring the New Frontier of AI in Mental Health Care Technology Steps Into Compassion In the…

Shafeeq Khan
September 9, 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 *