如何添加WooCommerce自定义结帐字段

无需编码即可添加WooCommerce自定义结帐字段的方法？

在本博客中，您将学习如何以最简单的方式添加WooCommerce额外的结帐字段。

WooCommerce默认结帐页面的表单字段有时可能不足以提供流畅的电子商务结帐体验。因此，很常见的是人们正在寻找添加WooCommerce自定义结帐字段的方法。

虽然执行原始代码是一种选择，但它并不是添加 WooCommerce 结帐字段的最有效方式。

好吧，那么您一定要问的有效方法是什么，对吗？

答案是使用易于使用但轻量级的WooCommerce插件。以及如何使用一个很棒的WordPress插件来添加WooCommerce自定义结帐字段是这个博客的全部内容。

• 什么是电子商务中的结帐页面？
• 为什么需要向WooCommerce结帐页面添加自定义字段？
• WooCommerce结帐字段编辑器插件
• 如何添加WooCommerce自定义结帐字段
• 如何在WooCommerce中编辑/删除额外的结帐字段
• 小结

什么是电子商务中的结帐页面？

在电子商务网站中，结帐页面基本上是指处理支付/运输信息以完成交易的页面。它通常具有不同的表单字段来收集用户信息，例如帐单地址、送货地址、付款方式等。

为什么需要向WooCommerce结帐页面添加自定义字段？

默认的WooCommerce结帐模板有两个表单字段，一个与计费相关，另一个与运输和付款信息相关。所有这些都是进行交付所需的基本信息。

但是，例如，如果您的客户希望在他们的订单中进行一些个性化设置，那么他们可能希望将订单作为礼物发送给其他人，并且他们希望在其上写一些便条。他们是怎么做到的？

为此，他们通常需要拨打您的帮助热线，这可能是一个漫长而令人厌烦的结帐过程，从而导致糟糕的用户体验。但是，如果您添加WooCommerce自定义结帐字段，则可以更改它。

另一个示例是添加中间名字段。当然，一个人总是可以在名字字段中写中间名，但是有一个中间名表单字段将为有中间名的人提供更好的用户体验（我们都知道，有很多！）。

另一个例子可能是，送货人希望产品在一天中的某个时间交付。为此，您还可以提供自定义字段。我只是在谈论我想到的选项。

但我敢肯定，作为在线商店所有者，您有许多想法或需求，WooCommerce自定义结帐字段可以轻松解决。因此，通过向您的WooCommerce结帐页面添加自定义字段，使订单对消费者更加个性化以及使制造和交付过程都非常有益。

WooCommerce结帐字段编辑器插件

要将额外的自定义字段添加到您的WooCommerce结帐页面，您需要安装并激活以下插件：

1. Elementor(Free)
2. ShopEngine Free and Pro

如果您在激活WooCommerce结帐字段编辑器 – ShopEngine Pro方面需要帮助，您可以查看官方文档。

ShopEngine是终极的WooCommerce结帐字段编辑器，它带有13多个模块和60多个小工具，让您可以完全控制构建自己的个性化Woo商店。它是Elementor页面构建器的插件，因此您需要在安装ShopEngine插件之前安装Elementor。

在超过13个模块中，我将在本教程中使用一个名为“Checkout Additional Field Module”的模块，将一个额外的自定义字段添加到WooCommerce结帐页面。这里是主要过程……

如何添加WooCommerce自定义结帐字段

是的！如果您使用ShopEngine，在WooCommerce中添加额外的自定义结帐字段只需 3 步任务。让我们详细检查这些步骤，以便您可以轻松地进行操作……

第 1 步：启用ShopEngine的Checkout Additional Field模块

第一步是启用附加字段模块。要启用或激活模块，您需要

• 导航到ShopEngine ⇒ Modules ⇒ Checkout Additional Field，然后单击Settings图标

• 打开Enable the module选项，然后单击保存更改以进行更新。

