如何在 WooCommerce 中添加自定义上传字段

您想在结帐页面上包含上传字段吗？ 你来对地方了。 在本文中，我们将逐步向您展示如何在 WooCommerce 中添加自定义上传字段。

WooCommerce拥有超过 500 万次活跃下载，是世界上最受欢迎的电子商务平台。 在创建在线商店时，它是许多店主的首选，这是有充分理由的。 WooCommerce 为客户和店主提供无缝且直接的整个在线体验。

除了易于设置和使用之外，WooCommerce 还具有大量功能，可为您提供很大的灵活性。 通过使用插件或一些编码，您可以添加任何您需要的功能来改善购物体验和促进销售。

众所周知，要实现这一目标，您的结帐应该得到优化并且不会分散注意力。 增强用户体验的一种方法是向您的 WooCommerce 商店添加自定义上传字段。 通过这种方式，您可以让您的客户在结账过程中上传文件并立即确认订单，而不必在他们通过电子邮件向您发送其他文件之前一直等待购买。

在我们详细介绍之前，让我们更好地了解为什么向您的商店添加自定义上传字段是一个好主意。

为什么在 WooCommerce 中添加自定义上传字段？

在几种情况下，购物者在网上购买产品时可能需要上传文件。

一些酒店可能会要求客户在网上预订时附上某种身份证明——通常是身份证或护照。 在许多国家/地区，酒店必须每天向警方或地方当局提供有关客人的信息，因此他们可能会在您到达之前要求您提供身份证件以加快办理入住手续的过程。

同样，一些在线销售机票或火车票的网站要求乘客在预订过程中上传他们的身份证或护照。 如果您需要更改机票、要求退款或要求某种延误赔偿，公司可能会要求您上传某些文件，例如护照或身份证、您购买的机票等。

此外，批发在线商店的客户批量购买产品并在一次交易中花费数千美元。 在这些情况下，作为一种安全措施，他们可能会要求用户上传一些身份证明。

最重要的是，提供购买定制 T 恤的选项的服装店可能会要求客户发送他们自己的设计以进行打印。 为此，他们需要让用户上传文件，以便他们可以上传他们的设计。

最后，上传文件的选项对于销售需要先前认证的服务（如潜水、滑翔伞等）的商店非常有用。

即使不是在每种情况下都是强制性的，在您的结帐页面中添加自定义上传字段也可以使流程变得轻松且双方都更加方便。

现在我们更好地了解了何时应该将自定义上传字段添加到您的 WooCommerce 商店，让我们看看如何做到这一点。

如何在 WooCommerce 中添加自定义上传字段

在 WooCommerce 中添加自定义上传字段的最简单方法是使用插件。 对于此演示，我们将使用 Checkout Manager for WooCommerce，这是一种免费增值工具，有超过 90,000 次活动安装。

这个插件有很多功能可以帮助您自定义结帐，并包括添加自定义字段的选项。 要了解有关此工具提供的所有功能的更多信息，请查看产品页面。

第 1 步：为 WooCommerce 安装结帐管理器

首先，您需要安装插件。 在您的WordPress 管理仪表板中，导航到插件 > 添加新的。

然后，搜索 QuadLayers 的 Checkout Manager for WooCommerce 插件，然后单击“立即安装”按钮。 安装插件后，按“激活”。

现在是时候配置插件了。 让我们首先向 WooCommerce 结帐页面添加一个新的自定义上传字段。

在此之前，让我们看看结帐页面的外观。 如您所见，没有任何字段允许客户上传文件。

让我们看看如何设置结账管理器让购物者在结账时添加文件。

第 2 步：在 WooCommerce 结帐页面中添加自定义上传字段

在您的WordPress Dashboard中，导航到WooCommerce > Checkout。 在那里您将找到结帐管理器的所有设置。

转到结帐选项卡并前往附加部分以打开附加字段设置。

注意：在此示例中，我们将在“附加”部分添加该字段，但您只需转到“结帐”选项卡下的相应区域，即可将其添加到“开票”、“运输”或结帐的任何部分。

在右上角，您将看到一个下拉菜单，您可以在其中选择要显示这些附加字段的位置。 单击“添加新字段”按钮开始创建新的附加字段。

设置自定义上传字段

之后，您将进入带有设置菜单的新页面。 您可以在此处指定要添加的字段的参数。 由于我们要添加自定义上传字段，因此选择类型下的文件并设置自定义标签和按钮文本。 然后，按“保存”。

创建一些附加字段后，您可以从附加字段设置菜单管理不同的参数。 这些参数包括：

