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

您想自定义您的 WooCommerce 结帐页面吗?

默认的 WooCommerce 结帐页面未针对转化进行优化.通过自定义和优化您的结帐页面,您可以增加转化次数并增加销售额.

在本文中,我们将向您展示如何轻松自定义您的 WooCommerce 结账页面,无需编写任何代码.

How to customize WooCommerce checkout page (the easy way)

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

研究表明,70% 到 85% 的购物车被遗弃.换句话说,大多数用户在没有购买的情况下离开了您的结帐页面.

创建自定义 WooCommerce 结帐页面为您提供了在网站访问者离开您的商店之前将其转变为客户的最后机会.

通过自定义结帐页面,您可以添加推荐/社会证明元素以建立信任、添加相关产品以增加收入并优化整体页面布局以实现更好的转化.

Checkout page example

所有这些都会提高转化率,并使您的访问者更有可能成为长期客户.

在继续之前,您可能还想自定义您的 WooCommerce 购物车页面,以提高此处的转化率.

如果您同时使用 WooCommerce 的购物车和结帐页面,那么您会希望这些页面具有相似的品牌,以便为访问者提供出色的结帐体验.

通过对这些进行自定义,您可以提高整体转化率并赚取更多收入.有关更多详细信息,请参阅有关如何在不编写任何代码的情况下创建自定义 WooCommerce 购物车页面的指南.

话虽如此,让我们来看看如何轻松自定义 WooCommerce 结帐页面并从您的在线商店赚取更多收入.

如何在 WordPress 中自定义您的 WooCommerce 结帐页面

SeedProd 是超过 100 万个网站使用的最佳拖放式 WordPress 页面构建器.它使您可以轻松自定义 WooCommerce 结帐页面以增加销售额.

您需要做的第一件事是安装并激活插件.有关更多详细信息,请参阅有关如何安装 WordPress 插件的分步指南.

注意:有一个免费版本的 SeedProd 可用,但在本教程中,我们将展示 Pro 版本,因为它具有内置的 WooCommerce 块.

插件激活后,转到SeedProd »设置并输入您的许可证密钥.

SeedProd license key

您可以在 SeedProd 网站上的帐户页面下找到此信息.

之后,导航到 SeedProd »页面,然后点击"添加新着陆页"按钮.

Add new SeedProd landing page

接下来,系统会要求您选择着陆页模板.有数十种专业设计的模板供您选择.

您会注意到模板按不同类别进行过滤.选择与您要创建的页面类型相匹配的模板类别可以帮助您更快地构建页面.

话虽如此,无论您选择哪种模板,每个模板都可以完全自定义.

在本教程中,我们将选择"空白"模板,因为这让我们可以构建所需的确切类型的结帐页面.

要选择模板,请将鼠标悬停在模板上并点击"对勾"图标.

Select blank SeedProd template

之后,系统会要求您为页面命名.页面名称也将与您的结帐页面的 URL 匹配.

然后,点击"保存并开始编辑页面"按钮.

Name checkout page

这会将您带到拖放编辑器,您可以在其中构建自定义 WooCommerce 结帐页面.

右侧是您的页面预览,左侧是帮助您自定义的选项面板.

首先,我们将添加一个标题,以便您可以维护您的品牌.

为此,请点击左侧面板中的"部分"菜单选项,然后点击"标题"类别.

Insert header section

之后,将鼠标悬停在"标题 1"模板上,然后点击"加号"图标.

接下来,点击页面的"图片"部分,然后在左侧菜单中上传您的商店徽标.

Add header logo

然后,您可以通过将鼠标悬停在导航菜单上并点击"删除块"来删除它.

删除其他菜单项会减少页面退出次数,并使访问者更有可能完成购买.

Delete menu block

完成后,点击标有"号召性用语"的按钮.

我们将更改文本,使其显示为"查看购物车".

Edit button text

这让您的用户可以返回他们的购物车页面添加商品或更改数量.

然后,将您的 WooCommerce 购物车页面的 URL 添加到标有"链接"的框中.

您可以将链接设为 nofollow 或在新标签页中打开,但我们将保留默认设置.

Edit button URL

接下来,单击"选择您的布局:"部分中的内容和侧边栏布局.

这让您可以为结帐创建一个部分,以及一个推荐的产品部分.

Select two column layout

之后,在 WooCommerce 部分找到"结帐"块并将其拖到您的页面上.

