自定义和编辑 WooCommerce 结帐页面的 3 种有效方法

正在寻找编辑 WooCommerce 结帐页面的最佳方式？

学习如何自定义 WooCommerce 结帐页面可以让您更好地控制其设计并增加更多销售的潜力。

‍ 在本详细教程中，我们将向您展示三种无需代码的方式来自定义结帐页面，包括完全调整设计和/或更改结帐页面上显示的字段。

我们还将介绍 WooCommerce 提供的用于自定义结帐体验的所有内置功能。

让我们开始吧…

编辑 WooCommerce 结帐页面的原因

是否有明显的理由修改 WooCommerce 结帐页面？ 那要看。 内置的结帐模块干净、实用且足够快，可以处理付款而不会惹恼您的客户。

但你也可能注意到它的缺点。 以下是您可能想要编辑 WooCommerce 结帐页面的主要原因：

• 替换默认的 WooCommerce 品牌元素，如预设字体、样式和 WooCommerce 紫色。
• 添加与您的业务相关的 Web 项目，例如徽标、品牌颜色和支持文档的链接。
• 如果在测试后需要优化结帐以进行转换。
• 通过将结帐过程转换为一个步骤来加快结帐过程。
• 合并追加销售、交叉销售和相关产品。
• 用于添加自定义字段或删除 WooCommerce 提供的某些字段。
• 修改运输选项。
• 用于更改按钮文本、预设字段文本和客人结帐选项等设计元素。

如何编辑 WooCommerce 结帐页面

您有几个选项可用于编辑 WooCommerce 结帐页面。 最适合您的方法取决于您尝试进行的特定编辑以及您是否愿意使用插件。

下面，我们将介绍三种最佳方法：

1. 原生 WooCommerce 设置– WooCommerce 包含许多用于自定义结帐的内置选项，我们将在第一种方法中详细介绍。 您的主题还可能提供自己的选项来自定义结帐页面设计。
2. Elementor Pro – Elementor Pro 现在提供自己的结帐小部件，可让您完全自定义结帐页面的设计。 如果您特别想编辑页面设计，这是一个很好的选择。
3. 结帐字段编辑器- 如果您想编辑结帐页面上显示的表单字段，这是一个很好的选择。 您可以使用它来添加新字段、删除默认字段并根据需要重新排列所有内容。

让我们通过它们..

方法 1：使用默认的 WooCommerce 结帐设置

WooCommerce 提供内置设置来编辑您的结帐模块，并且您的 WordPress 主题可能已经提供了用于调整 WordPress 定制器中的某些字段和结帐设置的工具。

在寻找其他插件、主题或字段定制器之前检查这些设置总是明智的，因为您可能已经拥有所需的功能。

例如，WooCommerce 具有用于删除某些字段、在结帐期间启用税率以及显示优惠券字段的工具。

第 1 步：在结帐时添加税金计算和优惠券字段

WooCommerce 具有内置设置，可自动计算税款并在结帐时接受优惠券。

要打开/关闭，请转到 WordPress 上的WooCommerce > 设置。

选择General选项卡，然后向下滚动到Enable Taxes部分。 选中复选框以在结帐期间启用税率和计算。 这会根据您在 WooCommerce 中配置的费率（ WooCommerce > 设置 > 税 > 标准费率）生成并显示税费。

选中启用优惠券代码的使用框以显示客户可以输入折扣代码的字段。

如果您不想显示某些元素，只需删除复选框即可。 确保单击“保存”按钮以在前端查看您的更改。

第 2 步：显示含税或不含税的产品定价

在结账结束时计算税金是一回事，但您还必须决定是否要将税金包含在产品的总成本中，尤其是在客户结账时。

一般来说，这显示了更高的透明度，而不是在客户付款之前就加税加价。

要在结帐过程中包含税费，请转到WooCommerce > 设置 > 税费。

在页面上向下滚动以找到“在购物车和结帐期间显示价格”字段。

从下拉列表中选择：

• 含税
• 不含税

单击保存更改。

第 3 步：设置结帐时显示的运输项目

此外，在WooCommerce > Settings下，您可以标记 WooCommerce 结帐中出现的运输区域、方法和计算。