• 重新定位：您使用向上和向下箭头向上或向下移动字段。 或者，您可以单击并拖动三个水平线图标来重新定位字段。
• 必填：启用必填字段会使该字段成为必填字段。 这意味着用户在填写该字段之前无法继续。
• 位置：您可以选择要显示字段的位置。 共有三个选项可供选择：左、右或宽。
• 清除：启用此选项将禁止任何其他字段出现在此特定字段的左侧或右侧。
• 禁用：通过选中禁用按钮，该特定字段将不会显示在结帐页面上。
• 编辑和删除：顾名思义，您可以通过单击相应的按钮来编辑或删除特定字段。

配置完所有设置后，保存更改。

现在让我们从前端看一下我们的网站，看看有什么变化。 如您所见，现在有一个上传文件的按钮。 在我们创建的 2 个自定义字段中，只有测试字段被激活并且不是强制性的，因此它在结帐页面上显示为可选。

而已！ 这就是在 WooCommerce 中添加自定义上传字段是多么简单。 使用此按钮，客户可以在结帐过程中上传任何文件甚至上传多个文件。 上传的文件将与订单的其他详细信息一起保存在订单页面上。 此外，您将能够管理用户通过管理订单仪表板上传的所有文件。

但这并不是您使用 Checkout Manager 所能做的全部。 优化结账是提高转化率的关键，因此您应该只显示客户必须填写才能完成订单的字段。 让我们看看如何添加仅在满足特定条件时出现的条件字段。

奖励：在 WooCommerce 中添加条件字段

条件字段有两部分：父字段和子字段。 子字段取决于父字段的输入。 这意味着它默认不可见，但在父字段采用特定值时出现。

例如，如果您想向 WooCommerce 商店添加仅在特定情况下才需要的自定义上传字段，最好的解决方案是创建一个条件字段，以便该字段仅在需要时出现。

我们将分两步进行。 首先，我们将询问用户是否要上传文件。 如果他们说“是”，那么只有这样，上传文件字段才会可见。 在此示例中，我们的第一个问题将是父字段，上传文件按钮将是子字段。

现在我们知道了条件字段是什么，让我们看看如何使用 Checkout Manager 插件将其添加到 WooCommerce。

使用 Checkout Manager 创建条件字段

首先，让我们添加父字段。 按照相同的示例，我们会将其添加到 Additional 部分，但您可以将其添加到 Billing、Shipping 或您想要的结帐的任何部分。

转到WooCommerce > Checkout，转到Checkout选项卡，然后打开Additional部分。 按“添加新字段”按钮并设置父字段的参数。 使用上面的示例，我们将选择Select作为“类型”并添加自定义标签和占位符文本。

然后转到左侧的选项选项卡并设置用户可以选择的所有可能选项。 在此示例中，我们向用户提出的问题只能有两个答案：“是”或“否”。 由于此问题的答案不会增加任何额外费用（例如快速交货或国际运输），我们将价格设置为 0。配置完所有参数后，保存更改。

创建子字段

接下来，您需要创建子字段-自定义上传字段-，并设置条件参数。

为此，请创建一个字段，设置类型、标签和按钮占位符。 然后转到右侧部分并选中“激活条件字段要求”框。 之后，选择您在上一步中刚刚创建的字段作为父字段，并选择应为其激活子字段的父字段的值。 在这种情况下，我们只想在用户对第一个问题回答“是”时显示上传文件。

完成后，请记住保存更改。

而已！ 您现在已经在 WooCommerce 结帐页面上成功设置了条件字段。

现在转到您的结帐页面并检查条件字段是否正常工作。 最初，只会显示父字段，但如果您选择“是”，则会出现上传文件按钮。

有关如何向 WooCommerce 添加条件字段的更多信息，请查看我们的完整指南。

结论

总而言之，在 WooCommerce 结帐中添加自定义上传字段会派上用场，因为它允许您的客户在结帐过程中上传任何所需的文件。

在多种情况下，用户可能需要上传文件或图像。 例如，在线酒店预订、购买机票时的身份验证、服装定制设计、物品交换或退款，或需要某些认证的服务。 这就是为什么允许您的购物者在结账时上传文件使整个过程更简单、更方便的原因。

在本文中，我们讨论了：

• 添加自定义上传字段的好处
• 有关如何使用结帐管理器在 WooCommerce 中添加自定义上传字段的分步说明
• 什么是条件字段以及它们如何工作
• 如何在 WooCommerce 中添加条件字段以优化结帐

您是否在商店中添加了自定义上传字段？ 你知道我们应该包括的任何其他方法吗？ 在下面的评论中让我们知道！