您可以完全自定义结帐的外观,包括配色方案、字体选择、链接颜色、按钮等.

Add checkout block

接下来,您可以添加热门产品或推荐产品部分.这可以让您通过宣传购物者可能感兴趣的其他产品来提高销售额.

要添加此项,只需将"WooCommerce"部分的"畅销产品"块拖到上方即可.

您也可以选择任何其他 WooCommerce 产品块.

Add WooCommerce products block

接下来,您可以在热门产品上方添加标题.

只需将"标题"块拖到热门产品上方的页面即可.您可以自定义字体、大小、文本、颜色等.

Add product headline block

完成后,您可以添加推荐块.这可以作为社会证明,并确保您的访问者做出正确的决定.

找到"推荐"块并将其拖到您的热门产品下方.

Add testimonials block

推荐块可以完全自定义.

您可以添加客户照片、职位等.

Customize testimonials block

为了进一步提高社会认同,您可以做的另一件事是在您的推荐下方添加星级.

只需选择"星级"块并将其拖到您的推荐下方即可.

Add star rating block

在您完成 WooCommerce 结帐页面的自定义后,您可以点击"保存"按钮旁边的下拉箭头并选择"发布",使其生效.

Publish checkout page

现在,您创建了一个高转换率的 WooCommerce 结账页面,而不是默认的 WooCommerce 结账页面.

您可以继续自定义您的页面并测试不同的元素、部分和块.

WooCommerce checkout page example

专业提示:您可以跟踪 WooCommerce 结帐页面的性能,以查看您的自定义设置是否提高了收入.有关更多详细信息,请参阅有关如何设置 WooCommerce 转化跟踪的分步指南.

将您的结帐页面分配给 WooCommerce

完成自定义结帐页面并使其生效后,您需要更改默认的 WooCommerce URL 设置.

更改 URL 可以让您的客户自动转到您的新 WooCommerce 结帐页面,而不是默认选项.

首先,转到WooCommerce »设置,然后点击"高级"标签.

Change WooCommerce cart URL

然后,从下拉菜单中选择新的 WooCommerce 结账页面 URL.

确保点击屏幕底部的"保存更改".

现在,当访问者点击"继续结帐"时,他们将被带到您刚刚构建的新的高转化页面.

某些 WooCommerce 主题甚至让客户可以选择直接转到结帐页面.

Direct to checkout example

如何减少结帐页面的放弃

结帐页面放弃是指客户开始结帐流程,但未完成付款.这类似于放弃购物车,但它是完成付款并成为客户的又一步.

使用上面的教程自定义您的结帐页面将大大有助于优化您的结帐页面以进行转化.

但是,您可以采取一些措施来进一步减少结账的放弃.

减少任何插件结帐费用

当客户到达他们的购物车时,他们希望总价与产品总价相似.

如果他们在结账时看到税费、高昂的运费和其他额外费用,那么他们很有可能无法完成购买.

Added fees example

如果客户认为成本合理,他们可能会继续购买.但是,最好的做法是提前定价.

如果您有很多额外费用来履行您的产品,请将这些添加到您的总产品价格中.或者,解释额外费用的原因.

亚马逊通过提供 2 天免费送货服务,在电子商务领域占据主导地位.

考虑为您的产品提供免费送货服务或为超过一定金额的订单提供免费送货服务.

使帐户创建成为可选或更简单

在完成购买之前要求注册帐户可能会导致放弃.这可以增加您的电子邮件订阅者,但会增加购买过程中的摩擦.

您可以允许您的用户创建一个帐户,但您不必将其作为一项要求.

相反,您可以设置一个注册表单,以便在用户完成购买后增加您的电子邮件列表.

您还可以简化结帐页面上的必填字段.如果您需要收集更多信息,您可以在结帐后进行.

目标应该是从用户的方式中消除尽可能多的领域(摩擦点),以便他们完成购买.

提供更多结账付款方式

您的访问者无法完成结帐流程的另一个原因是您没有提供足够的付款选项.

您的在线商店应提供最常见的付款方式.

Payment options example

您的客户将使用对他们来说最方便的付款方式.

有关更多详细信息,请参阅我们的 WordPress 最佳 WooCommerce 支付网关列表.

我们希望本文能帮助您轻松自定义 WooCommerce 结帐页面.您可能还想查看我们精选的最佳 WooCommerce 托管专家,以及适合您商店的最佳 WooCommerce 插件列表.

2

发表回复