This members-only tutorial provides the steps to implement this tutorial in Oxygen with a few additions to replace the empty fields' notices group on WooCommerce checkout page with inline messages.

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Print Required Field Errors Inline @ WooCommerce Checkout


 * @snippet       Add Inline Field Error Notifications @ WooCommerce Checkout
 * @how-to        Watch tutorial @
 * @sourcecode
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.6
 * @donate $9
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;

(PHP from

Step 2

Edit your Checkout Page with Oxygen.

Add a Section and inside that Checkout component [+Add > WooCommerce > Checkout (under WooCommerce Pages)].

Add a Code Block under/below the Section.


	// echo "hello world!";


This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: