• 主页
  • 文章
  • 插件
  • 如何通过 4 个简单步骤创建类似 Shopify 的 WooCommerce 结帐页面

如何通过 4 个简单步骤创建类似 Shopify 的 WooCommerce 结帐页面

已发表: 2022-02-12

事实上，默认的 WooCommerce 结帐页面看起来很乏味，并且缺少转换优化的元素。

作为 WooCommerce 的强大竞争对手，Shopify 凭借其著名的结账页面战胜了 WooCommerce。 它直观、赏心悦目、速度快，最重要的是，它转换得非常好。

如果您正在寻找一种简单的方法来自定义您的 WooCommerce 结帐页面以满足 Shopify 风格，那么您就在正确的页面上！

本文将向您展示如何快速创建类似 Shopify 的 WooCommerce 结帐页面的分步指南。

但首先，让我们分解一下 Shopify 结帐页面，以了解为什么它很容易转换。

  • 是什么让 Shopify 结帐页面易于转换
  • Shopify 与 WooCommerce 结帐页面
  • 如何创建类似 Shopify 的 WooCommerce 结帐页面
  • CheckoutWC 替代方案

是什么让 Shopify 结帐页面易于转换

在电子商务结账体验方面，Shopify 结账页面优于其他电子商务解决方案。 最新的 Littledata 调查发现，Shopify 的平均转化率为 2.1%，而 WooCommerce 的这一数字仅下降到 0.7%。

那么是什么让 Shopify 结帐页面易于转换？ 我们分析并提出了以下9个关键点。

#1。 无干扰的直观布局

整个 Shopify 结帐页面看起来非常干净整洁，间距和填充适当。 它仅通过减少所有导致分心的乱七八糟的东西（包括导航菜单）来专注于结帐目的。
直观的 Shopify 结帐布局

#2。 面包屑导航

Shopify 没有在结帐页面上包含导航菜单，而是将其优化为进度指示器或面包屑。 这很棒，因为它不仅可以节省空间，还可以帮助向用户展示他们在购买过程中的确切位置。

基本上，Shopify 将结账分为三个逻辑步骤：信息、运输和付款。 客户只需单击面包屑导航中的任何一个，即可在步骤之间跳转。
Shopify 面包屑

#3。 电子邮件输入设置为顶部

在顶部字段询问电子邮件地址证明了这种聪明的转换技巧。 如果用户放弃他们的购物车，这种做法可以让您轻松跟进他们。 这为恢复购物车放弃提供了机会。
在顶部设置电子邮件输入

#4。 谷歌地址自动填充

根据 Shopify 开发团队的说法，这种 Google 地址自动填充功能可以最大限度地减少结账时的摩擦，并为店主带来更多销售。

只要买家在地址字段中输入其地址的一些首字母，Google 地址自动填充就会显示匹配选项。 通过减少在结帐页面上花费的时间，这极大地有助于为客户创造快速结帐体验。

Shopify 确实测试了这个功能，他们发现拼写错误的百分比和花费的时间下降到了 20%，更不用说转化率提高了。
谷歌地址自动填充

#5。 多个快速结帐选项

就像它的名字一样真实，快速结账让您可以尽快结账。

通常，客户在下订单之前必须填写平均 10 个字段。 你可以想象那个仪式是多么的烦人和耗时。

意识到这一担忧，包括亚马逊在内的大多数顶级在线零售商都通过提供多种快递支付选项对超快结账表示“是”。

Paypal 强调，使用 Paypal Express Checkout “为客户提供了通过结账过程的捷径，降低了放弃购物车的可能性。” 此外，这种方法还将您的转化率提高到 3.75%，并使您的底线翻倍。

幸运的是，Shopify 在您的结帐页面上允许这些选项。
Shopify 的快速结帐选项

#6。 带有清晰说明的 CTA 按钮

除了面包屑，Shopify 还通过 CTA 按钮上的指导性副本让用户免于在每个结帐步骤中令人困惑地导航。 这些 CTA 按钮直接通知用户下一步或上一步。
Shopify 的 CTA 按钮清除说明

正如您在屏幕截图中看到的，Shopify 在左侧提供了“返回购物车”选项，并在右侧向您展示了输入信用卡的下一步。

#7。 订单总额中的成本透明度

你知道吗，不明确的定价恰好是放弃购物车的主要原因。 大约 17% 的买家放弃了他们的购物车，因为他们无法看到预先计算的订单总额。 （购物）

Shopify checkout 不仅让购物者看到他们的订单总额，而且还分解了所有成本，从而消除了这种烦恼。 不仅如此，它还通过与产品名称一起显示的图像和产品数量来保证成本透明度。 多亏了这一点，用户肯定知道他们的购物车中有多少物品以及相应的总价格。
Shopify 的成本明细

#8。 数据预览

当您继续下一步时，Shopify 将在顶部显示您已填写的所有基本字段。 这使您可以检查是否键入了正确的信息。 如果出现错误，请点击“更改”以返回该字段。
Shopify 的数据预览选项

#9。 移动优化

Shopify 已经是一个天生的移动优化电子商务解决方案。 您是否知道，无论 Shopify 拥有多少主题，它们都在移动和以转化为中心方面具有相似之处？

Shopify 移动优化结帐页面

从上面的截图中，你能看到顶部的订单摘要吗？ 很高兴知道它是可折叠的，在移动屏幕上不会占用太多空间。 用户可以在完成购买之前再次点击它以查看订单详细信息。

