How To Show Error Message On WooCommerce Checkout Page


Updated on:

display error message

By default, WooCommrece Display 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;

Relative blog : How To Change Return To Shop Link in woocommerce | Geekerhub

3 thoughts on “How To Show Error Message On WooCommerce Checkout Page”

  1. Monitor phone from anywhere and see what’s happening on target phone. You will be able to monitor and store call logs, messages, social activities , images , videos, whatsapp and more. Real-time monitoring of phones, No technical knowledge is required, no root is required.

  2. You can use parent management software to guide and supervise children’s behavior on the Internet. With the help of the following 10 smartest parent management software, you can track your child’s call history, browsing history, dangerous content access, apps they install, etc.

Leave a Comment