如何使用 Divi 设置 WooCommerce 结帐页面

在线购物旅程中最重要的阶段是完成购买。 无论用户花多长时间浏览您的在线商店，如果它没有转化为销售，那么它就无关紧要。

让客户的结账过程尽可能无缝是至关重要的。 那么，如何在 WooCommerce 商店上创建易于使用的结帐页面？ 在这篇文章中，我们将了解如何使用 Divi 设置自定义的 WooCommerce 结帐页面。

为什么需要定制的 WooCommerce 结帐页面？

没有客户必须处理繁琐的结帐过程。 事实是，如果您的结帐页面和流程压力很大，您的客户就不会闲逛。 如果您目前在电子商务网站上遇到废弃的购物车，那么检查您的结帐页面可能是个好主意。

从购物体验的开始到最后阶段，您需要给您的客户一个“哇”的效果。 如果您选择传统的 WooCommerce 结帐页面，您将无法实现此效果。

您需要创建一个独特、无缝且易于使用的结账流程，为您的客户提供流畅的购物体验。 创建自定义结帐页面的一些优点如下：

• 减少购物车放弃

错过的销售机会通常是由于放弃购物车造成的。 在这种情况下，客户已经将商品放入购物车，但在排队的某个地方，他们在没有完成购买的情况下离开了网站。 复杂的结帐页面通常会导致放弃购物车。

如果您的客户必须经历一个漫长的过程或觉得该过程不安全，他们很可能对完成交易失去兴趣。 使用自定义结帐页面，您的客户很有可能会发现流程更轻松、更安全。

• 快速简便的交易

您的销售漏斗应该尽可能短且更快地完成。 当您设置和自定义您的 WooCommerce 结帐页面时，您可以轻松消除不必要的负担，只关注交易过程中的重要细节。

结帐流程需要填写多个页面，客户可能会厌倦并离开您的网站。 但是，当整个流程得到简化时，您可以帮助您的客户更快、更轻松地完成购买过程。

如何设置自定义 WooCommerce 结帐页面

您的 WooCommerce 页面带有默认结帐页面。 您可以使用第三方插件或简码对其进行编辑。 如果您是新用户，您可能会发现使用这些选项很难编辑结帐页面。 这就是使用像 Divi Builder 这样的插件的地方。

Divi Builder 有一个 Divi 商店模块，可让您使用自定义结帐页面构建令人惊叹的在线商店。 在本节中，我们将查看设置自定义 WooCommerce 结帐页面的分步指南。

在此之前，了解 SSL 证书、数据保护和网站安全性的重要性至关重要。 您需要 SSL 证书以获得额外的安全层来加密存储在您平台上的数据。

SSL 证书向您的客户表明您的网站可以安全地提供信用卡详细信息。 现在我们已经清除了这部分，让我们深入研究创建自定义 WooCommerce 结帐页面的详细信息。

第一步：在使用 Divi Builder 插件之前，在 WooCommerce 插件设置中设置您的结帐页面。 为此，请转到您的 WooCommerce 仪表板并单击“设置”。

接下来，单击“高级”选项卡并找到结帐页面。 从下拉菜单中选择“结帐”选项并滚动到页面末尾以单击“保存”按钮以保存更改。

第二步：结帐页面已经设置好，下一步是安装 Divi Shop Builder 插件。 因此，导航到优雅主题官方网站以购买 Divi Shop Builder 插件。 单击“我的帐户页面”中的下载链接进行下载。

下载后，安装并激活插件。 安装完成后，插件将显示在 Divi 菜单中。 在继续之前，请确保您为购买的插件进行了身份验证。

为此，请转到优雅主题网站上的“我的帐户页面”以复制许可证密钥。 当您对插件进行身份验证后，您就可以开始使用它了。 Divi Shop Builder 在 Divi Builder 插件中工作，这使得构建您的 WooCommerce 商店成为一项非常无缝的任务。

第三步：下一步是创建您的自定义 WooCommerce 结帐页面。 为此，请单击以打开结帐页面并启用购买的 Divi Builder。 接下来，打开 Divi Builder 插件并开始添加模块。

您会发现 Divi Builder 中添加了五个新模块（结帐账单、结帐优惠券、结帐订单、结帐运输和购物车/结帐通知）。 这些模块将帮助您在 WooCommerce 商店上设置自定义结帐页面。 以下是这些模块的工作原理。

结帐帐单：这可以自定义所有表单输入字段，客户可以在其中输入他们的帐单详细信息。 您可以根据需要编辑字段标签。

结帐运输：这允许您的客户指定辅助地址。 与 Checkout 计费一样，您也可以根据需要编辑表单字段。

结帐优惠券：这使您的客户可以输入他们被分配的唯一促销代码以申请特别折扣。 您应该将 Checkout Coupon 模块与其他模块分开放置，以使其正常工作。 如果您有空间限制，请减少行和部分之间的填充以创建更多空间。

结帐订单：这是您的客户在进行付款选项之前建立并确认订单的地方。 您还可以使用拖放功能酌情编辑此部分。

结帐通知：如果您想在其他结帐页面添加注释，可以使用此模块。 您可以根据需要在设计中进行复杂或简单的设计。

使用结帐模块时，您必须确保它们与其他表单模块不在同一部分。 如果将它们放在一起，它们将不起作用。 在构建结帐页面时，您应该将联系表单模块、选择加入表单模块、评论模块和登录模块放在单独的部分中，以使其正常运行。

与 Divi 主题中的其他模块一样，您可以使用 Divi Builder 自定义样式您的结帐模块。 为此，请按照以下步骤操作：

• 点击打开结帐模块

• 单击“设计”选项卡

• 使用不同的元素以匹配您的设计和品牌标识的方式来设计您的页面

• 您还可以通过“高级”选项卡添加更多自定义。 在“高级”选项卡中，您可以设置设备的滚动效果、过渡、定位和可见性设置。 您还可以为高级 CSS 脚本添加自定义 ID 和类。

结论

Divi 减轻了设置 WooCommerce 结帐页面的压力。 它使您可以编辑当前的结帐页面并创建自定义的购物车页面。 divi 插件具有许多功能，可让您的商店像您想象的那样吸引客户。 它还使购物和结帐过程非常无缝。