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.6
 * @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 snippet?

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 files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

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 Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

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

  1. Hey, what a great find!
    thank you for the info, can you help me figure out how do I remove the whole list of errors at the top part of the form?
    I.E.
    Billing Last name is a required field.
    Billing Street address is a required field.
    Billing Postcode / ZIP is a required field.
    Billing Phone is a required field.
    Billing Email address is a required field.
    etc etc…

    Thank you!

    1. Hello Yig, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Thanks! I’ve used this code to display inline errors.

    I am facing one problem like the inline errors are not displaying for some of the fields (Like Street address, Town / City, Postcode / ZIP). Can you please let me know about it?

    Thanks,
    Kakshak

    1. Hi Kakshak thanks for your comment! Which fields are not working, and for which country?

      1. Hi,

        I added the following to my functions file to de-register the problematic script (wc-address-i18n):

        function deregister_woocommerce_assets() {
            // array of script handlers that we can disable so that we can 
            // build them with grunt manually
            $scripts_to_remove = array(
                'wc-address-i18n',
            );
        
            foreach ($scripts_to_remove as $script) {
                wp_deregister_script($script);
                wp_register_script($script, null, array('jquery'), null, true);
            }
        }
        add_action('wp_print_scripts', 'deregister_woocommerce_assets', 100);
        

        All works perfectly now – Thank you

        1. Awesome!

  3. Rodolfo,

    I have the your solution but have found that the inline validations only work for the woocomerce form fields and not for the billing fields.
    Can you help me out in also adding the inline validations to the billing fields on the checkout form.

    Thanks,
    RIya

    1. Hi Riya, this will work for all fields that use “woocommerce_form_field”. If you added custom fields not using this, it won’t show.

  4. This is working, but I want to move this to be outside the . Is this possible?

    Why? Because I hide the label (I use placeholders instead) and want only the error message to appear.

    1. Hello Fabian, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  5. Thanks, great idea! Having one issue though, am using the code with a child version of Oceanwp SHOP template and the original error bar at the top still appears.

    Am assuming the style=”display:none” in the pp code should turn this off? If it should then its not happening for me ๐Ÿ™

    1. Thank you Sven ๐Ÿ™‚ Yes, this does not hide the error message above, so you’ll need to find a workaround indeed. Good luck!

  6. Hi, Super useful information, thank you so much!

    I did have a strange issue. The Street, City and Postcode/Zip would not show the inline message. But other fields such as Name, Phone and Email would work fine.

    Basically, the

    <span class="error" style="display:none">...</span>

    was not being rendered on the page for some fields. After much searching and trial and error I discovered that the javascript in the file assets/js/frontend/address-i18n.min.js is targeting specifically those fields that are having issues.

    I replaced the content of the i18n file with an empty jQuery function and all the validation messages were showing. It works for my site because it’s uni-lingual. If someone needs to use localization they might need to dig into that file and see why the issue is happening.

    I just wanted to mention that in case someone else has the same issue. I hope it will save them several hours searching for the issue.

    Thanks again for the great information!
    Kindest Regards

    1. Thank you!

    2. I have the same problem with address-i18n.min.js. Fixed this by disabling these scripts via

      wp_deregister_script ('wc-address-i18n');

      .

      Rodolfo thank you very much for the snippet.

    3. Hurried with the answer.
      “wp_deregister_script” caused other problems
      Everything worked after I added inside my JS – wc_address_i18n_params = null;

      1. Nice!

  7. Thanks as always for the great snippets!
    Is there any way to pair this with your ‘Confirm e-mail address’ snippet?
    Currently this works for missed fields, but the mismatched e-mail notice still appears at the top of the page.

    1. Hey Andy, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  8. Thanks. very useful. Is there a way to show errors when phone number field email field is not filled correctly.

    1. Hey Hajer, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  9. In phone version, my user cannot see the error, could you please use a function to slide back to the error field ?

    1. Ismail, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  10. Very nice code to use.

    It would be even a must if it also would message out the “accept the terms and conditions” part on the checkout

    1. Thanks ๐Ÿ™‚

  11. 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/

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

    1. Thank you Chuks ๐Ÿ™‚

  13. 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>
      1. Hey Kensai, my snippet does not affect the notice that is above the Checkout – it adds errors above each field instead ๐Ÿ™‚

    2. 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.

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

  14. Rodolfo,

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

    Thank you,

    Javier

    1. Awesome ๐Ÿ™‚

  15. 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 ๐Ÿ™‚

  16. 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 are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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.