如何创建自定义 WooCommerce 购物车页面(无编码)

您想创建自定义 WooCommerce 购物车页面吗?

默认的 WooCommerce 购物车页面未针对转换进行优化。通过优化购物车页面布局,您可以显着提高转化率并获得更多销售额。

在本文中,我们将向您展示如何在没有任何技术知识的情况下自定义您的 WooCommerce 购物车页面。

如何创建自定义 WooCommerce 购物车页面(无编码)

为什么要在 WordPress 中创建自定义 WooCommerce 购物车页面?

创建自定义 WooCommerce 购物车页面让您有机会增加在线商店的销售转化率。

研究表明,十分之七的顾客会放弃你的购物车,再也不会回来。

通过优化默认 WooCommerce 购物车页面,您可以在不增加当前流量的情况下进行更多销售。

OptinMonster 购物车页面示例

当您的访客在他们的购物车中有物品时,他们就非常接近完成购买。您的 WooCommerce 购物车页面应该尽一切可能实现转换。

话虽如此,让我们看看如何在没有代码的情况下自定义您的 WooCommerce 购物车页面。

视频教程

订阅 WPBeginner

如果您更喜欢书面说明,请继续阅读。

如何在 WordPress 中创建自定义 WooCommerce 购物车页面

SeedProd是超过 100 万个网站使用的最佳拖放页面构建器。它使您可以轻松创建自定义 WooCommerce 购物车页面以进行更多销售。

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

注意:您可以使用免费版本的 SeedProd,但对于本教程,我们将使用 Pro 版本,因为它具有我们需要的内置 WooCommerce 块。

激活插件后,您需要转到SeedProd » 设置并输入您的产品许可证密钥。

输入 SeedProd 许可证密钥

您可以在 SeedProd 网站上的帐户信息下找到您的许可证密钥。

完成后,转到SeedProd » Pages并单击“添加新登录页面”按钮以创建您的购物车页面。

添加新的 SeedProd 购物车页面

之后,您需要选择一个购物车页面模板。您可以使用数十种专业设计的模板。找到您喜欢的模板后,将鼠标悬停在其上并单击“复选标记”图标。

我们将使用“空白”模板,因为它允许我们只添加我们想要的部分。

选择 SeedProd 模板

接下来,系统会要求您为购物车页面命名,然后单击“保存并开始编辑页面”。

这将带您进入拖放构建器,您可以在其中开始构建自定义购物车页面。

首先,我们将添加一个图像块并上传一个徽标。您可以将其调整为看起来像您的标题,而无需单击它以减少放弃。

这可以保持您的品牌形象,但可以减少访问者的退出次数,因此他们更有可能进行购买。

接下来,只需选择“图像”块并将其拖到您的页面上。然后,从您的图片库上传您的徽标。

添加图片块头

您可以使用左侧的选项面板完全自定义它。

接下来,单击“选择您的布局:”部分中的内容和侧边栏块。

选择 SeedProd 布局

这使您可以为您的购物车创建一个部分,以及一个推荐部分。

之后,在WooCommerce部分找到“购物车”块并将其拖过来。

添加 WooCommerce 购物车块

您可以自定义购物车的每个部分,包括字体选择、颜色、按钮等。

自定义 WooCommerce 购物车块

接下来,您可以添加推荐块。这些作为访问者的社会证明,并向他们表明他们做出了正确的决定。

找到“推荐”块并将其拖到打开的部分。

添加推荐块

您可以完全控制推荐的外观。

可以选择添加客户照片、更改推荐、添加职位等等。

自定义推荐块

如果您想添加多个推荐,请按照上述相同步骤操作。

另一个好主意是在您的推荐信下方添加星级。

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

添加星级块

如果您想创造稀缺性以鼓励您的客户立即购买,那么您可以在您的购物车中添加一个稀缺计时器。

您需要做的就是选择“倒数计时器”块并将其拖到购物车的顶部。然后,选择“访客计时器”选项,以便为所有访客刷新计时器。

倒计时常青块

