如何编辑 WooCommerce 结帐页面 W/O Elementor？

不喜欢默认的 WooCommerce 结帐页面，因为它看起来很乏味，而且结帐过程也很长？ 好吧，这可能正是编辑页面的正确时机。 这样，您的客户可以快速下订单，这也有助于推动更多转化。

但是您究竟如何自定义您的 WooCommerce 结帐页面？ 事实证明，有 3 种有效的方法，包括手动编辑、使用插件和 Elementor 页面构建器。 但是，最好的方法取决于您觉得哪一种容易使用。

现在，事不宜迟，让我们首先找出您可能想要自定义结帐页面的原因。 之后，我们可以看看如何结合使用 Elementor 和 Shopready来编辑您的 WooCommerce 结帐页面。

为什么您可能想要编辑您的 WooCommerce 结帐页面

您的 WooCommerce 结帐页面可以在订单购买过程中产生重大影响。 正因为如此，您可能想要编辑它的原因有很多。 这些包括：

提升用户体验

任何默认 WooCommerce 的结帐过程都相当冗长。 因此，您可以选择编辑页面并缩短结帐流程。 这样，您的客户将获得更好的购物体验。

确保结帐安全

如果您的客户认为他们的账单和个人信息不安全，他们可能会离开而不进行购买。 因此，您应该考虑编辑结帐页面模板以包含安全支付网关。

允许快速轻松地购买

您可能想要自定义 WooCommerce 结帐页面的另一个原因是帮助您的客户快速下订单。 例如，您可以包括自动填写详细信息的选项。

提升品牌形象

感觉您的品牌在人群中并不突出？ 您可能想要编辑您的 WooCommerce 结帐页面，使其具有专业的外观和感觉。 一种方法是更改​​其设计甚至页面模板。

如何编辑 WooCommerce 结帐页面 WO Elementor？

有很多方法可以编辑您的 WooCommerce 结帐页面。 您可以选择手动完成，使用elementor 和 Shopready 的组合，或使用插件。 这是你的选择。 因此，让我们讨论每种方法的工作原理。

方法一：手动编辑

此方法涉及使用代码来编辑您的结帐页面模板。 因此，与使用其他编辑方法相比，它可以让您更好地控制自定义。 以下是有关如何执行此操作的简单步骤。

第 1 步：选择过滤器以自定义结帐字段

要编辑结帐字段，您将使用电子商务网站上的 functions.php 文件。 这应该很容易，因为 WooCommerce 为您提供了一个过滤器列表，可让您自定义结帐字段。 例如，有：

• WooCommerce_shipping_fields
• WooCommerce_after_checkout_form
• WooCommerce_billing_fields
• WooCommerce_checkout_after_terms_and_conditions

第 2 步：编辑占位符文本

接下来，首先自定义 order_comments_fields 上的占位符文本。 您只需将以下代码片段添加到您的 functions.php 文件即可完成此操作。

第 3 步：删除字段

如果你想删除一个字段，你只需将下面的代码添加到你的 functions.php 文件中。

第 4 步：添加必要的字段

要将字段添加到您的 WooCommerce 结帐页面，您只需将以下代码插入您的 function.php 文件。

插入代码后，您会注意到会出现一个额外的字段。 不过，没什么好担心的。 您只需复制以下代码即可验证数据。

最后一步：保存数据

最后，输入以下代码以确保保存客户在结帐页面上输入的每个详细信息。

方法 2：使用 Elementor Page Builder

手动编辑结帐页面需要您有编码经验。 幸运的是，如果您不是精通技术的人，您可以使用 elementor，它是最好的 WordPress 页面构建器之一。 以下是有关如何使用 elementor 进行编辑的步骤。

第 1 步：找到结帐页面

首先，转到您的 WordPress 仪表板并找到页面列表。 在页面列表下，您可以找到默认的结帐页面。 只需单击“编辑”按钮即可启动 WordPress 编辑器。 接下来，选择使用 Elementor 编辑选项以启用 Elementor，然后启动 Elementor 的编辑器。

第 2 步：添加 Elementor 结帐小部件

接下来，在 elementor 中打开默认结帐页面并删除现有的 WooCommerce 结帐小部件或短代码。 然后，在 Elementor 编辑器中添加结帐小部件。 您应该能够看到结帐页面的实时预览。

