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

WooCommerce Checkout Fields are not showing the correct error message

我在 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也可以

[更新 1] -- 添加了更多有关错误生成方式的信息。

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

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


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

您在 First Name in "Billing First Name is a required field." 等错误中看到的 Field names 实际上是 labels。因此,如果您的结帐字段数组没有为任何字段设置 ['label']属性,那么您将无法获得正确的完整错误。

在当前情况下,我假设您已删除 ['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 is not by filtering output and replacing the English text to your language. Danish seems to be near 100% done both for Wordpress and WooCommerce

的最佳方式

如果您已将安装语言选择为丹麦语,则无需像现在这样添加丹麦语占位符。

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

相反,您可以尝试使用特定的 CSS 规则来隐藏帐单 <label> 标签,使用:

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

这继续 styles.css 您的活动子主题(或活动主题)的文件...

应该可以。这样您将获得正确的错误消息。