您想创建自定义 WooCommerce 购物车页面吗?
默认的 WooCommerce 购物车页面未针对转化进行优化。通过自定义购物车页面,您可以获得更多销售额并从在线商店赚更多钱。
在本文中,我们将向您展示如何自定义 WooCommerce 购物车页面,而无需编写任何代码。
为什么在 WordPress 中创建自定义 WooCommerce 购物车页面?
当购物者的购物车中有商品时,他们就非常接近购买了。然而,研究表明,近十分之七的顾客会放弃购物车,再也不会回来。考虑到这一点,您的购物车页面应该尽一切可能来确保销售。
WooCommerce 确实带有内置购物车页面,但并未针对转化进行优化。
通过使用自定义购物车页面替换默认设计,您通常可以提高在线商店的转化率。
即使是简单的定制使用您自己的品牌和自定义徽标创建页面可以改善客户体验并提高转化率。
也就是说,让我们看看如何在不编写代码的情况下自定义 WooCommerce 购物车页面。只需使用下面的链接直接跳转到您要使用的方法。
- 方法 1:如何创建自定义 WooCommerce 购物车页面
- 方法 2:在 WooCommerce 中创建自定义侧滑购物车
- 奖励:如何进一步改进 WooCommerce 购物车转化
视频教程
订阅 WPBeginner
如果您更喜欢书面说明,请继续阅读。
方法 1:如何创建自定义 WooCommerce 购物车页面
为 WooCommerce 商店创建自定义页面的最简单方法是使用 SeedProd。
SeedProd 是最好的德拉g 和 drop 页面构建器,并附带 180 多个专业设计的模板。其中包括可用于创建销售页面和潜在客户挤压页面的电子商务模板。
更好的是,SeedProd 完全支持 WooCommerce,甚至附带特殊的 WooCommerce 块,让您可以展示最畅销的产品、最受欢迎的商品、最新销售等。
您需要做的第一件事是安装并激活该插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
注意:SeedProd 有一个免费版本,但在本指南中,我们将使用 Pro 版本,因为它具有我们需要的内置 WooCommerce 块。它还与您可能已经使用的所有电子邮件营销服务集成,以获得更多销售和转化。
激活后,您需要转到 SeedProd » 设置并输入您的许可证密钥。
您可以在 SeedProd 上您的帐户下找到此信息网站。输入许可证后,单击“验证密钥”按钮。
完成此操作后,转到 SeedProd » 着陆页,然后单击“添加新着陆页”按钮。
之后,您需要选择购物车页面模板。
SeedProd 的模板分为不同的营销活动类型,例如即将推出和 404 页面。您可以单击屏幕顶部的选项卡,根据广告系列类型过滤模板。
当您找到要使用的模板时,将鼠标悬停在该模板上并单击“复选标记”图标。在本指南中,我们将使用“空白模板”,但您可以选择您想要的任何设计。
接下来,继续输入购物车页面的名称。 SeedProd 将根据页面标题自动创建一个 URL,但您可以将此 URL 更改为您想要的任何内容。
当您对输入的信息感到满意时,单击“保存”并开始编辑页面按钮。
这将加载 SeedProd 页面构建器。它是一个简单的拖放编辑器,在右侧显示自定义购物车页面的实时预览,在左侧显示一些设置。
首先,您需要将图像添加到页面顶部。最好使用看起来像商店常规标题的图像,以保持客户体验更加一致。
标题图像需要占据购物车页面的整个宽度,因此请点击“选择布局”框中的第一个布局。
这将创建一个全角布局。
现在,选择左侧菜单中的图像块并将其拖到布局上。
要上传图像,请单击以选择图像块。
在左侧菜单中,点击“使用您自己的图像”,然后从媒体库中选择图像或从计算机上传新文件。
如果你不这样做已经有一个标题图像,那么您可以使用 Canva 等网页设计软件创建一个标题图像。
您可以使用左侧的设置进一步自定义图像。例如,您可以添加图像替代文本并更改图像的大小。
如果您对标题的外观感到满意,请单击“在此处拖动新块”部分中的“添加列”图标。
您现在可以选择要用于主购物车页面区域的布局。
继续并单击内容和侧边栏布局。
这使您可以为 WooCommerce 购物车创建一个部分以及一个可以展示客户评价的区域。
在左侧菜单中,滚动到“WooCommerce”部分。在这里,找到购物车块并将其拖到您的布局上。
您可以使用左侧菜单自定义购物车的每个部分。
这包括更改字体、颜色、按钮等。
当你您对购物车区域的外观感到满意,是时候添加推荐块了。这是一种社会证明,它将鼓励访问者完成购买。
只需找到“推荐”块并将其拖到您的布局上即可。
您现在可以更改评价在您的在线市场或商店中的外观。
例如,在左侧菜单中,您将看到更改评论气泡颜色、更改对齐方式以及添加更多客户评价的设置。
另一个好主意是在每个推荐下方显示星级评级。这使访问者可以一目了然地看到您的评分,这将有助于将 WooCommerce 访问者转化为客户。
为此,只需找到星级评级块并将其拖到推荐块下方即可。
这就是创建自定义 WooCommerce 购物车页面所需的全部内容。不过,让我们看看一些额外的 SeedProd 块,它们可以帮助您减少 WooCommerce ab和购物车价格并为您带来更多销售额。
添加倒计时器
害怕错过,也称为 FOMO,鼓励购物者立即购买,而不是等待并冒着错过的风险。考虑到这一点,您可能需要添加一个倒计时器来倒计时,直到访客的购物车到期。
要营造这种紧迫感,请找到倒计时块并将其拖到购物车顶部。您需要向每个访问者显示一个新的计时器,因此打开“倒计时类型”下拉列表并选择“访问者计时器(常青)”。
这是向不同用户展示个性化内容的简单方法。
默认情况下,计时器将从 30 分钟开始计时,但您可以通过在“设置计时器”部分中输入新数字来更改此设置。
购物者还需要知道,当计时器达到 0 时,他们的购物车就会过期,因此在计时器上方添加一个标题块。
然后您可以输入 text 您想向购物者展示的内容。
显示热门 WooCommerce 产品
您可以通过创建热门产品部分来鼓励人们向购物车添加更多商品。由于这些商品已经很受顾客欢迎,向更多人展示它们通常是获得更多销量的简单方法。
要宣传商店中最畅销的产品,只需将最畅销产品块拖放到您的布局上即可。
默认情况下,此块将显示您最受欢迎的产品,但您可以使用这些设置来显示促销产品、最新产品等。
为此,只需打开“类型”下拉列表并选择一个新选项即可。
有关更多详细信息,请参阅我们有关如何在 WooCommerce 中显示热门产品的指南。
创建有用的常见问题解答部分
接下来,您可能需要添加常见问题解答部分,类似于亚马逊产品页面上的问答部分。这可能包括信息有关交货和运输的信息,或您的退货政策。
通过回答购物者可能提出的任何问题,您可以改善客户体验。这还意味着客户不太可能使用实时聊天和其他方法直接联系您的员工,这可以为您的员工节省大量时间。
要创建常见问题解答区域,只需将折叠式块拖到页面上,这将创建一个包含两个可折叠区域的部分。
在左侧菜单中,单击每个“手风琴”字段。
然后您可以继续在两个文本框中输入问题和答案。
只需重复这些步骤即可创建更多问题和答案。
要将更多项目添加到手风琴块,只需单击“添加新项目”按钮即可。
您还可以使用这些设置来设置常见问题解答部分的样式,类似于更改文本和标题的外观。
如何发布您的自定义 WooCommerce 购物车页面
当您对购物车页面的外观感到满意时,就可以通过单击“保存”旁边的下拉箭头,然后选择“发布”选项来发布它。
之后,您需要在 WooCommerce 设置中更改购物车 URL。
只需转到 WooCommerce » 设置,然后单击“高级”选项卡即可。
之后,打开“购物车页面”下拉列表并开始输入自定义页面的 URL。
当出现正确的页面时,选择它。
方法 2:创建自定义侧边购物车在 WooCommerce 中
另一个选择是为您的在线商店创建滑动侧推车。这使得购物者可以随时通过点击购物车图标打开购物车,这样他们就可以检查他们的购物篮,而无需访问单独的 WooCommerce 购物车页面。
滑动购物车可以消除购物过程中的麻烦,并帮助购物者跟踪结账时要支付的金额,从而降低购物车放弃率。
创建滑动侧边购物车的最快、最简单的方法是使用 FunnelKit 的 Cart For WooCommerce。这个免费插件允许您设计一个与您的 WooCommerce 主题完美匹配的自定义滑动侧推车。
有关分步说明,请参阅我们有关如何添加滑动侧推车的指南。
奖励:如何进一步提高 WooCommerce 购物车转化
创建自定义 WooCommerce 购物车页面后,有很多方法可以减少购物车放弃并获得更多销售额。这有助于通过从现有流量中赚钱来发展您的在线业务。
1.跟踪您的转化
放弃购物车是所有人的一个大问题线下商店。事实上,60% 到 80% 的将商品添加到购物车的人并没有购买。
转化跟踪可帮助您了解购物车页面上哪些内容有效,哪些无效。然后,您可以使用 SeedProd 等页面构建器来微调您的自定义购物车页面,以便更多客户继续完成购买。
跟踪 WooCommerce 转化的最简单方法是使用 Google Analytics(分析)。然而,手动设置分析和创建 Google Analytics 目标需要编写大量自定义代码。
考虑到这一点,我们建议使用 MonsterInsights。它是 WooCommerce 的最佳 Google Analytics 插件,并附带一个电子商务插件,只需点击几下即可实现转化跟踪。
MonsterInsights 向您的 WordPress 帐户添加了网站统计信息中心,以便您可以轻松查看热门流量来源、排名靠前的页面、平均会话持续时间和其他重要指标。您可以使用这些指标cs 做更多有效的事情,这样您就可以获得更好的结果。
MonsterInsights 还可以帮助您发现购物者行为模式。然后,您可以利用此洞察来改善客户体验并创建高转化率销售渠道以获得更多转化。
要跟踪您的 WooCommerce 购物车转化,请参阅我们有关如何设置 WooCommerce 转化跟踪的分步指南。
2.通过 WooCommerce 中的定时弹出窗口减少购物车放弃
您还可以通过定时弹出窗口来减少购物车放弃率。
OptinMonster 是最好的 WordPress 弹出窗口插件,具有独特的 Exit-Intent® 技术,可以在购物者即将离开购物车页面时准确显示弹出窗口。
如果购物者现在完成购买,您甚至可以使用 OptinMonster 向他们提供特殊折扣代码。
OptinMonster 拥有一套强大的定位和个性化功能。
例如,如果您已经提供向购物者提供优惠券,然后您可以向他们显示教育弹出窗口。您可以鼓励他们联系并询问有关您产品的任何问题。
OptinMonster 允许您创建不同的活动,包括弹出窗口、全屏欢迎垫、浮动条、滚动框和幻灯片。
例如,如果客户将商品添加到购物车但未完成购买,那么您可以使用滑入式功能向他们提供该商品的优惠券。
有关更多详细信息,请参阅我们有关如何创建 WooCommerce 弹出窗口以增加销量的指南。
3.通过 WooCommerce 中的社交活动通知促进销售
社交活动通知实时显示购物者正在购买的所有产品。这可以让购物者放心,您是一个受欢迎的、值得信赖的网站,并且还可以利用“害怕错过”的感觉来促使他们购买。
将社交证明通知添加到购物车页面的最简单方法是使用 TrustPulse.
它是市场上适用于 WordPress 和 WooCommerce 的最佳社交证明插件,已被证明可将转化率提高 15%。
您只需几分钟即可将 TrustPulse 添加到您的网站,并在每次有人购买产品、开始免费试用等时开始显示通知气泡。
有关更多详细信息,请参阅我们有关如何在 WordPress 网站上使用 FOMO 的指南。
我们希望本文可以帮助您创建自定义 WooCommerce 购物车页面,而无需编写任何代码。您可能还想查看我们有关如何增加博客流量的分步指南,以及我们的专家为您的商店挑选的最佳 WooCommerce 插件。
如果您喜欢这篇文章,请订阅我们的 WordPress 视频教程 YouTube 频道。您还可以在 Twitter 和 Facebook 上找到我们。