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

Photo of author
Written By geekerhub

Lorem ipsum dolor sit amet consectetur pulvinar ligula augue quis venenatis. 

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’


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