如何像 Shopify 一样进行 WooCommerce 结帐
已发表: 2021-10-07你想改变你的结帐并让它看起来像 Shopify 吗？ 我们为您准备了完美的教程。 在本指南中，我们将向您展示如何让您的 WooCommerce 结帐像 Shopify。
WooCommerce 是具有众多自定义选项的最灵活的电子商务平台之一。 但有时，所有这些特权对于网站管理员和客户来说可能是压倒性的。 例如，我们已经看到包含大量字段的复杂结帐页面会影响您的转化率。 这就是为什么您应该删除不必要的字段并保持结帐简洁明了的原因。
对于像 Shopify 这样具有非常简单的结帐页面的其他平台来说，这可能是一个优势。 例如，即使您可以自定义结账并创建单页结账，一些用户仍然更喜欢拥有类似 Shopify 的结账页面。 好消息是 WooCommerce 的巨大灵活性使您可以像 Shopify 提供的那样进行结帐。
在我们了解如何做到这一点之前，让我们看一下 WooCommerce 和 Shopify 结帐页面之间的区别。
WooCommerce 结帐与 Shopify 结帐
您已经知道可以在 WooCommerce 中添加许多结帐字段。 但是如果你添加太多，你最终可能会得到一个又长又复杂的结帐页面。 这可能会增加购物车放弃率并影响您的转化率，因为用户可能会发现填写这么多字段很乏味。
另一方面，如果您查看默认的 Shopify 结帐页面，它的设计简单而美观，只有必要的结帐字段。 相比之下，WooCommerce 结帐页面肯定可以改进以提高效率。
好消息是，由于 WooCommerce 有很多自定义选项，您可以轻松地使您的 WooCommerce 结帐看起来像 Shopify。
如何像 Shopify 一样制作 WooCommerce Checkout
在 WooCommerce 中创建 Shopify 结帐的最简单方法是使用插件。 WordPress 提供了许多可用于自定义结帐的插件。 在本节中，我们将分析一些使您的 WooCommerce 结帐看起来像 Shopify 的最佳工具。
WooCommerce 块
WooCommerce Blocks是由 Automattic 开发的免费插件。 它有许多专门为 WooCommerce 设计的 Gutenberg 块和一个专用于结帐的块。
在结帐块的帮助下，您可以轻松地使您的 WooCommerce 结帐看起来像 Shopify 结帐。 默认情况下，它甚至具有相似的布局和内容部分，使转换非常容易。 该工具还为结帐块提供了多种选项，以便您可以对其进行自定义以满足您的需求。
主要特点
- 简化结帐块
- 多个产品块选项
- 按类别和产品块的评论
- 很棒的支持
价格
这是一个免费插件，您可以从 WordPress 存储库下载。
结帐WC
CheckoutWC是最受欢迎的插件之一，用于自定义您的 WooCommerce 结帐。 它带有几个受 Shopify 启发的模板，因此您可以使用它们使您的 WooCommerce 结帐看起来像 Shopify。
该插件还具有响应式设计以及与大多数主要 WordPress 插件和主题的出色兼容性选项。 此外，它还为您的客户提供了方便的选项，例如密码生成器、地址自动完成功能等等。
主要特点
- 多个结帐页面模板
- 完全响应式设计
- 地址自动完成
- 购物车编辑
价格
CheckoutWC是一个高级插件，起价为每月 15 美元或每年 149 美元。 它还包括 30 天退款保证、免费更新和对一个站点的支持。
使用插件在 WooCommerce 中创建 Shopify 结帐
在本教程中，我们将使用WooCommerce Blocks让您的 WooCommerce 结账，如 Shopify。 它是一个出色的免费插件，具有许多功能来编辑您的 WooCommerce 商店和专用的结帐块。
在我们开始之前，请确保您已正确设置您的网站 WooCommerce。 另请记住，我们将使用 Divi 主题，因此如果您使用其他主题，您网站上的某些页面和选项可能会有所不同。 但是，您应该能够毫无问题地遵循这些步骤。
1. 安装和激活 WooCommerce 块
首先，安装并激活插件。 为此，在您的 WordPress 仪表板中转到插件 > 添加新内容，然后搜索 WooCommerce Blocks 插件。 找到它后，单击Install Now进行安装。
安装完成后，激活插件。 如果您需要有关此过程的更多信息，请查看我们的指南，了解如何手动安装 WordPress 插件。
2.配置和自定义结帐页面
现在您所要做的就是转到仪表板中的Pages ，找到Checkout 页面，然后按Edit 。
然后，您将在此处看到默认的 WooCommerce 结帐页面短代码。 由于我们想让 WooCommerce 结账看起来像 Shopify，您需要删除短代码。 要删除它，只需单击简码并按三个垂直点打开选项。
然后，单击删除块以删除短代码。 或者，您可以单击该块，然后按Ctrl+Alt+Z ，如选项快捷方式所示。
之后，单击“ + ”图标或输入“ / ”以添加新块并搜索“ Checkout ”。 选择结帐块并更新页面。 您将能够在 WooCommerce 中看到受 Shopify 启发的新结帐页面。
现在您有两个选择：保持原样或自定义。 让我们看看如何编辑它。
首先，打开屏幕右上角的设置图标。 页面和块设置将出现在右侧边栏中。 然后，单击其中一个块，您可以从块设置侧边栏中开始编辑特定块。
例如，如果您想编辑送货地址的字段，只需按送货地址块，您就会在右侧边栏中看到所有可用的设置。 从那里，您可以显示或隐藏结帐页面的字段编辑器。
完成所有必要的更改后，更新页面。 从前端检查您的结帐，您将看到受 Spotify 启发的新结帐页面。
专业提示：将购物车页面与结帐页面匹配
如果您有购物车页面，您可以对购物车页面重复上述过程，并匹配结帐页面和购物车页面的样式。
在您的 WordPress 仪表板中，只需转到Pages ，找到购物车页面并删除默认的 WooCommerce 购物车页面短代码。 然后，使用购物车页面添加一个新的购物车块并更新它。
这取决于您拥有的产品或服务的类型，但作为一般规则，我们建议您跳过购物车页面以缩短结帐过程。 如果您想了解更多相关信息，请查看我们的指南，了解如何在 WooCommerce 中跳过购物车页面。
使您的 WooCommerce Checkout 像 Shopify 的另一种方法
如果您认为通过编辑来自定义结帐页面的工作量太大，那么您还有另一种选择。 您可以使用高级插件CheckoutWC使您的 WooCommerce 结帐看起来像 Shopify。
为此，您需要订阅他们的其中一个计划，因为它是付费产品。 您还可以使用他们的 7 天免费试用来测试该工具是否能满足您的需求。
现在让我们看一下使用 CheckoutWC 在 WooCommerce 中创建 Shopify 结账的过程。
1.安装并激活CheckoutWC
首先，您需要激活并安装插件才能开始使用它。 在您的仪表板中，转到Plugins > Add New并单击Upload Plugin 。 上传您在购买期间下载的 zip 文件，上传完成后，按立即安装。
安装完成后，激活插件。 如果您对此过程有疑问，可以再次查看我们的手动安装 WordPress 插件指南。
2.选择结帐模板
此插件的主要优点是它具有专门设计的结帐模板 Shopify 结帐页面。 有 4 个模板，因此请为您的商店选择您更喜欢的一个。
只需转到 WordPress 仪表板中的Settings > Checkout for WooCommerce > Templates ，您将看到四个模板选项：
- 默认
- 未来主义者
- 复制
- 玻璃
Copify模板与 Shopify 结帐页面最相似，但其他三个也有一些 Shopify 元素。
选择模板后，就可以使用您的徽标对其进行自定义了。 打开设计选项卡，然后单击上传徽标。 上传图片后，请务必保存更改。
而已！ 现在从前端检查您的结帐，您将在 WooCommerce 商店上看到 Shopify 结帐页面。
奖励：删除 WooCommerce 结帐字段
最后，让我们看看如何从结帐中删除一些字段。
假设您不想让您的 WooCommerce 结帐与 Shopify 完全一样，但您仍想简化结帐页面并隐藏一些不必要的字段。 由于这使结帐过程更快，这将帮助您提高转化率并减少购物车放弃。
删除结帐的最简单方法是使用WooCommerce Checkout Manager插件。
此工具可让您根据需要添加、隐藏和编辑结帐字段，轻松自定义结帐页面。
安装并激活插件
首先，转到插件 > 添加新插件并搜索插件。 然后，安装并激活它。 这是免费增值工具，因此您可以下载免费版本或获得具有更高级功能的高级计划之一，起价仅为 19 美元（一次性付款）。
编辑结帐页面
安装插件后，转到WooCommerce > 设置并打开结帐选项卡。 您将看到编辑 WooCommerce 结帐页面的所有选项。
此外，请转到“结算”选项卡，因为大多数结帐字段都在那里。 只需转到“计费”选项卡并使用“禁用”切换来删除您想要的结帐字段。 您还可以使用“必需”切换将它们设为强制或不强制。
一旦您对您的选择感到满意，请不要忘记保存您的更改。 然后，从前端查看结帐，您将看到新的结帐页面。
如果您在此过程中需要更多帮助，请查看我们的指南以删除 WooCommerce 结帐字段。 如果您只想删除字段而不添加或编辑现有字段，则可以使用另一个名为 Direct Checkout 的插件。
结论
总而言之，默认的 Shopify 结账比 WooCommerce 更干净、更简单。 在本指南中，我们了解了如何使 WooCommerce 结帐看起来像您商店中的 Shopify 。 最方便的方法是使用插件，我们向您展示了使用两种不同工具的过程。
WooCommerce Blocks 是免费的，并使用块来编辑结帐页面，而CheckoutWC是一个高级插件，带有多个结帐模板，可帮助您自定义结帐页面。 这两个插件都可以完成工作并且非常易于使用，因此请选择最适合您需求的插件。
此外，我们还向您展示了如何删除 WooCommerce 结帐字段以进一步自定义结帐页面并提高转化率。 这将使您的结帐页面更简单并加快结帐过程。
要了解有关如何充分利用结帐的更多信息，请查看如何编辑 WooCommerce 结帐页面。 如果您喜欢这篇文章，请查看以下教程：
- 如何创建 WooCommerce 单页结帐
- 在结账时添加费用的不同方法
- 如何将条件字段添加到 WooCommerce 结帐