第 2 步：向WooCommerce结帐页面添加新的自定义字段 

使用ShopEngine，您可以将自定义字段添加到以下结帐相关表单：

• 计费表单输入字段列表
• 运输表格输入字段列表 
• 和附加表单输入字段列表

Checkout Form-Additional是ShopEnigine的一个小工具，默认情况下会添加一个文本输入字段，用户可以在其中添加与他们购买的产品或有关运输或任何个人备注相关的其他个人备注。

将自定义字段添加到任何表单字段列表的过程是相同的。您可以按照相同的过程将自定义字段添加到所有表单和任意数量的字段。

注意：您必须使用结帐页面模板中要为其添加自定义字段的表单。

以下是将单个自定义字段添加到WooCommerce结帐页面所需采取的步骤。要添加任何表单字段，请单击该表单名称下方的+ Add Item并添加以下字段：

• 标签：提供合适的标题
• 类型：选择所需的字段类型。您可以选择文本、数字、电子邮件、文本区域、日期、时间、URL、复选框等类型。
• 名称（唯一键）：提供唯一名称，因为它将被视为唯一键。确保中间没有空格，也没有特殊字符。并始终确保为您创建的每个字段提供一个唯一的名称。
• 占位符：为占位符编写文本。
• 选项（仅适用于 Radio 类型）： 仅当您选择字段类型Radio时才需要此选项。您需要以“，”分隔的“value= option”模式添加所有单选按钮值。例如; 0=是，1=否或 M= 男性，F= 女性。
• 必填：选择是否要将此字段设为必填。
• 位置（之后）：  选择字段的位置。
• 自定义CSS类：如果需要，您可以在此处添加任何自定义CSS类。

您可以看到下面的过程，重复相同的过程以将多个额外字段添加到您的WooCommerce结帐页面。

第 3 步：保存并查看预览 

现在单击保存更改并使用额外的自定义结帐字段更新结帐页面。您可以下测试订单以查看更新后的结帐页面。

注意：我在运输表格输入字段列表中添加了另一个额外的字段。如果您这样做，则必须确保在您的WooCommerce结帐模板中使用运输表单小工具。

如何在WooCommerce中编辑/删除额外的结帐字段

现在，如果您添加一个额外的自定义字段，但您想更新一些信息或者可能永远删除一个自定义字段，该怎么办。你是怎样做的？

好吧，就像在WooCommerce中创建新字段、编辑和删除额外的结帐字段一样，使用ShopEngine也非常容易。让我们看看如何：

编辑WooCommerce自定义结帐字段需要遵循的步骤：

要编辑现有的WooCommerce自定义结帐字段：

• 导航到ShopEngine ⇒ Modules ⇒ Checkout Additional Field，然后单击Setting图标
• 点击字段展开
• 现在更新您想要的任何信息（我正在制作中间名只是为了向您展示该过程）
• 最后，点击保存更改进行更新

在WooCommerce中删除额外结帐字段的步骤：

要编辑现有的WooCommerce自定义结帐字段：

• 导航到ShopEngine ⇒ Modules ⇒ Checkout Additional Field，然后单击设置图标
• 点击字段展开
• 现在更新您想要的任何信息
• 最后，点击保存更改进行更新

小结

我希望你能得到我在这篇博客开头所承诺的，即为你提供添加WooCommerce自定义结帐字段的最简单方法。

我已经向您展示了如何添加新字段以及在WooCommerce结帐页面上编辑和删除现有字段的步骤。请随意复制相同的过程来添加特定电子商务网站所需的自定义字段。

ShopEngine是WooCommerce的结账字段编辑器插件，除了向结账页面添加自定义字段外，它还可以让您做很多事情。您可以自定义构建所有WooCommerce页面，例如商店页面、帐户页面、购物车页面、感谢页面等。

因此，不要将您的时间和精力浪费在任何不合格的插件上，而是立即抓住您的ShopEngine并以最大的灵活性建立您的WooCommerce商店。