如何自定义 WooCommerce 结账页面 (简单方法)

05/01/2023

你想自定义你的 WooCommerce 结账页面吗?WooCommerce 提供了一个内置的结账页面,但它并未针对转化进行优化。通过用自定义结账页面替换默认设计,你可以获得更多销售并提高转换率。

在这篇文章中,我们将一步步教你如何在不编写任何代码的情况下轻松自定义 WooCommerce 结账页面。

为什么要在 WordPress 中自定义 WooCommerce 结账页面?

研究显示,顾客放弃购物车的比例在 70-85% 之间。换句话说,大多数客户在结账页面离开前不会花钱。

考虑到这一点,你需要采取一切可能的措施来说服客户完成购买。内置的 WooCommerce 结账页面并未针对销售进行优化。

通过替换这个默认设计为自定义 WooCommerce 结账页面,你通常可以提高转换率,获得更多收入。

方法 1. 使用 FunnelKit Builder 自定义你的 WooCommerce 结账页面

创建自定义 WooCommerce 结账页面的最简单方法是使用 FunnelKit Builder。这款插件提供了预制的结账模板和表单,还内置了旨在帮助你增加销售的 ‘优化’ 功能。

首先,你需要安装并激活插件。

选择专业设计的模板

激活后,前往 FunnelKit » Store Checkout。点击 ‘Create Store Checkout’ 按钮。

现在,你可以从 FunnelKit 的任何专业设计的结账页面模板中进行选择,或选择 ‘Start from scratch’。我们建议使用模板来帮助你快速创建高转化率的结账页面。

找到想要使用的模板后,点击 ‘Import This Funnel’。

创建自定义结账设计

要继续并自定义结账页面,点击其 ‘Edit’ 链接。

打开模板后,你可以像构建任何 WordPress 页面一样自定义模板。点击任何块,然后使用右侧菜单和迷你工具栏进行调整。

满意设计后,点击 ‘Update’ 保存更改

方法 2. 使用 SeedProd 自定义你的结账页面

你也可以使用 SeedProd 创建自定义 WooCommerce 结账页面。SeedProd 是最佳的登陆页面构建器,支持超过 100 万个网站,提供 180 多个专业设计的模板,包括电商模板,可以帮助你快速创建结账页面。

首先,你需要安装并激活插件。

选择 SeedProd 模板

接着,前往 SeedProd » Landing Pages 并点击 ‘Add New Landing Page’。

你需要为自定义结账页面选择一个模板。SeedProd 的模板按不同的活动类型分类,例如即将上线和 404 页面。选择适合你想创建页面类型的设计,将帮助你更快地构建页面。

选择模板后,类型页面名称并点击 ‘Save and Start Editing the Page’。

设计一个高转化率的结账页面

SeedProd 编辑器显示结账页面的实时预览和一些块设置。开始创建一个品牌化的标题。

接下来,点击 ‘Sections’ 标签并选择 ‘Header’ 类目。然后,选择所需的块并自定义文字和图像。这可以引导顾客返回购物车页面以添加更多商品或更改数量。

选择满意的布局后,将 ‘Checkout’ 块拖至布局中,并根据需要自定义。

添加追加销售和交叉销售内容

展示一些推荐商品作为侧栏部分,这鼓励顾客添加更多商品至购物车。然后,将 ‘Best Selling Products’ 块拖至页面。

显示客户评论和评级

添加 ‘Testimonials’ 块并自定义外观,例如更改评论气泡颜色、对齐方式等。你还可以在留言块下显示星级评价以展示积极评价。

发布 WooCommerce 结账页面

当你满意结账页面的设计后,点击 ‘Save’ 并选择 ‘Publish’。现在,如果你访问商店,你将看到上线的结账页面。

将结账页面分配给 WooCommerce

此时,已发布自定义结账页面,但你的网站仍在使用默认设计。你需要更改默认 URL 设置,让 WooCommerce 将客户发送至新结账页面。前往 WooCommerce » Settings 并点击 ‘Advanced’ 标签。打开 ‘Checkout page’ 下拉菜单并输入新创建的结账页面 URL。当你找到正确页面时,点击选择并保存更改。

额外奖励:减少结账页面放弃

避免添加任何额外结账费用

当客户结账时,他们期望总金额与产品价格相近。如果他们在结账页面看到额外费用,例如税费、运费等,他们很可能不会完成购买。最好在价格上坦诚,避免复杂。

使账号创建可选或简化

强制客户在结账时注册账号会增加购买过程的摩擦。应避免强制注册,允许顾客以访客身份结账,并提供优惠券。

提供更多付款选项

大多数人都有其首选支付方式。提供更常见的支付选项,能减少顾客放弃结账页面的情况。

显示定时弹出窗口

可以在顾客即将离开结账页面时显示定时弹出窗口,提供特殊折扣以促使完成购买。你可以使用相关插件来实现这一点。

设置被遗弃的购物车推送通知

另一个减少购物车放弃的好方法是设置网页推送通知。这些通知即使用户未在你的网站上,也能在他们的浏览器上显示,提醒他们完成结账。

希望这篇文章能帮助你轻松自定义 WooCommerce 结账页面。你可能还想查看如何创建 WooCommerce 弹出窗口以增加销售,及我们为你的商店挑选的最佳 WooCommerce 插件。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>