Posted on

WooCommerce: Display Required Field Errors “Inline” @ Checkout

If you’re familiar with the upcoming Gutenberg editor, you’ll know there have been a million doubts in regard to accessibility. So, accessibility matters – and WooCommerce has a few issues as well.

One interesting accessibility fix is the error notification system on the checkout page. Yes, the missing fields error show on top of the page when trying to place an order, but once you scroll down to fill them out again you might need a reminder of which field is missing without having to scroll back up to check the error.

This is quite difficult to explain, so take a look at the screenshot. The suggestion here is to also add “inline” error notifications (“XYZ is a required field“) right above each field, so that the user knows exactly what to do. So, let’s see how it’s done.

Displaying inline “required field” errors @ WooCommerce Checkout

Snippet Part 1 (PHP): Print Required Field Errors Inline @ WooCommerce Checkout

The first part is a PHP workaround. We basically go searching for all those fields that have a label and are required, and just before the closing label tag we add a span containing the error.

By default, this is set as display:none, which will be displayed as block and therefore made visible via CSS later on (Snippet 2).


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

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

function bbloomer_checkout_fields_in_label_error( $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;
}

Snippet Part 2 (CSS): Display Required Field Errors Inline @ WooCommerce Checkout

Now that those spans are printed on the page, we need to display them in case users go place the order but forget to fill out a required field.

This is usually done via JavaScript validation… but WooCommerce already does that for us ๐Ÿ™‚

WooCommerce JS adds a CSS class called “woocommerce-invalid-required-field” to a required field that is not filled out.

Each field will be getting this class and generate an error. So, thankfully, we need no JS for showing those hidden spans, we can simply target the class!


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

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

15 thoughts on “WooCommerce: Display Required Field Errors “Inline” @ Checkout

  1. Rodolfo,

    I’m just commenting because I’m on mobile and don’t see any other way to subscribe to your blog!

    Maybe I’m missing something, but I think it could be a bit more obvious if getting readers is one of your goals

    1. Joe, thanks for your comment! Yes you’re right, the pop up is disabled on mobile. You can join the newsletter by watching any of my free videos e.g. https://businessbloomer.com/woocommerce-customization-hangout/

  2. Rodolfo, You made my day. Thanks for providing this information at the right time.

    1. Thank you Chuks ๐Ÿ™‚

  3. Thank you for the code Rodolfo, unfortunately it does not work on my theme (Flatsome).

    On your code I can see that the errors should be under .woocommerce-checkout p.woocommerce-invalid-required-field span.error but that is not the case for me. In my case, the error notices are displayed under .woocommerce-notices-wrapper .woocommerce-NoticeGroup-checkout ul. Here is the code from the source:

    Billing First name is a required field.
    …..
    …..
    Create account password is a required field.
    Please read and accept the terms and conditions to proceed with your order.

    Any idea on how to make this work?

    1. Resending the coded html as the first one is not showing right:

       <div class="woocommerce-notices-wrapper">
      <div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout">
      <ul class="woocommerce-error" role="alert">
      <li><strong>Billing First name</strong> is a required field.</li>
      ....
      ....
      <li><strong>Create account password</strong> is a required field.</li>
      <li>Please read and accept the terms and conditions to proceed with your order.</li></ul></div></div>
    2. Hey Kensai, my snippet does not affect the notice that is above the Checkout – it adds errors above each field instead ๐Ÿ™‚

    3. My mistake I can now see what it should do. Still, on Flatsome it does not work as intended. If I forget to add a field, and mouse click on checkout it does nothing. But, if I press Enter instead of checkout then all “forgotten” fields show up with red.

    4. Flatsome probably has a customized WooCommerce checkout template, so you’ll need to re-adapt the coding. Sorry ๐Ÿ™‚

  4. Rodolfo,

    Very nice! I implemented on two of my ecommerce sites.

    Thank you,

    Javier

    1. Awesome ๐Ÿ™‚

  5. Rodolfo, you are my hero! I’ve learned more about woocommerce structure from your code than any other resource. Keep up the fine work! We’ve had some customers complaining about problems with the orders, I bet half just missed a field and didn’t see which field it was. This is a beautiful addition. Thanks again!

    1. Thank you Ed ๐Ÿ™‚

  6. Thank you for this. I had on this weeks to do list to address this very issue. Uncanny timing!! It has to be hands down one of the most popular complaints we have from woocommerce customers.

    One other thing I’d like to add that’s just as popular, perhaps fodder or a second post or addendum to this one.

    The “Checkout Process Spinny Indicator “graphic, (I don’t know what it’s called) is also at the top of the screen and is completely out of view for laptops and smaller screens when someone click the checkout button. I always felt that that graphic should be beside or above the button so you can see it in action. Otherwise, so many people complain that they didn’t know anything happened after pressing it. Would that be part of this code or would that be a different approach?

    Great article as always. Thanks again!

    Blue

    1. Hey Blue, thanks a lot ๐Ÿ™‚ You could just try to center align that spinner on the screen with CSS – not 100% sure. It’s not related to this though, so if you figure something out I’ll create another post. Cheers!

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.