只需转到运输选项卡并调整：

• 计算：启用购物车页面上的运费计算器
• 计算：在结帐时隐藏运费，直到插入地址
• 送货目的地：在结帐时设置默认送货地址

单击保存更改。

第 4 步：在结帐时管理帐户和隐私

在WooCommerce > Settings下，转到Accounts & Privacy选项卡。

在页面顶部，您将看到两个字段：

• 访客结帐：包括/删除访客结帐和现有帐户登录
• 帐户创建：允许客户在结帐时创建帐户或开始订阅

继续向下帐户和隐私页面找到隐私政策区域。

填写结帐隐私政策文本框，以确保客户在结帐时看到该政策。 如果您不想在该区域显示隐私政策，请将该字段留空。

第 5 步：选择实际结帐页面和其他高级设置

导航到高级选项卡以显示页面设置部分； 这会提示商家在结账时告诉 WooCommerce 将客户发送到哪里。

默认情况下，WooCommerce 会生成购物车、结帐、我的帐户和条款和条件页面，您可以通过转到 WordPress 上的页面 > 所有页面来找到这些页面。

但是，您可以选择生成一个全新的页面并将其链接到此处。 这会覆盖默认结帐页面并将客户发送到自定义页面。

Advanced选项卡中的另一个选项是Force Secure Checkout ，这需要 SSL 证书。

第 6 步：在 WordPress 定制器中更改主题的结帐设计

具有 WooCommerce 功能的 WordPress 主题通常会安装 WordPress Customizer 工具来轻松调整您的结帐样式。

请记住，所有 WooCommerce 主题都提供独特的 WordPress 定制器设置（有些根本没有任何设置），但总的来说，值得检查 WordPress 定制器以快速控制结帐。

首先，在 WordPress 上转到外观 > 自定义。

如果可用，您的主题应在 WordPress 定制器的某处显示 WooCommerce 按钮。 点击那个。

这只是 Storefront 主题的一个示例（因此您可能看不到相同的内容），但主题在定制器中具有Checkout选项卡是很常见的。 选择那个或类似的东西，这可能表明对结帐的控制。

浏览您的主题提供的所有结帐设置。 在 Storefront 主题中，您可以将这些字段设为可选、必填或隐藏：

• 公司名称字段
• 地址行 2 字段
• 电话字段

也可以用星号突出显示必填字段。

最后，店面主题提供了在结帐结束时显示隐私政策和条款和条件页面的选项。

方法 2：使用页面构建器编辑 WooCommerce 结帐字段和整体样式

Elementor、Beaver Builder 和 Themify 等页面构建器都提供 WooCommerce 内容小部件来覆盖 WooCommerce 结帐页面上当前的内容。

页面构建者几乎专门为其高级计划保留其 WooCommerce 结帐模块，因此您很有可能必须为此功能付费。 例如，您会收到带有 Pro 计划的 Elementor Checkout 小部件。

话虽如此，页面构建器使您几乎可以完全控制结帐页面，因此这是一种无需编码知识即可编辑 WooCommerce 结帐的简单方法，而且每年只需 50 到 100 美元左右。

在本教程中，我们将向您展示结帐定制通常如何与页面构建器一起使用 Elementor。

第 1 步：在 Elementor 中打开指定的结帐页面

要在 Elementor 中编辑 WooCommerce 结帐，您必须转到 WooCommerce 自动创建的结帐页面。 在Pages > All Pages下找到它。

打开标有“结帐页面”的页面，然后单击使用 Elementor 编辑。

第 2 步：删除 WooCommerce 结帐简码

WooCommerce 已自动添加其“WooCommerce checkout”短代码到编辑器中，它呈现默认的 WooCommerce 结帐模块。

目标是将其换成页面构建器中的结帐模块。 因此，删除 WooCommerce 结帐简码。

第 3 步：放入 Elementor Checkout 小部件

现在是时候找到您的页面构建器的结帐小部件了。 Elementor 提供了一个名为Checkout的工具，您可以使用搜索栏或在 WooCommerce 标题下浏览来找到它。 单击Checkout小部件并将其拖到空白页面上，其中显示“将小部件拖到此处”。