Shopify 与 WooCommerce 结帐页面

为了让您清楚地了解 Shopify 与 WooCommerce 结帐页面，让我们将这两个电子商务巨头的默认结帐页面并排放置。
Shopify 与 WooCommerce 结帐页面

那么您想填写哪种表格？ Shopify 或 WooCommerce 结帐页面？ 如果您的目光被 Shopify 吸引，它不会让我们大开眼界。

Purple Ninja 可能在各方面都胜过 Green Bag，但在结账流程和设计方面可能落后于竞争对手。

默认的 WooCommerce 结帐页面看起来既无聊又令人困惑。 该页面似乎并没有履行其增加销售额的主要职责，而是专注于询问客户数据。

它在一页上塞满了许多输入字段，一页一页地排列。 更重要的是，您不能将它们拆分为多个步骤或在顶部设置重要字段，例如电子邮件地址或电话号码。 这似乎是数千 WooCommerce 店主错过销售的根本原因。

如果你想调整页面，你别无选择，只能使用一堆自定义代码。

此外，无法优化移动设备上的默认 WooCommerce 结帐页面。 更不用说冗长的布局，甚至不是所有的 WooCommerce 结帐主题都针对移动设备进行了优化。

最重要的是，Shopify 对每个结帐步骤都使用 Ajax，这意味着您无需重新加载页面。 另一方面，WooCommerce 缺少开箱即用的 Ajax，因此您必须多次重新加载。 这使得在结帐过程中查看和编辑您的购物车非常痛苦。

因此，当谈到 Shopify 与 WooCommerce 结帐页面时，战线已被绘制出来。

幸运的是，创建 WooCommerce 一页结帐并不是优化默认结帐的唯一方法。 借助多样化的 WordPress 插件系统，您可以将外观基本且转换率低的 WooCommerce 结帐页面转换为类似 Shopify 的页面。

如何创建类似 Shopify 的 WooCommerce 结帐页面

在本教程中，我们选择 CheckoutWC。 这是一个简单易用的插件，可以在一秒钟内将默认的 WooCommerce 结帐页面转换为高转化率的 Shopify 结帐样式。

该插件拥有大量您梦寐以求的高级功能，例如：

  • 轻松快速结帐
  • 具有自动查找和简单创建的帐户创建/登录
  • 自动填充地址并与 Google Maps API 集成
  • 与广泛的主要 WooCommerce 插件直接集成。

另外，CheckoutWC 支持 Ajax。 由于用户不需要重新加载页面来更新项目，因此这会扫除所有来回。

总而言之，CheckoutWC 弥补了我们在 WooCommerce 平台上发现的所有负面影响。

您可以注册 CheckoutWC 免费试用 7 天以了解其工作原理。 设置 Shopify 风格的 WooCommerce 结帐页面的过程需要 4 个简单的步骤。

  • 第 1 步：注册免费试用 CheckoutWC

他们会要求您提供信用卡，但不用担心，您只会在试用期结束时收到账单。

  • 第 2 步：安装 CheckoutWC 插件

注册后，下载插件 zip 文件的链接将附在您的电子邮件收据或感谢页面上。

您可以通过解压缩文件并通过 SFTP 上传来安装插件，或者只需转到 WordPress 仪表板中的插件 > 添加新的。

安装后，点击激活。

  • 第三步：选择你想要的模板

前往Settings > Checkout for WooCommerce > Templates 。 在数百个 Shopify 结帐页面副本中，选择Copify 。
CheckoutWC 的 Copify 模板

  • 第 4 步：添加您的徽标并查看您的新结帐页面

切换到附近的“设计”选项卡，选择Logo > Upload Images 。 请记住保存您的更改。
上传徽标图片

现在，是时候预览您的新结帐页面了。

返回您的新结帐页面，将产品添加到您的购物车，单击结帐并享受新的类似 Shopify 的 WoooCommerce 结帐页面。

CheckoutWC 替代方案

如果 CheckoutWC 的价格让您犹豫不决，让我们考虑另一种创建 Shopify 风格的 WooCommerce 结帐页面的绝佳选择——Aero Checkout。

使用 Aero Checkout，您无需从头开始构建结帐页面。 它包含各种预先设计和高转化率的结帐模板，包括您可以在现场使用的单页结帐和嵌入式表格。

Aero Checkout 的一些显着特点是：

  • 多步骤结帐页面
  • 小推车改装
  • 字段预览
  • 谷歌地址自动填充
  • 移动优化结账

根据您的业务规模，您可以在 Starter 和 Growth 两个计划之间进行选择。
Aero Checkout 定价

准备好对您的默认 WooCommerce 结帐页面进行现代化改造了吗？

由于其灵活和可扩展的特性，WooCommerce 得到了数百万用户的认可。 但是，当涉及到结帐页面时，它并没有领先于游戏。

本文详细说明了 Shopify 与 WooCommerce 结帐页面，以及为 WooCommerce 构建 Shopify 式结帐的简单方法。

想要提高您的转化率、提升销售额并让您的竞争对手望尘莫及吗？ 立即开始现代化您的默认 WooCommerce 结帐页面！

对 Shopify 与 WooCommerce 的比较感兴趣？ 在此处查看我们对 Shopify vs WooCommerce SEO 的评论！