如何编辑 WooCommerce 结帐页面？ （初学者指南）
已发表: 2022-09-27上周，我试图从网上商店买一件衬衫。 挑选了我喜欢的设计、尺寸和颜色，并试图清理购物车。 结帐页面很大，分成多个页面。 每次我认为我完成了这个过程时，我都需要填写更多信息。 10分钟后，我受够了，去了另一个站点。
虽然这可能不是您的确切体验，但您可能遇到了一些不便，阻止了您在线购买产品。 请放心，您的客户也会有。 这就是为什么创造出色的结账体验对您的销售很重要的原因。 本文包含您需要了解的有关WooCommerce 结帐页面自定义的所有信息，以更快、更快捷、更好地为您的买家服务。
TL;DR：您的整个 WooCommerce 页面可以使用 SeedProd 或 Elementor 等页面构建器插件轻松定制。 但是，在您对您的网站进行任何更改之前，我们建议您使用 BlogVault 备份您的 WordPress 网站。 BlogVault 的实时备份专为保护 WooCommerce 网站而设计。 只需单击几下，即可轻松进行备份和恢复，确保无论发生什么情况，您的网站都是安全的。
默认的 WooCommerce 结帐页面是什么样的？
默认的 WooCommerce 结帐页面还不错； 它只是不是很好。 它被设计成一个通用的结账页面，适用于大量产品。 因此，虽然我们将讨论如何自定义 WooCommerce 结帐页面，但我们当然不会丢弃默认页面。 这是一个很好的起点，我们建议根据您对产品、客户及其行为的了解对其进行调整。
在隐身标签中打开您的网站并将产品添加到您的购物车。 继续结帐，让我们看一下默认的结帐页面：
默认情况下，WooCommerce 结帐页面会要求您的客户提供基本的帐单详细信息，例如姓名、地址和电话号码。 它还包含有关您的订单和付款方式的详细信息。 这是您最不需要的，但不会为您的客户创造最佳体验。 本文将向您展示如何以各种不同的方式编辑 WooCommerce 结帐页面。
注意：在您开始编辑 WooCommerce 结帐页面之前，请在购物车中放置一些产品。 这是查看更改对结帐页面的影响的绝佳方式。
如何使用 Elementor 轻松自定义 WooCommerce 结帐页面
您可以编辑默认的 WooCommerce 结帐页面或使用现有模板。 您可以通过单击侧栏中的模板来尝试不同的模板。 如果您想编辑默认结帐页面，此部分适合您。 修饰结帐页面的最简单，最快捷的方法是使用页面构建器。 我们正在使用流行的 Elementor 来执行此操作，尽管任何其他页面构建器都将以类似的方式工作。 我们喜欢 Elementor，因为它易于设置和使用，而且它带有大量 WooCommerce 特定的小部件。
要编辑结帐页面，您只需要 Elementor 的结帐小部件。 用小部件替换 woocommerce_checkout 短代码，这将为您提供完全可定制的结帐页面。 它也与 Elementor 的购物车小部件一起工作得很好，使整个设计过程变得简单。 请记住，这种一体化解决方案是有代价的。 您确实需要 Elementor 的 Pro 版本才能使用这些小部件。 如果您打算投资 Elementor，请按照以下步骤操作：
- 安装并激活 Elementor：在您的 WordPress 仪表板上，单击插件，然后单击添加新的。 搜索元素。 出现提示时单击安装并激活。 这将安装 Elementor Pro。
- 添加许可证密钥：单击边栏中的Elementor 。 单击许可证，添加许可证密钥，然后单击激活。 该插件现在可以使用了。
- 在 Elementor 编辑器中打开结帐页面：将鼠标悬停在Pages上并单击All Pages 。 将鼠标悬停在结帐页面上，然后单击编辑。 在顶部，单击使用 Elementor 编辑。 稍等片刻，这将在 Elementor 编辑器中打开页面。
- 熟悉使用 Elementor 进行编辑： Elementor 在水平部分中工作，您可以通过选择每个部分的列数来自定义这些部分。 单击页面编辑器上的+以添加一个部分，它会提示您选择该部分中所需的列数和布局。 从侧边栏中拖动元素以将它们添加到列中。 从侧边栏中自定义每个元素。 当您选择每个单独的元素时，您将看到适用的设置。
- 用结帐小部件替换结帐短代码：删除短代码并从左侧的库中添加结帐小部件。 这将使您预览 Elementor 结帐页面的外观。
- 自定义结帐页面：您可以在侧边栏中探索 Elementor Checkout Widget 的许多设置。
以下是您可以更改的一些设置：
- 常规：从一列或两列布局中进行选择，甚至使一列具有粘性。
- 更改帐单或运输表格：编辑每个表格、每个占位符和每个字段的标题。
- 附加信息：为您的客户提供一个特殊部分，以便为其订单添加说明或信息。
- 优惠券设置：自定义优惠券的对齐方式和排版。
您可以通过单击Style编辑更多内容：
- 购买按钮：您可以更改购买按钮的颜色、文字、间距等。
- 订单摘要：您可以选择订购产品列表的排版和间距。
- 排版：您可以自定义除表单之外的所有文本。
- 表单：自定义表单的排版和颜色。 使用行间距设置来增加间距。
- 在 Mobile View 中查看页面：响应式设计非常重要，您可以使用 Elementor 内置视图查看您的页面在不同屏幕尺寸上的外观。
编辑结帐页面只是触及表面。 Elementor 和 WooCommerce 是一个强大的组合，您可以使用它让您的商店真正脱颖而出。
因此，我们已经讨论了使用 Elementor 自定义整个结帐页面是多么容易。 但是，如果您不想使用 Elementor 之类的插件，而只想使用内置编辑器怎么办？ 继续阅读以了解如何做到这一点。
如何使用内置编辑器自定义结帐页面的设计
在本节中，我们将讨论如何使用 Gutenberg 编辑器对 WooCommerce 结帐页面进行更改。 要在编辑器中打开页面，请将鼠标悬停在结帐页面上，然后单击编辑。
这将引导您进入古腾堡块编辑器。 块编辑器适用于不同类型内容的水平块。 您可以通过添加左侧库中的块来添加文本、图像或标题。 每个块都可以单独定制。 通过单击左上角的 +，您将在边栏中看到块库。 您可以通过单击块选项卡右上角的齿轮按钮来更改每个块的设置。
您还将在实际页面上看到一些文本，即简码。 简码是 WooCommerce 将结帐字段包含到您的页面的方式。 它看起来像这样：
woocommerce_checkout
不要删除此简码。 您可以在此简码下方和上方添加图像或文本。 在本文后面，我们将讨论编辑这些字段。 但是，现在，让我们谈谈如何对总体设计进行更改。 以下是执行此操作的步骤：
添加文字
- 添加段落小部件：您可以在简码下方和上方添加文本。 您会看到“键入/选择一个块”的文本。 您可以拖放“段落”小部件，也可以开始输入所需的文本。 双击以转到不同的块。
- 自定义文本：您可以在右侧的块选项卡中编辑排版和颜色。 只需选择文本或块。
要添加标题，您可以更改添加标题小部件并进行相同的编辑。 您也可以选择不同的尺寸，例如 H1、H2 等。
添加图片
- 添加图像小部件：单击左上角的 + 并在搜索栏中输入图像。 选择您想要的图像小部件类型，然后单击或拖放到列中。
- 选择图像：通过单击媒体库从媒体库中选择图像，或单击上传从本地计算机中选择文件。 如果您愿意，可以添加标题。
添加按钮
- 添加按钮小部件：您可以在块库的搜索栏中搜索它。
- 自定义按钮：在出现的弹出窗口中更改按钮的标签、对齐方式和标签的版式。 您还可以在块设置中更改颜色、边框和大小。
- 超链接按钮：单击弹出窗口中的 URL 按钮，然后粘贴您希望将按钮链接到的页面的 URL。
探索块编辑器中的其他小部件，以帮助您自定义整个页面。 我们还建议您通过单击右上角的预览来预览页面。 完成后，单击更新。
虽然仅使用 Gutenberg 编辑器可以做很多事情，但您无法更改字段等特定内容。 下一节将介绍如何进行这些更改。
如何自定义结帐页面字段
更改结帐页面字段可能比您意识到的更有影响力。 它确实为您的客户定义了体验。 有两种方法可以解决：使用字段管理器插件或手动。 我们将在本节中讨论这两者。
使用扩展名自定义页面字段
我们在本教程中使用 WooCommerce 插件的 Checkout Field Manager。 您必须购买扩展程序。 完成后，以下是开始的步骤。
- 安装并激活插件：在您的 wp-admin 面板上，将鼠标悬停在 Plugins ve toband 点击Add New 。 单击上传插件并选择文件和主题选择您刚刚下载的 zip 文件夹。 单击立即安装并激活。
- 在 WooCommerce 设置中编辑或添加字段：将鼠标悬停在 WooCommerce 上并单击Checkout 。 单击顶部的账单、运输和附加，您可以在此处管理所有字段，如下所示：
- 禁用字段：您可以通过切换禁用列禁用不必要的字段。
- 使某些字段成为必填项：您可以打开必填项并使某些字段成为必填项。
- 编辑字段的外观：您可以通过从“位置”列的下拉菜单中进行选择，将字段的对齐方式更改为左对齐、右对齐或宽对齐。
- 编辑现有内容：单击相关字段末尾的编辑，将出现一个弹出窗口。 您可以更改名称、类型、标签、描述等。然后，单击保存。
- 添加新字段：单击左上角的+添加新字段。 您可以根据需要填写详细信息。 单击保存。
- 保存更改：完成后，单击左下角的保存。
使用代码自定义页面字段
如果您熟悉编码，可以将代码添加到主题的 function.php 文件中。 一般来说，使用代码修改主题时，首先创建一个子主题并对其进行修改。 这将在主题更新时保留您的更改和自定义。
需要注意的是，我们在上一节中提到的扩展 Checkout Field Manager 会覆盖对 functions.php 文件所做的更改。 因此，它们不能并行使用。
此外，重要的是首先要了解 WooCommerce 如何加载页面字段。 WooCommerce 通过过滤器放置字段。 这允许您添加自定义代码来更改字段。 对于 WooCommerce 结帐页面，此过滤器如下：
$this->checkout_fields = apply_filters('woocommerce_checkout_fields', $this->checkout_fields);
这意味着挂钩 woocommerce_checkout_fields 可以覆盖任何现有代码。 钩子本质上是修改 WordPress 核心文件的代码片段。 您的网站附带了一些钩子：
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- Woocommerce_checkout_after_order_review
- Woocommerce_after_checkout_form
此外，WooCommerce 提供了一长串钩子供您选择。 您还可以查看 Business Bloomer 上的这个钩子列表，它可以帮助您可视化这些钩子。 现在，让我们谈谈如何更改字段。
更改 order_comments 字段中的占位符
// 挂钩
add_filter（'woocommerce_checkout_fields'，'custom_override_checkout_fields'）；
// 我们的挂钩函数 - $fields 通过过滤器传递
函数 custom_override_checkout_fields( $fields )
$fields['order']['order_comments']['placeholder'] = '我的新占位符'
返回$字段
}
更改 order_comments 字段的标签
// 挂钩
add_filter（'woocommerce_checkout_fields'，'custom_override_checkout_fields'）；
// 我们的挂钩函数 - $fields 通过过滤器传递！
函数 custom_override_checkout_fields( $fields )
$fields['order']['order_comments']['placeholder'] = '我的新占位符'
$fields['order']['order_comments']['label'] = '我的新标签'
返回$字段；
}
删除字段
// 挂钩
add_filter（'woocommerce_checkout_fields'，'custom_override_checkout_fields'）；
// 我们的挂钩函数 - $fields 通过过滤器传递！
功能 custom_override_checkout_fields( $fields ) {
未设置（$fields['order']['order_comments']）
返回$字段；
}
有一篇关于使用代码帮助您自定义结帐字段的 WooCommerce 文章。
现在，让我们谈谈如何更改结帐页面的布局。
如何更改结帐页面布局
您可以通过添加操作挂钩来自定义 WooCommerce 页面的布局。 以下是一些您可以更改它的方法：
使用片段管理插件
我们将从更简单的方法开始，即使用片段管理插件添加它。
- 安装和激活代码片段管理插件：我们正在使用代码片段。 你可以在你的插件目录中找到它。 将鼠标悬停在 Plugins 上，然后单击Add New 。 然后搜索代码片段 并单击安装并激活。
- 复制钩子：转到 WooCommerce 钩子库并复制代码或在文本编辑器中创建自定义钩子并复制它。 例如，如果您想在底部添加条款和条件部分，请复制以下内容。
- 添加代码：将鼠标悬停在左侧的 Code Snippets 上，然后单击Add New 。 为钩子添加一个可识别的名称。 选择功能选项卡。 将代码粘贴到底部。 确保选中Run Snippet Everywhere选项，然后单击Save Changes and Activate。 您现在已经成功添加了一个钩子。
手动添加代码
如果您想将其添加到主题的 function.php 文件中，请执行以下步骤：
- 打开主题文件编辑器：将鼠标悬停在侧边栏的外观上，然后单击主题文件编辑器。
- 复制挂钩代码：您可以从 WooCommerce 库中复制它，也可以在文本编辑器上创建自定义代码并复制它。 就像我们在上一节中使用的那样，如果您想添加一个 T&C 部分，这里是您要复制的代码。 WooCommerce hooks 库中还有更多内容。
- 编辑functions.php 文件：在右侧，滚动文件菜单直到找到functions.php。 粘贴您复制的代码，然后单击更新文件。 恭喜。 你已经为你的主题添加了一个钩子。
结帐页面的其他插件和扩展
以下是我们建议您安装的一些附加扩展，因为它肯定会帮助您创建令人惊叹的结帐体验：
- WooCommerce Checkout Addons：此扩展允许客户在他们的订单中包含插件，例如礼品包装。
- WooCommerce 单页结帐：这使您可以将任何页面设置为结帐页面，并使购物过程更容易，因为客户现在可以在同一页面上选择和购买产品。
- WooCommerce 社交登录：这允许客户使用社交媒体帐户而不是他们的电子邮件或电话号码登录。
- YITH WooCommerce 订单跟踪：这有助于轻松管理运输信息。 它允许您的客户跟踪他们的购买。
- 适用于 WooCommerce 的 YITH 高级退款系统：这可以帮助您设置退款系统。
为什么要自定义 WooCommerce 结帐页面？
结帐页面的主要目标是鼓励您的客户从您的网站购买商品，这就是自定义结帐页面这样做的原因：
- 为您的客户更快：如果您可以删除不必要的字段并为您的客户加快购买过程，他们就不太可能放弃购物车。 过程越长，客户购买任何东西的积极性就越低。
- 追加销售更多产品：您可以使用结帐页面销售他们可能感兴趣的其他产品或相关产品。 这是您向客户展示他们知道他们需要但不知道您销售什么的机会。
- 让结账过程感觉安全：您可以添加推荐信，这将帮助客户感觉他们可以信任您。 您还可以对您要求某些信息的原因保持透明。
自定义 WooCommerce 结帐页面的最佳方法
- 轻松创建帐户：让您的客户轻松创建帐户。 在将产品添加到购物车和尽快为产品付款之间留出时间。 删除不必要的字段，例如“公司”。 如果可能，将其设为可选。
- 添加信任因素：这会在客户内部建立信任，相信他们的钱会流向安全的地方。
- 添加社交证明元素：这鼓励客户在他们的社交媒体网站上与您的商店分享他们的体验。
- 收费透明：不要有不必要的额外收费。 确保你清楚他们的钱去哪儿了。 例如，除了产品成本外，只增加运费。
- 提供足够的结帐选项：在添加太多和太少的付款选项之间取得平衡。 使用在您的目标受众中流行的支付网关。 我们有关于将 Stripe 或 PayPal 添加到您的 WooCommerce 页面的文章，您可以查看这些文章。
最后的想法
默认的 WooCommerce 结帐是基本但可自定义的。 结帐页面的每个方面都可以进行编辑，为您的客户创造令人惊叹的购物体验。 但是，在您进行任何更改之前，有必要使用 BlogVault 备份您的站点。 当出现问题或您不小心使购物体验变得更糟时，这可以为您提供保险。 BlogVault 不仅需要实时备份，而且恢复过程绝对是小菜一碟。
常问问题
什么是动作挂钩？
动作挂钩可帮助您将一段代码添加到影响站点运行方式的核心文件中。 WordPress 有一个庞大的钩子库，您可以使用它们，也可以创建自己的自定义钩子。
您如何在 WooCommerce 结帐页面上编辑文本？
您可以使用内置的 WordPress 编辑器或页面构建器插件来编辑和自定义整个网站的字体和文本。 我们建议使用像 SeedProd 这样的页面构建器。 它易于使用，并且有免费和付费版本。
你在哪里添加钩子和过滤器？
您应该在子主题的 function.php 文件中添加挂钩和过滤器。 子主题与父主题具有相同的外观和感觉，但允许您调整和添加代码。 您可以通过转到外观 > 主题并查找没有特征图像的主题来识别您的子主题。= 如果您没有子主题，请查看这篇关于创建主题的文章。