注意：如果您尚未升级到 Elementor 的高级版，您可能看不到结帐小部件。 大多数页面构建器都是这种情况。

第 4 步：自定义内容、样式和高级功能

拖动结帐小部件后，Elementor 呈现结帐预览。 然后，您可以单击左侧的这些选项卡来自定义结帐的各个方面：

例如，您可以将通用布局切换到一列并调整名字字段的占位符文本。

其他自定义选项卡包括：

• 结算明细
• 附加信息
• 你的订单
• 优惠券
• 支付

在样式选项卡下也有无数种方法可以编辑 WooCommerce 结帐。

使用这些选项卡：

• 部分
• 排版
• 形式
• 订单摘要
• 购买按钮

例如，我们将蓝色的购买按钮换成绿色的。

最后，“高级”选项卡提供了更强大的编辑工具：

• 布局
• 运动效果
• 转型
• 背景
• 边框
• 面具
• 响应能力
• 属性
• 自定义 CSS

只要您坚持之前为 WooCommerce 设置为“结帐页面”的页面，并将 WooCommerce 结帐短代码换成页面构建器结帐小部件，您就可以保存更改并完成该过程！

方法3：安装自定义插件来编辑字段

存在许多 WooCommerce 结帐定制器插件，例如：

大多数 WooCommerce 结账插件都提供了额外的自定义工具来修改和添加字段，但也有一些可以彻底改造设计，例如多步结账插件。

我们建议您查看上面所有推荐的插件，但我们将通过 Checkout Field Editor 插件的快速教程帮助您了解如何使用插件编辑 WooCommerce 结帐。

第 1 步：安装并激活 Checkout Field Editor 插件

安装 Checkout Field Editor 插件，然后完成激活插件的过程。

激活后，该插件会在 WordPress 上添加一个新选项卡，您可以通过转到WooCommerce > Checkout Form访问该选项卡。

第 2 步：编辑当前字段

该插件显示您的 WooCommerce 结帐中的所有当前字段，除了该插件现在链接到默认的 WooCommerce 结帐，因此您可以完全控制这些字段。

您可以编辑：

• 计费字段
• 运输领域
• 附加字段

要编辑 WooCommerce 结帐字段，请单击要更改的字段旁边的编辑。 对于此示例，我们将修改公司名称字段。

在编辑字段窗口中，您可以修改字段的选项，例如：

• 标签
• 占位符
• 默认值
• 班级
• 验证

也可以取消选中必填框，因此客户没有义务填写该字段。 您还可以禁用该字段，使其根本不会显示在结帐中。 确保单击保存并关闭。

该插件通常会在此之后保存所有内容，但您可以再次单击“保存更改”按钮以确保其正常工作。

如您所见，我们从结帐区域中删除了公司名称字段。

它已经从前端结帐中消失了。

您可能还想编辑诸如占位符文本之类的内容。 在这种情况下，打开相关字段并更改设置的过程相同。

我们结帐上的名字字段现在显示新的占位符文本。

第 3 步：向 WooCommerce 结帐添加一个新字段

要添加一个全新的字段，请单击“添加字段”按钮。

选择字段类型，从以下选项中进行选择：

• 文本
• 数字
• 隐
• 密码
• 电话
• 复选框
• 月
• 网址
• 还有很多

例如，我们将创建一个Number字段并要求客户输入他们的 Loyalty Rewards Number。 您还可以指定占位符、默认值以及是否为必填字段等元素。

确保选中Enabled框，然后单击Save & Close 。

第 4 步：查看结果

在后端，您将在列表底部看到新的结帐字段。 默认情况下它位于末尾，但您可以单击并拖动以重新排序。

新字段也出现在前端结帐模块上。

立即创建完美的结帐页面

我们建议从默认的 WooCommerce 结帐设置开始，看看它们是否有助于实现您想要的结果。 对于更高级的编辑，请考虑使用自定义字段。 对于高级但相对易于实现的自定义，请使用建议的页面构建器之一。

您对如何编辑 WooCommerce 结帐的主要问题是什么？ 在评论区分享你的观点！