如何更改 WooCommerce 结帐错误消息

已发表: 2021-12-21

您是否正在寻找在结帐时更新错误通知的方法？ 我们已经为您服务了。 在本指南中，我们将向您展示更改 WooCommerce 结帐错误消息的不同方法。

在运行在线商店时，您有时会面临冲突和错误。 我们之前已经了解了如何解决结账时出现的一般问题、添加到购物车按钮不起作用时的处理方法以及商店页面为空时的一些解决方案。 在本教程中，我们将展示更改 WooCommerce 结帐错误消息和创建自定义错误消息的不同方法。

在我们了解执行此操作的不同方法之前，让我们更好地了解自定义结帐页面上的错误消息的好处。

为什么要更改结帐错误消息？

默认情况下，WooCommerce 带有基本且非常通用的结帐错误消息。 大多数店主保持原样，因此通过更改这些信息，您可以轻松地从人群中脱颖而出。

保持结帐通知不变是一个很好的错失机会。 结账是最重要的时刻，因为它决定了您是否结束销售。 如果在结账过程中出现错误，购物者可能会退缩，您最终可能会失去销售。 通过在结帐时自定义这些错误消息，您可以充分利用它们并解释发生了什么来为客户提供安全性。

默认情况下，当缺少必填字段或客户介绍的付款方式无效时，WooCommerce 会显示错误消息。 这些是您在结帐时看到的典型错误消息：

更改 woocommerce 结帐错误消息 - 结帐错误消息

正如你所看到的，它们很清楚，但你可以用它们做更多的事情。 例如，您可以添加反映您的品牌的元素、添加更多文本等。

现在您知道了为什么要更改 WooCommerce 中的结帐错误消息，让我们看看如何完成任务。

如何更改 WooCommerce 结帐错误消息

有两种方法可以编辑 WooCommerce 结帐错误消息：

  1. 带插件
  2. 以编程方式

让我们看看这两种方法，以便您可以根据自己的技能和需求选择合适的方法。

1）使用插件自定义结帐错误消息

如果您没有编码技能或更喜欢使用插件来编辑 WooCommerce 错误消息，您可以使用 Say What 插件。 此工具可帮助您修改网站字符串，而无需编写任何代码或编辑模板文件。

免费版具有基本功能，而高级版的起价为每年 39 美元，并解锁了更高级的定制机会。

安装并激活插件后，您将在左侧看到配置选项。 从那里，您可以选择需要替换的字符串并输入目标内容。 完成后，点击Save ，就是这样。

如果您需要插件方面的帮助，您可以提出支持票或使用联系表向支持团队发送电子邮件。

2) 以编程方式编辑结帐错误消息

如果您不想使用插件并且具有编程技能，则可以使用一些代码来编辑错误消息。 在本节中，我们将向您展示如何使用 PHP 更改 WooCommerce 中的错误消息。

你可以在这里做很多事情。 对于此演示，我们将专注于在结帐页面上显示一条错误消息，而不是默认的多个警告。

为此，我们将修改主题的functions.php文件，因此在开始之前，我们建议您备份您的网站并创建一个子主题（如果您还没有）。

之后，您可以将以下代码添加到您的子主题的funtions.php文件中。 如前所述，它将在结帐页面上显示一条错误消息，而不是几条通知。

 add_action('woocommerce_after_checkout_validation', 'quadlayers', 9999, 2);
 函数四层（$fields，$errors）{
 // 如果有任何验证错误
if( !empty( $errors->get_error_codes() ) ) {

 // 忽略所有现有的错误信息
foreach( $errors->get_error_codes() as $code ) {
 $errors->remove($code);
 }
 // 显示自定义单个错误信息
$errors->add('validation', '你的自定义消息放在这里！！！');
 }
 }

如果您仔细查看代码，您会发现我们已将quadlayers设置为函数，并且您的自定义消息在这里！！！ 作为单个消息。 随意将此片段作为基础，并根据您的要求进行调整。

