12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Nov 14, 2019

Displaying Required Field Errors Inline at WooCommerce Checkout in Oxygen

Sridhar Katakam

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 @ 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;

(PHP from https://businessbloomer.com/woocommerce-display-required-field-errors-inline-checkout/)

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 ($47/month or $599 one-time).

Already a member? Log in below or here.