如何使用 Elementor 自定义 WooCommerce 结帐页面

正在寻找自定义 WooCommerce 结帐页面的最简单方法？

过去，结帐页面设计需要依赖 WooCommerce 主题。 或者，您可能已经使用了自定义 CSS 或第三方 WooCommerce 结帐插件。

但是，借助 Elementor Pro 中的新结账小部件，您现在可以使用 Elementor 的可视化界面和无代码选项完全自定义您的结账页面。 此小部件与 Elementor 购物车和我的帐户小部件一起使用，可帮助您设计商店的所有关键页面。

在本教程中，您将学习如何使用 Elementor Pro 的结账小部件来自定义和优化商店的结账页面，而无需离开 Elementor。

然后，我们还将分享一些关于如何使用 WooCommerce 操作挂钩进一步自定义结帐页面的额外提示。

如果您使用的是 Elementor Pro 的结帐小部件，则无需使用代码，但如果您想将自定义内容添加到结帐页面，例如显示在信用卡下方的一组信任徽章，这些操作挂钩可能会很有用领域。

如果您更喜欢观看视频教程，可以观看上面的视频，了解如何使用 Elementor Checkout 小部件。

否则，请继续阅读与视频平行的基于文本的完整教程，以及视频中未涵盖的有关使用 WooCommerce 操作挂钩的一些额外提示。

Elementor Pro 结帐小部件如何工作？

WooCommerce 结账页面是购物者通过输入地址、联系方式、账单信息等来完成订单的页面。

对于任何商店来说，它都是必不可少的页面，因此针对转化对其进行优化并使其尽可能对用户友好非常重要。

使用 Elementor Checkout 小部件，您可以直接从 Elementor 完全自定义商店的结账页面。 这有助于您创建与商店其他部分一致的设计，并优化页面上的关键细节。

您将能够更改颜色和排版、调整间距、更改部分和表单文本等等。 您可以在结帐范围内进行更改，也可以启用精细选项以将不同样式应用于结帐的特定部分。

例如，如果您想引起对优惠券字段的注意，您可以添加特殊颜色、边框等——所有这些都需要零代码。

如何使用 Elementor 自定义 WooCommerce 结帐页面

现在，让我们进入详细指南，了解如何使用 Elementor Pro 中的结账小部件来自定义商店的结账页面。

同样，如果您更喜欢以视频​​格式查看本教程，可以在上方观看。 两个教程包含相同的信息。

1. 在 Elementor 中编辑商店的默认购物车页面

当您创建 WooCommerce 商店时，WooCommerce 会自动为您的商店创建一个使用 WooCommerce 结账简码的结账页面。

在本教程中，为简单起见，您可以使用同一页面。 只是，您将在 Elementor 中编辑页面并添加 Checkout 小部件，而不是依赖 WooCommerce 简码。

首先，转到 WordPress 仪表板中的页面列表并找到结帐页面。 WooCommerce 会自动使用标有“结帐页面”的标识符对其进行标记。

找到正确的页面后，单击“编辑”按钮打开 WordPress 编辑器。

进入编辑器后，单击使用 Elementor 编辑按钮为此页面启用 Elementor 并启动 Elementor 的编辑器。

2. 用 Elementor Checkout Widget 替换 WooCommerce Checkout Shortcode

当您在 Elementor 中打开默认购物车页面时，您应该会看到一个非常简单的设计。 页面上的唯一元素将是 Elementor 文本编辑器小部件内的 [woocommerce_checkout] 简码。

要使用 Elementor 控制您的结帐，您首先要删除现有的小部件/简码：

然后，在其位置添加 Elementor Checkout 小部件。 添加结帐小部件后，您将在编辑器中看到结帐页面的实时预览。

注意– 由于 Elementor 编辑器为您提供了与网站访问者将看到的内容完美匹配的视觉预览，因此您需要将一些商品添加到购物车中，以便您可以看到实际的结帐流程。 这是您需要做的所有事情：

1. 转到商店的前端。
2. 添加一些项目到您的购物车。
3. 重新加载 Elementor 界面。

重新加载 Elementor 后，这些项目应该会在您进行设计时显示在结帐摘要中。

3.自定义结帐页面的常规设置

现在，是时候开始定制了。

首先，在 Elementor 侧边栏中打开 Checkout 小部件的设置。

让我们首先浏览小部件的“内容”选项卡中的所有设置。

一般 - 一栏或两栏布局

首先，您可以使用“常规设置”区域为您的结账页面选择单栏或双栏布局。

如果您选择两列布局，您还可以将右侧的列设置为粘性。 如果您启用右粘列，您将获得一个额外的选项来添加偏移量，这有助于您避免标题与该列重叠。

