How to show error message as inline on WooCommerce checkout page?

By default, WooCommrece shows the error message at the top of the page. As a user, it is difficult to remind which field is still missing while filling the fields. To avoid this difficulty, we can show the error message before the respective field.

We can do this using filter of WooCommerce and the name of the filter is ‘woocommerce_form_field’

Before
Before
After
After

By default set display none error message and make this visible using CSS. Put this code snippet in theme’s functions.php file.

function geeker_checkout_fields_inline_error( $field, $key, $args, $value ) {
    if ( strpos( $field, '' ) !== false && $args['required'] ) {
       $error = '';       $error .= sprintf( __( '%s is a required field.', 'woocommerce' ), $args['label'] );       $error .= '';
       $field = substr_replace( $field, $error, strpos( $field, '' ), 0);
    }
    return $field;
 }
 add_filter( 'woocommerce_form_field', 'geeker_checkout_fields_inline_error', 10, 4 );

Put this css code snippet in theme’s style.css file.

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

Leave a Comment

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