WooCommerce 结帐字段未显示正确的错误消息

Question

我在 WooCommerce 结帐时收到模糊的错误消息，因为我已删除所有标签。有没有办法在使用 PHP 隐藏标签时显示正确的错误消息？或者有没有办法用 CSS 隐藏结帐标签，但不必隐藏所有标签，因为其中一些标签是相关的（条款和条件、时事通讯等）。

我们使用下面的代码来隐藏标签：

// Fjern labels fra checkout
add_filter('woocommerce_checkout_fields','custom_wc_checkout_fields_no_label');

// Our hooked in function - $fields is passed via the filter!
// Action: remove label from $fields
function custom_wc_checkout_fields_no_label($fields) {
    // loop by category
    foreach ($fields as $category => $value) {
        // loop by fields
        foreach ($fields[$category] as $field => $property) {
            // remove label property
            unset($fields[$category][$field]['label']);
        }
    }
     return $fields;
}

CSS 也可以工作

Answer 1

相反，您可以尝试使用特定的 CSS 规则来隐藏帐单 <label> 标记，方法是：

.woocommerce-billing-fields label{
    display:none;
}

这会出现在您的活动子主题（或活动主题）的 styles.css 文件中……

它应该工作。这样您将获得正确的错误消息。

Answer 2

[更新 1] -- 添加了更多关于如何生成错误的信息。

[更新 2] -- 解释了如何为 WooCommerce 激活特定语言区域

[更新 3] -- 添加 CSS 规则，因为原始问题已被修改。

---

错误是在class-wc-checkout.php 的validate_posted_data 函数内部生成的。

您在“Billing First Name is a required field.”中的 First Name 等错误中看到的Field names 实际上是labels。因此，如果您的结帐字段数组没有为任何字段设置['label']property，那么您将不会得到正确的完整错误。

在当前情况下，我假设您已删除 ['label'] 属性以隐藏前端标签并仅显示 ['placeholders']。如果您想在前端隐藏标签，请使用 CSS 样式。

/*
 * CSS Styles are from .visuallyhidden rule of
 * HTML5Boilerplate for proper accessibility. 
 * 
 * @Link: https://github.com/h5bp/html5-boilerplate/blob/6.0.1/dist/doc/css.md#visuallyhidden
 */
.woocommerce-shipping-fields__field-wrapper label,
.woocommerce-billing-fields__field-wrapper label {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

此规则将仅且仅针对帐单和运输字段标签。

我正在使用来自 HTML5Boilerplate 的 .visuallyhidden utility class 的代码。这是以视觉方式隐藏内容的最便捷方式，但不适用于屏幕阅读器或其他辅助技术。

---

为什么你的方法是错误的？

localize WooCommerce 的最佳方法不是过滤输出并将英文文本替换为您的语言。 Wordpress 和 WooCommerce 的丹麦语似乎已接近 100%

如果您已将安装语言选择为丹麦语，则不应像现在一样要求您添加丹麦语占位符。

按照此链接中的步骤为 WooCommerce 进行丹麦语本地化：https://docs.woocommerce.com/document/woocommerce-localization/#section-4