如何在woocommerce结帐页面上显示个别错误

Question

Woocommerce checkout page error messages image

目前，woocommerce显示错误如上图所示。我想在每个输入框下面显示个别错误消息，如下图所示。请帮忙。

Expected output image

Answer 1

您需要添加PHP代码段和CSS。

add_filter( 'woocommerce_form_field', 'checkout_fields_in_label_error', 10, 4 );

function checkout_fields_in_label_error( $field, $key, $args, $value ) {
   if ( strpos( $field, '</span>' ) !== false && $args['required'] ) {
      $error = '<span class="error" style="display:none">';
      $error .= sprintf( __( '%s is a required field.', 'woocommerce' ), $args['label'] );
      $error .= '</span>';
      $field = substr_replace( $field, $error, strpos( $field, '</span>' ), 0);
   }
   return $field;
}

CSS：

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