账单和运输细节

帐单和运输详细信息部分允许您自定义帐单和运输表格详细信息。

如果您在 WooCommerce 的设置中将账单和送货详细信息设置为相同，您将同时看到这些字段。 您可以通过转到WooCommerce → 设置 → 运送并选择强制运送到客户账单地址来启用此功能。 否则，您将分别看到它们。

首先，您可以为此部分设置部分标题和对齐方式。

然后，您可以打开每个单独字段的设置以自定义标签和占位符。

附加信息

“附加信息”部分可让您自定义结帐页面的此区域。 默认情况下，这是购物者可以留下特殊订单备注的地方，但您可能会看到其他详细信息，具体取决于商店的设置。

与结帐页面的其他部分一样，您可以自定义此部分的对齐方式和标签。

或者，您还可以选择从结帐页面隐藏此部分，如果购物者不需要留下自定义备注，这可能会很有用。

你的订单

您的订单设置可让您自定义结帐的订单摘要部分。 如果您使用两栏布局，此部分将出现在右侧栏的顶部。 在单列布局中，它将显示在账单和运输详细信息下方。

优惠券

优惠券设置还允许您自定义优惠券部分的标题和对齐方式。 但是，您还可以选择自定义应用优惠券代码的链接文本。 这可以帮助您为使用优惠券的购物者创造更加优化和用户友好的体验。

支付

付款设置让您可以更改购买按钮的对齐方式，还可以自定义条款和条件消息以及链接文本。

为了查看条款和条件消息，您需要在 WooCommerce 设置中设置条款和条件页面。 为了简化操作，您可以在不离开 Elementor 的情况下选择此页面：

1. 单击 Elementor 界面左上角的汉堡菜单图标。
2. 选择站点设置。
3. 选择WooCommerce 。
4. 使用条款和条件字段搜索并选择适合您的条款和条件的页面。

回头客

如果您在WooCommerce的设置中允许访客结账，您还将获得一个名为“回头客”的附加设置区域，可让您自定义提示回头客登录其现有帐户的消息。

4.自定义结帐页面的样式设置

接下来，您可以转到“结帐”小部件设置的“样式”选项卡，以进一步自定义结帐页面的样式和设计，包括确保它与商店的其他设计相匹配。

以下是您可以在不同设置区域配置的一般设计选项……

部分

在“部分”设置中，您可以控制所有不同结帐部分的整体样式。

例如，如果你改变背景颜色，它会影响所有部分的背景。 您还可以根据需要调整边框和间距。

排版

在排版设置中，您可以自定义结帐页面上大部分文本的颜色和排版，包括标题、次要标题、描述、消息、单选按钮、复选框等。

您无法在此处自定义的一点排版是表单，您将从下一节开始进行自定义。

形式

在表单设置中，您可以控制结帐页面表单和表单字段的所有内容，这主要影响账单/运输字段和优惠券表单。

您可以调整各种表单字段的列和行间距。 您还可以自定义标签和字段的排版，以及调整间距、边框和背景。

除此之外，您还可以选择设计优惠券按钮的样式，就像您网站上的任何其他按钮一样。

订单摘要

在Order Summary中，您可以控制行，这会影响购物车中商品列表的间距。

您还可以控制不同摘要项的颜色和排版。 例如，您可以为项目使用一种排版设置，而为订单总计使用不同的排版设置。

购买按钮

在购买按钮设置中，您可以完全自定义购买按钮，包括排版、颜色、间距、边框等。

这可能是结帐页面上最重要的按钮，因此您需要确保它引人注目并与您的其他设计相匹配。

定制

最后，自定义项允许您为结帐页面的特定部分添加单独的样式控件。 您可以为以下区域添加它们：

• 结算明细
• 附加信息
• 收件地址
• 订单摘要
• 优惠券
• 支付

例如，您可能希望通过添加自定义边框使订单摘要从结帐页面的其余部分中脱颖而出。

您可以通过启用订单摘要区域的自定义设置并根据您的喜好配置它们来实现这一点。

5. 为移动购物者调整结账方式

现在您已完成为桌面用户定制结帐页面，您需要切换到响应模式，看看是否需要为移动或平板电脑访问者进行任何调整

与您使用 Elementor 创建的所有设计一样，您的结帐页面设计默认是响应式的。

但是，如果需要，您也可以使用 Elementor 的移动控件来调整设计。 您需要做的就是在可以针对不同设备进行调整的设置旁边寻找设备图标。

例如，您可能希望为您的移动设计略微调整不同元素的间距。

6. 如果需要，在站点设置中调整 WooCommerce 页面分配

