在 WooCommerce 结帐页面上添加发货通知

已发表: 2019-08-19

在 WooCommerce 结帐页面上添加发货通知可以减少商店中废弃的购物车。 一些 WordPress 主题提供该功能,但如果您的主题不支持该功能,并且您想通知您的客户怎么办? 在本文中,我将向您展示使用免费和付费解决方案的三种不同方法。

当然,您可以使用您的 PHP 函数并在 WooCommerce 中添加发货通知,但这需要开发人员的工作。 相反,您可以使用现成的解决方案来帮助您做到这一点,而无需编写任何代码。 在本文中,我将展示在 WooCommerce 的结帐页面上显示运输消息的三种不同方法:

  • 使用免费插件的剩余金额免费送货
  • 当免费插件没有可用的运输方式时的自定义消息
  • 带有付费插件的完全可定制的通知。

显示剩余金额免运费

送货通知的主要用途之一是显示免费送货缺少的金额。 这种信息非常适合转化和增加客户购物车的价值。 许多研究已经证实了此类解决方案的有效性,因此越来越多的在线商店使用此类消息也就不足为奇了。

轻松添加有关免费送货缺失金额的消息。 您需要做的就是安装并激活免费的灵活配送插件。 全球有超过 130.000 家商店每天都在使用它。 免费版可以很好地用作基本的运费计算器。 它允许您根据重量和购物车总数设置运输。 此外,它还具有显示剩余金额以免费送货的内置功能。

灵活的运输 WooCommerce

WooCommerce 的最佳表运费。 时期。 根据重量、订单总数或项目计数创建运输规则。

免费下载访问 WordPress.org
100,000+ 活跃安装
最后更新:2022-10-03
适用于 WooCommerce 6.6 - 7.0.x

要显示免费送货的剩余金额,您必须添加灵活送货方式,设置免费送货阈值并选中“剩余免费送货”通知框。

灵活的运输方式设置

这样的解决方案将自动在购物车和结帐页面上显示适当的消息。 在 Storefront 主题中,该消息将如下所示:

WooCommerce 中的剩余金额免费送货

缺失的金额将根据篮子的价值动态变化。 重要的是,您商店中的所有运输方式都具有相同的免运费金额。

如果您想了解分步说明以及如何更改默认消息,请阅读我们的如何在 WooCommerce 教程中显示剩余金额以免费送货

没有可用的运输方式时的自定义消息

另一个好的做法是在由于某种原因没有可用的运输方式时创建适当的消息。 WooCommerce 本身没有更改默认“未找到运输选项”消息的选项。 收到标准通知的客户更有可能放弃购物车。 您可以通过创建自定义消息来解释原因并让他们轻松更改购物车内容或联系商店,从而节省大量废弃的购物车

您可以使用名为 Shipping Notices 的免费插件轻松更改 WooCommerce 中的“未找到运输选项”消息。 它允许您用您的自定义文本替换默认的“未找到运输”通知。 您甚至可以决定应在何处显示通知:购物车、结帐或两者兼而有之。

获取免费送货通知插件 →

如果您想获取有关它的详细信息,请阅读我们的如何更改“未找到运输选项”消息教程

完全可定制的发货通知

如果您需要更高级的解决方案,您应该使用灵活结帐字段的专业版。 使用此插件,您可以在结帐页面中添加 HTML 字段并使用 CSS 进行调整。

灵活的结帐字段

灵活的结帐字段允许您在结帐表单中添加新字段,编辑甚至隐藏现有字段。 您可以决定将其添加到哪里——在订单、账单或运输部分。 更重要的是,您可以添加自定义部分,所以基本上这个插件允许您完全控制您的 WooCommerce 结帐页面。

下载灵活结帐字段插件

在 WooCommerce 结帐页面上添加发货通知只是您可以使用灵活结帐字段插件进行的许多有用的事情之一。 如果您想了解有关灵活结帐字段的更多信息,请阅读我们关于如何更改默认 WooCommerce 结帐页面的文章。

如何在 WooCommerce 结帐页面上添加发货通知?

转到WooCommerce → 结帐字段 → 设置。 在自定义部分中启用之前的客户详细信息保存更改

添加具有灵活结帐字段插件的自定义部分

现在,您可以在 WooCommerce 结帐页面顶部的客户详细信息之前添加 HTML 字段。 如果您想将其添加到其他位置,您可以启用剩余字段之一或在账单、运输和订单部分之间进行选择。 请记住,您可以使用 CSS 更改它,但在我看来,在客户详细信息之前添加它是最简单的解决方案。

转到“客户详细信息之前”部分添加新字段 作为字段类型,选择 HTML,然后在标签字段中输入您的发货通知。 在这里你可以使用 HTML 并设置样式,但我建议使用 CSS。 现在,只需输入您的标签并单击Add Field

在 woocommerce 结帐页面中添加新的 html 字段

现在,您的发货通知将出现在部分字段上。 这将是他们中的最后一个。 单击它以查看更多选项。

结帐页面中新 HTML 字段的常规部分

在这里,您可以将CSS 类添加到此字段,并使用 CSS 的魔力将其调整到您的商店。 默认情况下,它将是一个表单行类,就像其他字段一样。 将其更改为您的新课程并保存更改 现在,您可以使用输入的 CSS 类使用 CSS 对其进行调整。

将 css 类添加到 woocommerce 结帐页面中的 html 字段

我正在使用 Storefront 主题,所以默认情况下,它看起来像这样:

WooCommerce 结帐基本示例的发货通知

只有几行 CSS,我得到了这个:

WooCommerce 结帐自定义示例的发货通知

您的发货通知将取决于您的主题,但如何让它看起来完全取决于您。

想了解更多关于 WooCommerce 中的 CSS 类的信息。 阅读我们的指南,将您自己的 CSS 类设置为您的 WooCommerce 商店中的任何自定义字段。

概括

在本文中,我向您展示了如何在 WooCommerce 结账时添加发货通知的三种不同方法。 我希望它会有所帮助,并且您将添加您的发货通知。 祝你好运!