对于此演示，我们使用特定于站点的插件来粘贴代码，如下所示。

woocommerce 错误消息

现在检查前端，将任何产品添加到购物车，然后转到结帐页面。 如果您尝试在未填写任何必填字段的情况下完成购买，您将看到如下错误：

更改 woocommerce 结帐错误消息 - 自定义结帐错误消息

这样，您可以使用一些代码更改 WooCommerce 结帐错误消息。

如您所见，这是一个简单的示例。 我们建议您将此方法与有条件的方法结合使用，以改善客户的购物体验。 要了解更多信息，请查看我们的指南，了解如何将条件字段添加到 WooCommerce 结帐。

到目前为止，我们已经看到了几种在结帐时自定义错误消息的方法。 但是您可以做更多的事情来改善您的在线商店。 让我们看看如何添加自定义消息。

如何添加自定义结帐消息

在本节中，您将学习在结帐页面上显示自定义消息。 首先，在您的仪表板中，转到Pages > Checkout 。

结帐页面

在这里，您可以修改页面内容并显示自定义消息、添加媒体等等。 默认情况下，结帐页面包含 WooCommerce 结帐简码。

结帐简码

如果要在结帐字段之前和之后显示自定义消息，可以使用段落块。 对于此演示，我们将在结帐短代码之前添加一个段落块，在结帐短代码之后添加另一个段落块。 我们将简单地称它们为“内容之前”和“内容之后”。

内容之前和内容短代码之后

更新页面后，从前端查看结帐页面，您将看到我们刚刚添加的自定义消息。

在内容之前

字段消息后

同样，您可以将任何类型的内容（例如图像、自定义消息、优惠券代码等）添加到结帐页面。

如何更改错误消息位置

默认情况下，WooCommerce 在左侧显示错误消息。 好消息是你可以用一点 CSS 来改变它。 在本节中，我们将向您展示如何使用 CSS 片段更改错误消息的位置。

首先，登录您的WordPress 管理仪表板并转到外观 > 自定义。

wordpress 定制器

打开定制器并转到附加 CSS部分。

额外的 CSS 选项

您可以在此处添加 CSS 片段。 WordPress 定制器将在实时预览部分显示更改，因此您可以实时查看每个更新。

