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