石家庄wordpress建站：WooCommerce：显示必填字段错误“内联”@结帐

如果您熟悉即将推出的古腾堡编辑器，您就会知道在可访问性方面存在一百万个疑问。因此，可访问性很重要——WooCommerce 也有一些问题。

一个有趣的可访问性修复是结帐页面上的错误通知系统。是的，尝试下订单时页面顶部会显示缺少字段错误，但是一旦您向下滚动以再次填写它们，您可能需要提醒您缺少哪个字段，而无需向上滚动以检查错误。

这很难解释，所以看一下截图。这里的建议是在每个字段上方添加“内联”错误通知（“ XYZ 是必填字段”），以便用户确切知道该做什么。那么，让我们看看它是如何完成的。

片段第 1 部分 (PHP)：内联打印必填字段错误 @ WooCommerce 结帐

第一部分是 PHP 解决方法。我们基本上去搜索所有那些有标签并且是必需的字段，并且在结束标签标签之前我们添加一个包含错误的跨度。

默认情况下，这设置为 display:none，它将显示为块，因此稍后通过 CSS 可见（片段 2）。

 

/**
 * @snippet       Add Inline Field Error Notifications @ WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_form_field', 'bbloomer_checkout_fields_in_label_error', 10, 4 );
 
function bbloomer_checkout_fields_in_label_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;
}

 

片段第 2 部分 (CSS)：在 WooCommerce 结帐时内联显示必填字段错误

现在这些跨度已打印在页面上，我们需要显示它们以防用户下订单但忘记填写必填字段。

这通常是通过 JavaScript 验证完成的……但 WooCommerce 已经为我们做到了?

WooCommerce JS 在未填写的必填字段中添加了一个名为“woocommerce-invalid-required-field”的 CSS 类。

每个字段都将获取此类并生成错误。所以，谢天谢地，我们不需要 JS 来显示那些隐藏的 span，我们可以简单地定位类！

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