只需复制此代码段并将其粘贴到向导中即可。

 form.checkout {
 -ms-flex-wrap：换行；
 弹性包装：换行；
 }

 .woocommerce-NoticeGroup-checkout {
 -webkit-box-flex：1；
 -ms-flex：1 1 100%；
 弹性：1 1 100%；
 最大宽度：100%；
 宽度：100%；
 边距底部：40px；
 边距顶部：20px；
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error {
 位置：相对；
 顶部：自动；
 底部：自动；
 左：自动；
 对：自动；
 padding-right: 30px;
 z-index：自动；
 光标：默认；
 -ms 转换：无；
 变换：无；
 -webkit 转换：无；
 动画：无；
 -webkit-动画：无；
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error:after {
 内容：无；
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error.hidden-notice {
 动画：无；
 -webkit-动画：无；
 }

在本例中，我们为消息设置了底部 40 像素、顶部 20 像素、右侧 30 像素内边距和 100% 宽度的边距。 根据您的喜好调整这些值，并记住保存更改。

发布 CSS 更改

奖励：如何隐藏 WooCommerce 错误

在完成本指南之前，让我们看一下另一种选择。 如果您不想更改 WooCommerce 结帐错误消息，而是要隐藏错误消息，该怎么办？ 如果这是您的情况，本节适合您。 我们将向您展示如何使用一些代码来消除错误。

由于我们将编辑一些核心文件，因此请确保为您的网站创建完整备份，如果您还没有子主题，请使用子主题。

为了隐藏错误，我们自定义了wp-config.php文件。 首先，我们建议您将wp-config.php文件的副本下载到您的本地计算机，以便在需要时进行备份。

有几种方法可以访问 WordPress 核心文件。 对于这个演示，我们将使用一个名为 File Manager 的专用插件。 首先，在您的仪表板中，转到插件> 添加新并搜索文件管理器。 找到插件后，在您的网站上安装并激活它。

重定向 wordpress 页面 - 安装 wp 文件管理器

激活后，您将在左侧看到插件的配置。 查找wp-config.php文件。

更改 woocommerce 结帐错误消息 - wp-config.php 编辑

右键单击该文件并选择代码编辑器选项。

更改 woocommerce 结帐错误消息 - 代码编辑器

在文件中间，您将看到以下行之一：

 定义（'WP_DEBUG'，真）；

或者

定义（'WP_DEBUG'，假）；

更改 woocommerce 结帐错误消息 - wp 调试行

找到后，将该行替换为以下代码并保存文件：

 ini_set('display_errors','Off');
 ini_set('error_reporting', E_ALL );
 定义（'WP_DEBUG'，假）；
 定义（'WP_DEBUG_DISPLAY'，假）；

该代码将关闭所有错误消息。

更改 woocommerce 结帐错误消息 - 更新 wp-config.php 文件

而已！ 从现在开始，您的商店将不会显示任何错误消息。

更多自定义结账方式

最后，让我们看看进一步自定义您的 WooCommerce 结帐的其他方法。

将自定义字段添加到结帐

在本节中，我们将向您展示如何将自定义字段添加到结帐页面。

可以想象，您可以添加许多不同类型的字段。 对于此演示，我们将在结帐页面的末尾添加一个自定义复选框，让购物者可以选择订阅您的时事通讯并建立您的电子邮件列表。

只需将以下脚本粘贴到您的子主题的functions.php文件中：

 // 复选框字段
add_action('woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');

函数 quadlayers_subscribe_checkout( $checkout ) {
woocommerce_form_field（'订阅者'，数组（
'类型' => '复选框',
//'必需' => true,
'class' => array('custom-field form-row-wide'),
'label' => '订阅我们的时事通讯。'
), $checkout->get_value('订阅者'));
}

如您所见，我们在复选框旁边添加了“订阅我们的时事通讯”标签。 您可以以此为基础并将其适应您的商店。

使字段可选

另一个有趣的选项是使必填字段可选。 这样，您就可以让购物者只填写交易所需的字段。 通过这种方式，您可以加快结帐流程并改善客户体验。

例如，如果您销售虚拟产品，您可以将Billing部分中的Address字段设为可选，将以下代码粘贴到您的子主题的functions.php文件中。

 add_filter('woocommerce_billing_fields', 'wc_address_field_optional');
函数 wc_address_field_optional( $fields ) {
$fields['billing']['billing_address_1']['required'] = false; 
返回$字段； 
}

有关这方面的更多信息，请查看我们的自定义 WooCommerce 结帐指南。

结论

总之，通过编辑结帐通知，您可以在结帐中添加另一个自定义层，并从竞争对手中脱颖而出。

在本指南中，我们看到了更改 WooCommerce 结帐错误消息的两种主要方法：使用专用插件和以编程方式使用一些代码。 对于那些没有编码技能或喜欢点击几下自定义商店的人来说，使用插件是一个不错的选择。

另一方面，如果您有编程知识并且不想安装更多插件，您可以编写自己的解决方案。 这为您提供了更大的灵活性，并允许您做任何您想做的事情。 确保将代码段粘贴到您的子主题中，这样您就不会在更新父主题后丢失您的自定义。

我们希望您发现本文对您有所帮助，并了解了如何更改 WooCommerce 结帐错误消息。 如果你这样做了，请在社交媒体上与你的朋友分享这篇文章。

有关更多有趣的文章，请查看以下帖子：

  • 如何更改继续结帐文本
  • 最佳 WooCommerce 结帐插件
  • 如何在 WooCommerce 中创建直接结帐链接