接下来,添加一个标题,通知您的购物者他们有一段固定的时间,直到他们的购物车过期。

只需拖动“标题”块并输入您的文本。

倒数计时器标题

要添加的另一个重要功能是流行的产品部分。这使您可以通过推广客户可能感兴趣的其他热门产品来提高销售额。

为此,只需从“WooCommerce”部分拖动“畅销产品”块。

您也可以选择要添加的任何其他产品块。

添加 SeedProd 产品块

有关将流行产品添加到 WooCommerce 的更多详细信息,请参阅我们的指南,了解如何在 WooCommerce 中显示流行产品。

对购物车页面进行更改后,您可以通过单击“保存”按钮旁边的箭头并选择“发布”来实时发布它。

实时发布购物车

接下来,您需要在 WooCommerce 设置中调整您的购物车 URL。

转到WooCommerce » 设置,然后单击“高级”选项卡。

WooCommerce 购物车设置

之后,选择您使用 SeedProd 创建的新购物车页面 URL。确保单击屏幕底部的“保存更改”。

根据您使用的WooCommerce 主题,您的访问者现在可以更轻松地导航到购物车页面。

查看 WooCommerce 购物车下拉菜单

这也将帮助您的访问者在移动设备上查看他们的购物车。

您可以继续使用 SeedProd 自定义您的购物车页面,添加新块并更改设计,直到完美。

继续测试尝试不同的元素,看看什么最能提高转化率。

购物车页面示例

要跟踪您的 WooCommerce 购物车转化,请参阅我们关于如何设置 WooCommerce 转化跟踪的分步指南。

奖励:如何进一步改善 WooCommerce 购物车页面转换

创建自定义 WooCommerce 购物车页面后,您可以进一步提高转化率并减少购物车放弃。

这有助于您从现有流量中获得更多收入。

这里有一些简单的方法来做到这一点。

1. 通过 WooCommerce 中的定时弹出窗口减少购物车放弃

近 70% 的购物车被遗弃。减少购物车放弃的最佳方法之一是定时弹出窗口。

OptinMonster是超过 120 万个网站使用的最佳 WordPress 弹出式插件。

OptinMonster WooCommerce 弹出窗口

它使用独特的Exit-Intent®技术在用户即将离开您的网站时准确显示弹出窗口。

您可以使用专为他们提供的独特优惠券代码来吸引他们。

OptinMonster 弹出 WooCommerce

如果您已经向访问者提供了优惠券,请使用教育弹出窗口来帮助解决任何问题并让他们放心购买,例如WPForms中的这个。

WPForms 退出意图弹出窗口

您还可以将更多独特的弹出窗口和幻灯片添加到您的网站。

例如,如果客户将商品添加到他们的购物车并离开但后来又回来了,那么您可以添加一个提供优惠券的幻灯片以完成他们的购买。

OptinMonster 购物车提醒

有关更多详细信息,请参阅我们的指南,了解如何创建 WooCommerce 弹出窗口以增加销售额。

2. 在 WooCommerce 中通过社交活动通知促进销售

社交活动通知提醒您的访问者实时进行的新购买。这使用 FOMO 来提高您的转化率并推动他们购买。

将社交证明通知添加到您的 WooCommerce 购物车页面的最简单方法是使用TrustPulse。

TrustPulse WooCommerce 通知

它是市场上适用于 WordPress 和 WooCommerce 的最佳社交证明插件,并已被证明可将转化率提高 15%。

它可以在几分钟内完成设置,您可以自动显示最近购买、免费试用注册等的通知气泡。

通知不会妨碍您的购物车或用户体验。他们唯一做的就是提高您的商店转化率。

TrustPulse 警报通知

有关更多详细信息,请参阅我们的指南,了解如何在您的 WordPress 网站上使用 FOMO 来增加转化率。

我们希望本文能帮助您创建自定义 WooCommerce 购物车页面,而无需编写任何代码。您可能还想查看我们关于如何改进 WooCommerce SEO以增加流量的分步指南,以及我们为您的商店挑选的最佳 WooCommerce 插件的专家。