How to Display Required Field Errors Inline at WooCommerce Checkout

To display required field errors inline at WooCommerce checkout, filter woocommerce_form_field to inject a hidden error span below each required field, then reveal it with CSS whenever WooCommerce marks that specific field invalid — giving customers an accessible reminder without scrolling back to the top of the page.

Why Inline Errors Improve Checkout Accessibility

• The default WooCommerce error summary only appears at the top of the page, easy to lose track of while scrolling
• Inline errors next to the actual field are far more accessible and reduce confusion for all users
• It’s a small, low-risk accessibility improvement that pairs naturally with existing checkout validation

Step 1: Inject a Hidden Error Span Into Each Required Field

/** Add a hidden inline error message below each required checkout field */
add_filter( 'woocommerce_form_field', 'add_inline_error_span_to_required_fields', 10, 4 );

function add_inline_error_span_to_required_fields( $field, $key, $args, $value ) {

    if ( strrpos( $field, '</p>' ) !== false && ! empty( $args['required'] ) ) {
        $error_span  = '<span class="inline-required-error" style="display:none">';
        $error_span .= sprintf( '%s is required.', esc_html( $args['label'] ) );
        $error_span .= '</span>';

        // After the input, not inside the label: WooCommerce's address script rewrites address field labels on page load
        $field = substr_replace( $field, $error_span, strrpos( $field, '</p>' ), 0 );
    }

    return $field;
}

Step 2: Reveal the Error With CSS When the Field Is Invalid

.woocommerce-invalid .inline-required-error {
    display: block !important;
    color: #c0392b;
    font-size: 0.85em;
    margin-top: 4px;
}

WooCommerce already adds a .woocommerce-invalid class to the field wrapper when validation fails, so this CSS rule only needs to target that existing state — no extra JavaScript required.

Troubleshooting

The Error Span Never Shows

Confirm the field’s row ends with a closing </p> tag in its rendered HTML — some custom field types render differently and won’t match the strrpos() check, requiring a small adjustment to the condition. The span goes after the input rather than inside the label, because WooCommerce’s address script rewrites the labels of address fields when the page loads.

The Error Text Duplicates the Default Top-of-Page Summary

This is expected and generally fine for accessibility — if it feels redundant, consider shortening the default summary message rather than removing the inline errors, since the inline version is more actionable for the user.

Frequently Asked Questions

Conclusion

Displaying required field errors inline at WooCommerce checkout takes a PHP filter and a matching CSS rule that reuses WooCommerce’s existing invalid-field class — a small accessibility win that helps customers fix mistakes without hunting for the error message at the top of the page.

See also How to Display and Save a WordPress User Field at WooCommerce Checkout. Then read How to Customize WooCommerce Checkout Fields.

Prefer no code? All-in-One Utilities Woo Add-on adds over 50 WooCommerce features, so you can switch them on without code.