如何在 WooCommerce 结帐表单中添加额外字段
已发表: 2020-09-21
如果您经营的是 WooCommerce 商店，那么您已经知道结帐页面的重要性。 但是，有时您需要根据项目要求在 WooCommerce 结帐表单或结帐页面上的其他自定义结帐字段中添加额外字段。 对于一些 WooCommerce 商店所有者来说，这可能是一项艰巨的工作，这就是为什么我决定创建一个简短的教程，介绍如何在 WooCommerce 结帐表单中添加额外的字段。
WooCommerce 结帐页面
一般来说，结账页面是一个电子商务术语，指的是在系统结账过程中向客户显示的页面，在他们购买前的最后一步。 有几种方法可以改善结帐页面转换，但其中一种方法是在 WooCommerce 结帐表单中添加与您的特定产品相关的额外字段，并删除所有其他不必要的结帐页面字段。
此页面包含客户需要填写的字段。 还值得一提的是，对于卖家和客户来说，这是最重要的页面，因为客户必须提供地址、账单明细、付款方式等重要信息，这将有助于卖家将产品交付给客户. 
当此页面出现错误时，客户将无法进行任何购买。 这将极大地影响您商店的业绩，因为您将无法进行任何销售。
如果您使用 WooCommerce 为您的在线商店提供支持，您还将获得结帐页面。 但是，如果您熟悉 WooCommerce，那么您就会知道它不会让您有机会从设置中自定义结帐页面。
在 WooCommerce 结帐表单中添加额外字段
有很多方法可以修改 WooCommerce 商店的结帐页面，例如使用第三方插件、WooCommerce 扩展或自定义开发。
正如我之前提到的，WooCommerce 自定义结帐字段对于组装以在购买者完成订单之前从购买者那里获取更多数据非常重要。
有时您需要客户提供一些额外的信息，并且需要一个额外的字段来做到这一点。
现在您已经了解了基础知识，让我们深入了解本教程。 要将自定义字段添加到结帐页面，我们将使用两种方法：
- 使用插件。
- 创建自定义代码。
a) 使用代码向您的 WooCommerce 结帐页面添加额外字段的步骤
此解决方案适用于像开发人员一样知道如何编码的个人。 此自定义代码将帮助您使用一些简单的步骤将自定义字段添加到结帐页面。
以下是您需要遵循的简单步骤：
- 登录您的 WordPress 站点并以管理员用户身份访问仪表板。
- 从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。 当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加将向WooCommerce 中的结帐页面添加额外字段的函数。
- 将以下代码添加到php文件中：
/**
* 将自定义字段添加到结帐页面
*/
add_action('woocommerce_after_order_notes', 'custom_checkout_field');
函数 custom_checkout_field($checkout)
{
回声'<div id="custom_checkout_field"><h2>'。 __('新标题') 。 '</h2>';
woocommerce_form_field('custom_field_name', 数组(
'类型' => '文本',
'类' => 数组（
'my-field-class form-row-wide'
) ,
'label' => __('自定义附加字段') ,
'placeholder' => __('New Custom Field') ,
) ,
$checkout->get_value('custom_field_name'));
回声'</div>';
}- 要查看结果，您需要刷新结帐页面，您应该会看到：
- 但是，需要注意的是，我们需要验证自定义字段的数据。 为此，只需将以下代码添加到 functions.php 文件中：
/**
* 结帐流程
*/
add_action('woocommerce_checkout_process', 'customised_checkout_field_process');
函数customised_checkout_field_process()
{
// 如果未设置该字段，则显示错误消息。
if (!$_POST['customised_field_name']) wc_add_notice(__('请输入值！') , '错误');
} 如果自定义字段中没有输入，则会出现错误，这将是结果： 
- 现在我们已经添加了自定义结帐字段并对其进行了验证，现在让我们确认输入自定义字段的详细信息是否正在保存。 这可以使用以下将添加到 functions.php 文件中的代码来完成：
/**
* 更新自定义字段中给出的值
*/
add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');
函数 custom_checkout_field_update_order_meta($order_id)
{
if (!empty($_POST['customised_field_name'])) {
update_post_meta($order_id, 'Some Field',sanitize_text_field($_POST['customised_field_name']));
}
}代码如何工作。
此代码通过三个简单的步骤工作。 在第一个代码片段中，我创建了带有标题的自定义字段。 然后第二个片段用于验证自定义字段中是否有输入。
第三个代码片段用于确认客户在自定义字段中输入的详细信息是否正在保存。 同样重要的是要注意这些代码片段应该添加到您的 WooCommerce 商店的 functions.php 文件中。
b) 使用插件向您的 WooCommerce 结帐页面添加额外字段的步骤
此解决方案适用于不熟悉编码的 WordPress 用户。 该解决方案涉及使用 WooCommerce Checkout Manager 插件。 
我将为您提供详细的系统指南，帮助您下载插件并使用它在结帐页面上添加额外的字段。
以下是您需要遵循的步骤：
- 登录您的 WordPress 站点并以管理员用户身份访问仪表板。
- 然后，我们将安装我们之前指出的插件。 如果您使用上面的链接下载了它，只需导航到插件 > 添加新的。 之后，点击上传插件，然后浏览下载的文件，如下所示：
- 要直接在管理面板中下载它，只需导航到插件 > 添加新的。 之后，您需要对插件“WooCommerce Checkout Manager”进行关键字搜索。 您需要安装并激活它，如下所示：
- 要创建新字段，请转到 WordPress 仪表板并单击WooCommerce > 设置。 然后，单击结帐选项卡，然后单击附加选项卡。 点击添加新字段，如下图：
- 将出现一个新窗口，您需要添加相关详细信息。 请记住保存您所做的所有更改：
- 要查看结果，请刷新结帐页面，您将看到新的结帐字段：
结论
在这个简短的教程中，我向您展示了如何向结帐页面添加新字段。 我相信现在你知道如何添加一个额外的字段，而且一点也不难。 我分享了两个解决方案。 一种涉及使用将添加额外字段的 PHP 代码，另一种是使用插件。 该插件还具有您可以查看的其他附加功能，它是不那么精通技术的解决方案。 但是，您可以根据需要更改字段的名称。
类似文章
- 如何跳过购物车并重定向到结帐页面 WooCommerce
- 如何将 Stripe 与 WooCommerce 集成
- 如何从 WooCommerce 主题的产品页面中删除侧边栏
- 如何在页脚 [HTML] 中添加 WooCommerce 支付图标
- 如何在 WooCommerce 中获取付款方式 » 代码示例
- 如何在 WooCommerce 中隐藏没有价格的产品
- 如何从 WooCommerce 结帐中删除帐单详细信息
- 从 WooCommerce 产品页面隐藏或删除数量字段
- 如何隐藏 WooCommerce 优惠券代码字段
- 如何在 WooCommerce 中重命名订单状态消息
- 如何删除默认产品排序 WooCommerce
- 如何对 WooCommerce 类别进行排序以获得更好的用户体验
- 如何添加产品图片 WooCommerce 结帐页面
- 如何在 WooCommerce 中隐藏添加到购物车按钮
- 如何从搜索结果中隐藏 WooCommerce 产品
- 如何在 WooCommerce 的商店页面中隐藏所有产品
- 如何禁用特定类别的付款方式
- 如何检查插件在 WordPress 中是否处于活动状态 [3 种方式]
- 如何逐步使用 WooCommerce 产品属性 [完整指南]
- 如何调整 WooCommerce 产品图像的大小
- 如何向 WooCommerce 产品添加类别
- 如何在 WooCommerce 中创建我的帐户页面
- 如何为插件创建 WooCommerce 管理员通知 – WooCommerce 开发
- 如何在 WooCommerce 中快速找到您的产品 ID
- 如何在 WooCommerce 中更改结帐按钮文本 [下订单]