第 3 步：编辑结帐页面上的内容

在位于 Elementor 侧边栏的内容选项卡下，单击常规设置。 从设置中，您可以决定选择一列或两列布局来编辑和自定义内容。

此外，您可以编辑帐单和运输详细信息、附加信息、您的订单、优惠券和付款详细信息。 如果你想添加一个优惠券框，也是可以的。

第 4 步：编辑结帐页面样式

在“内容”选项卡旁边，单击“样式”选项卡以进一步自定义结帐页面的样式。 您希望确保自定义结帐页面的设计与您商店的设计相匹配。

在样式选项卡下，您可以选择不同的设计选项，包括部分、排版、表格、订单摘要和购买按钮。 只需调整并尝试不同的选项，即可找到使您的结帐页面脱颖而出的样式。

第 5 步：保存更改

完成自定义结帐页面模板的样式后，保存所有更改。 接下来，在最终发布页面之前预览更改。

方法3：使用插件

编辑 WooCommerce 结帐页面的另一种简单快捷的方法是使用插件。 现在，有一些插件选项可供选择。 但是，在本文中，我们将重点介绍使用Elementor 和 Shopready 的组合。

第 1 步：为 elementor 安装 Shopready 插件

在安装此插件之前，请确保您的 WordPress 具有 Elementor 页面构建器。 这是因为 Shopready 不能单独工作。 然后，在您的 WordPress 仪表板上，单击插件并选择添加新的。 接下来，在搜索框中找到 Shopready，然后单击激活按钮。

第 2 步：自定义 Shopready 结帐页面的内容

在您的 WordPress 仪表板上，选择打开 Shopready。 您将被定向到 Shopready 的仪表板。 在仪表板下，有小部件、模块和模板选项可帮助您自定义页面。 您可以选择任何选项来编辑和自定义内容。

第 3 步：启用小部件

单击小部件选项并选择启用全部选项卡。 然后，选择保存更改。 但是，如果您不想启用所有字段，只需选择您喜欢的选项并保存更改。

第 4 步：启用模块

接下来，选择 Modules 选项并单击 Enable All。 您还可以选择全部禁用选项或选择性地启用一些选项。 完成后，单击“保存更改”按钮。

第 5 步：启用模板

在此部分下，您将找到诸如商店、结帐页面、购物车、产品详细信息页面等选项。 单击首选模板选项上的启用选项卡，然后单击保存。

第 6 步：启用货币 API

单击 API 选项卡并在提供的空白字段中输入您的货币 API 密钥。 然后，选择保存更改选项以完成该过程。

为什么使用 Shopready 来编辑 WooCommerce 结帐页面

ShopReady 只是 Elementor 的一个附加组件。 由 QuomodoSoft 开发，这个插件在使用它来编辑你的 WooCommerce自定义结帐页面时提供了很多好处。 这些包括：

广泛的小部件

该插件为您提供了 100 多个商店页面小部件，您可以轻松地将它们添加到 Elementor 页面。 因此，您可以根据需要快速自定义 WooCommerce 结帐页面。

预建模板

如果您是 WooCommerce 的新用户，您应该考虑使用 Shopready 来编辑您的结帐页面。 这是因为该插件具有预先设计的模板，以便于定制。

以客户为中心的功能

你应该使用这个插件来编辑你的 WooCommerce 页面的另一个原因是它以客户为导向的功能。 其中一些包括感谢页面、添加优惠券框选项和产品比较。

移动友好

此插件允许您编辑结帐页面并使其适合移动设备。 因此，无论他们使用何种设备，您的客户都可以获得出色的购物体验。

结论

总体而言，您可能想要编辑 WooCommerce 结帐页面的原因有很多。 您可能希望改善客户的用户体验、确保页面安全或改善您的品牌。 无论哪种情况，您都可以选择使用插件、elementor 或手动进行编辑。

当然，使用插件或elementor & Shopready 的组合是最简单的方法。 这是因为 Shopready 提供了广泛的小部件可供选择。 因此，您可以编辑结帐页面并根据需要使其个性化。 但是，如果您有编码经验，则始终可以手动编辑页面。

如何在 WooCommerce W/O 插件中添加愿望清单