How you doing?
I’m well, finally back at work after a huge cold. This weird Italian weather is killing me… never thought I would have said this after having lived 11 years in Ireland!
Anyway, let’s get back to business. Our Wednesday appointment with “WooCommerce Weekly” is back!
Here comes a series of WooCommerce tutorials, tips and workarounds put together by yours truly so that you can learn and test something new.
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. Here’s the full tutorial:
https://businessbloomer.com/woocommerce-display-required-field-errors-inline-checkout/