最后一步完全是可选的，但值得注意的是，您还可以从 Elementor 站点设置区域控制关键的 WooCommerce 页面分配。

如果您为结帐页面创建了一个新页面而不是使用 WooCommerce 创建的默认页面，这可能会很有用。

您可以从常规站点设置区域的WooCommerce选项卡访问这些选项。 您会在设置部分下找到 WooCommerce 选项。

如何使用代码自定义 WooCommerce 结帐页面

对于 WooCommerce 结帐页面的其他自定义，您可以使用代码并利用 WooCommerce 的众多结帐操作挂钩。

如果您想向结帐页面添加新内容，例如在支付按钮下方插入信任徽章，这会特别方便。

这种方法的好处在于它仍然可以与 Elementor Checkout 小部件一起使用，这使其成为对 Elementor 进行其他更改的很好的补充。

什么是 WooCommerce 结帐操作挂钩？

WordPress 操作挂钩实质上允许您使用 PHP 在结帐页面的不同部分注入内容。 例如，您可以添加新的文本消息、包含图像（可能是信任徽章）等。

WooCommerce 总共为结帐页面提供了 16 种不同的操作挂钩。

前九个钩子总是可用的：

• 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 设置，最后七个挂钩可能可用也可能不可用。 例如，如果您没有在结帐页面上启用注册，您将无法使用与注册表单相关的操作挂钩：

• woocommerce_checkout_before_terms_and_conditions
• woocommerce_checkout_after_terms_and_conditions
• woocommerce_before_checkout_billing_form
• woocommerce_before_checkout_registration_form
• woocommerce_after_checkout_registration_form
• woocommerce_before_checkout_shipping_form
• woocommerce_after_checkout_shipping_form

要了解这些挂钩会将内容添加到结帐页面的何处，Business Bloomer 为每个位置维护了一个出色的视觉指南：

如何使用 WooCommerce 结帐操作挂钩

要使用操作挂钩注入内容，您需要将代码片段添加到子主题的functions.php文件中，或通过代码片段之类的插件添加。

因为您要向站点添加代码，所以我们强烈建议您先进行备份，然后再继续和/或先在暂存站点上测试更改。

首先，选择要添加内容的挂钩位置。

例如，假设您想在“下订单”按钮下方添加一组信任徽章。 为此，您将使用woocommerce_review_order_after_submit挂钩。

然后，您将添加如下代码片段：

add_action( 'action_name', 'your_function_name' );

函数 your_function_name() {

// 你的代码

}

例如，要添加信任徽章图像，代码可能如下所示：

add_action( 'woocommerce_review_order_after_submit', 'display_trust_badges' );

函数 display_trust_badges() {

echo '<img src=”trust-badges.png” />'

;}

在下方，您可以看到信任徽章出现在下订单按钮下方，即使在 Elementor 界面中使用 Checkout 小部件时也是如此：

如何测试您的 WooCommerce 结帐页面

在对结帐页面进行更改之前，我们强烈建议测试所有内容以确保没有问题。 毕竟，任何干扰您商店结账页面的事情都会对您的利润产生直接的负面影响。

许多 WooCommerce 支付方式包括可用于提交订单的测试模式。 官方 Stripe 网关插件和官方 PayPal 网关插件以及 WooCommerce 支付都是如此。 上一句中的所有链接都会将您带到该网关测试功能的正确文档页面。

或者，您也可以使用免费的 WC 订单测试插件，它添加了一个新的“订单测试”支付网关。 您可以通过转至WooCommerce → 设置 → 付款来设置此网关。

启用测试支付网关后，您可以提交一些测试订单，以确保所有结帐字段都正常工作，并且您的任何内容或设计更改都不会干扰结帐流程。

我们建议在台式机和移动设备上进行测试。

开始使用 Elementor 自定义您的 WooCommerce 页面

借助 Elementor Pro 中的结账小部件，您现在可以使用 Elementor 的可视化拖放设计完全自定义 WooCommerce 结账页面。

对于大多数人来说，Elementor 是您所需要的一切，因为它允许您自定义颜色、排版、文本、间距、边框等。

如果您想更进一步并向结帐页面添加新内容，您还可以使用 WooCommerce 的内置操作挂钩，它们与 Elementor Checkout 小部件完全兼容。

最重要的是，Elementor 不会限制您只能自定义结帐页面。

Elementor WooCommerce Builder 还可以帮助您使用 Elementor 的可视化拖放式构建器自定义商店的其他部分。 例如，您还可以自定义 WooCommerce 购物车页面、WooCommerce 单品页面、WooCommerce 我的帐户页面等。

您是否对使用 Elementor 或操作挂钩自定义 WooCommerce 结帐页面仍有疑问？ 让我们在评论中知道！