如何在WooCommerce中轻松添加滑动侧推车

是否要在WooCommerce中添加滑动侧推车？

这允许购物者从你的在线商店的任何页面上看到他们的购物车。然后，顾客可以将商品添加到购物篮中，移除产品，添加优惠券，而无需访问单独的购物车页面。

在本文中，我们将向您展示如何在WooCommerce中轻松添加滑动购物车。

根据购物车的设置，购物者还可以添加和删除商品，以及直接从滑动面板应用优惠券。您甚至可以添加行动按钮的调用，例如指向您的WooCommerce结账页面的链接。

滑动购物车可以通过消除购物过程中的摩擦来改善客户体验，并帮助购物者跟踪他们在结账时支付的金额。这可以降低购物车的弃置率。

话虽如此，让我们来看看如何在WooCommerce中添加一个滑动侧推车。只需使用下面的快速链接，即可直接跳转到您要使用的方法。

方法1.如何在WooCommerce中使用免费插件添加滑动侧推车方法2.添加高级滑动侧推车(具有追加销售、交叉销售和奖励)

您可以更改购物车的颜色、边框、按钮、消息等。

有很多选择，所以你可以创建一个完美适合任何WordPress主题的购物车。

你可以在整个网站上显示购物车按钮，将其限制在WooCommerce页面，或者使用短代码将该按钮添加到特定页面和帖子。

如何设置WooCommerce插件的购物车

首先，您需要安装并激活用于WooCommerce的FunnelKit购物车插件。如果你需要帮助，请参考我们关于如何安装WordPress插件的指南。

激活后，请转到FunnelKit？购物车。您将看到屏幕右侧滑动滑板车的预览。

现在，您可以自定义购物车以更好地满足您的需求。

首先，你可以决定是在整个网站上显示购物车图标，还是只在WooCommerce页面上显示。

如果你选择‘整个网站’，那么购物者可以从任何页面打开滑动购物车，所以这是在线市场和商店的一个很好的选择。

然而，你的网站可能有很多非电子商务的内容。例如，你可以经营一个很受欢迎的WordPress博客，但使用WooCommerce向你的粉丝销售商品。

在每一篇博客文章上显示购物车按钮可能会变得令人讨厌。在这种情况下，你可以勾选“WooCommerce Pages”单选按钮。

另一个选项是“无”，它会完全隐藏购物车图标。

如果你选择了‘None’选项，那么你就可以使用一个短代码将图标添加到任何页面、帖子或小工具就绪的区域。您还可以将该图标添加到导航菜单中。

我们将在后面的文章中向你展示如何做到这一点，但是如果你打算手动添加购物车图标，你可以选择‘None’。

做出这个决定后，根据您想要显示购物车按钮的位置，选择“左下”或“右下”。在这里，你可以通过选择“页面预览”来查看按钮在你的网上商店中的显示效果。

默认情况下，该插件会在滑动侧推车的顶部显示“查看您的购物车”。

您可以将其替换为您自己的消息，方法是在“购物车标题”字段中输入。

如果不想显示标题，只需将该字段留空即可。

默认情况下，FunnelKit在购物者将任何商品添加到购物篮之前显示购物车图标。

如果您愿意，您可以隐藏该图标，直到访问者开始添加项目。只需点击“隐藏购物车图标”切换，它就会变成蓝色。

这就是创建一辆基本的滑动侧推车所需的全部，但还有一些设置可以让你获得更多的销售。考虑到这一点，让我们来看看FunnelKit的更高级的功能。

在WooCommerce滑动侧推车中接受优惠券

优惠券是获得更多销售和建立客户忠诚度的好方法。

如果你已经使用高级优惠券插件创建了任何智能WooCommerce优惠券，那么购物者可以直接在滑动购物车页面中输入它们。

当客户点击“应用”时，滑动购物车将显示他们节省了多少钱。

通过直接向客户显示折扣，您可以降低购物车弃置率，并鼓励他们在购物篮中添加更多商品。

您可以使用内置的WooCommerce优惠券功能或使用优惠券代码插件来创建这些代码。

要添加优惠券字段，请单击“启用优惠券框”切换，它将从灰色(禁用)变为蓝色(启用)。

在此之后，您可以在“最小化”和“扩展”布局之间切换。

只需勾选“Display”旁边的框即可。

Minimated占用的空间更少，所以不会让人分心，但购物者需要扩大优惠券部分，才能输入任何代码。

在下图中，您可以看到最小化的布局。

选择布局后，您可以更改FunnelKit用于优惠券框标题、折扣占位符文本和按钮文本的文本。

自定义购物车摘要

购物车摘要向客户显示他们的购买成本。这有助于降低购物车弃置率，因为在结账时不会出现令人不快的意外。

出于这个原因，我们建议启用“显示小计”切换。

但是，如果您想简化侧推车，则可以单击以禁用“显示小计”切换。

您还可以显示客户有资格获得的任何储蓄，包括他们申请的任何优惠券的折扣。

通过这种方式，您可以使用FOMO来提高转换率，特别是在节省时间敏感的情况下。例如，您可以在WooCommerce中安排优惠券，以便客户只能在有限的时间内使用它们。

如果您希望从滑动侧购物车中删除此信息，则可以禁用“显示储蓄”切换。

您还可以使用您自己的自定义消息来替换“保存文本”和“发货文本”。

定制WooCommerce购物车的行动号召

滑动侧推车有一个默认的结账按钮，但你可以定制这个行动号召按钮来获得更多的转换。首先，你可以使用“启用按钮图标”切换来添加一个结账图标。

如果你正在创建一个多语言的WordPress站点，这会特别有用。

您还可以使用“启用购物车价格”切换将购物车价格添加到结账按钮。

这将帮助购物者跟踪购物车的价格，特别是如果你已经从购物车摘要部分删除了小计。

默认情况下，FunnelKit会在滑动侧购物车的底部添加一个“继续购物”链接。您可以通过在“继续购物文本”字段中键入您自己的消息来替换此文本。

之后，选择此链接是简单地关闭侧车面板，还是将购物者重定向到您的WooCommerce商店页面。

大多数购物者都会离开滑动购物车，因此我们建议您选择“关闭侧边购物车”按钮。

如果您选择“重定向到商店”，那么您可能想要更改“继续购物文本”文本，以便清楚地知道当客户点击该链接时会发生什么。

创建自定义空购物车屏幕

按照上述过程，可以隐藏购物车按钮，直到购物者将至少一个商品添加到他们的购物篮。但是，如果您不隐藏按钮，客户有时可能会看到一个空的购物车屏幕。

您可以使用“空购物车”部分中的设置来更改标题、说明和按钮文本。通常，你会想要鼓励顾客开始购物。例如，你可能会谈论你提供的东西，比如免费送货或退款保证。

你甚至可以给购物者一个优惠券代码，比如买一送一的折扣。

您还可以选择是点击“Shop Now”按钮将客户带到WooCommerce商店页面，还是直接关闭侧面板。

我们建议选择“重定向到商店”，因为这将使购物者更容易开始将商品添加到购物车中。

将购物车图标添加到站点上的任何位置

如果您想更好地控制购物车图标出现的位置，那么您可以使用短码将其添加到任何页面、帖子或小部件就绪区域。您也可以将其添加到站点的菜单中。

如果你按照上述步骤在“图标可见性”设置中选择了“无”，这是一个很好的选择。

如果你选择了‘WooCommerce Pages’，那么也可以将购物车图标添加到你网站的其他重要区域。例如，您可以将图标添加到您的自定义主页或联系人表单。

要开始，请选择“购物车菜单”，然后点击“启用购物车菜单”切换。

现在，您可以通过选择其中一个图标模板来更改图标的外观，并选择是否将产品数量和购物车总数显示为图标的一部分。这些信息可以帮助访问者跟踪他们的购物车。

您还可以更改图标大小和文本大小。当您进行更改时，小预览将自动更新，以便您可以尝试不同的设置以查看哪种设置看起来最好。

当你对滑动侧推车图标的外观感到满意时，点击“保存”按钮。

现在，您可以使用“Embedded Shortcode”旁边的代码将图标添加到任何页面、帖子或小工具区域。

有关如何放置快捷码的更多信息，请参阅我们关于如何在WordPress中添加快捷码的指南。

另一种选择是将图标添加到站点的导航菜单中。这样，滑动侧推车总是触手可及，而不会分散对主页面内容的注意力。

要执行此操作，请打开“添加到菜单”下拉菜单，然后选择要使用的菜单。

之后，点击“保存”按钮。

现在，如果你访问你的WordPress网站，你会在导航菜单中看到购物车图标。

添加您自己的颜色和品牌

您可能想要更改滑动侧推车的颜色，以更好地匹配您的WooCommerce主题或品牌。若要更改文本颜色、按钮颜色、链接颜色等，请继续并单击“样式”。

要更改任何默认颜色，只需点击一下即可。这将打开一个弹出窗口，您可以在其中尝试不同的颜色。

例如，在下图中，我们正在自定义边框。

另一种选择是在“十六进制”字段中输入十六进制代码。如果你已经有了一个特定的颜色，这是完美的。

如果您不知道使用什么十六进制代码，那么使用类似于HTML颜色代码的站点可能会有所帮助。在这里，你可以探索不同的颜色，然后获得一个代码，你可以简单地粘贴到FunnelKit插件中。

如果你仍然不确定要使用什么颜色，那么你可以看看我们的指南，告诉你如何为你的WordPress站点选择一个完美的配色方案。

如何创建响应式滑动侧推车

根据我们的互联网使用报告，超过90%的全球互联网人口使用移动设备上网。考虑到这一点，你会想要确保滑动侧推车在智能手机和平板电脑上看起来像在台式电脑上一样好。

在这里，改变购物车的宽度可能会有所帮助，这样它就不会完全填满移动设备的小屏幕。要做到这一点，点击“造型”，然后查看“购物车预览移动宽度”。

您可能希望尝试在此字段中键入不同的值。如果你确实改变了默认设置，那么最好从桌面上查看WordPress网站的移动版本，以确保你对结果满意。

当您在此屏幕上时，您还可以更改桌面上滑动侧推车的宽度。要执行此操作，只需更改“购物车预览桌面宽度”字段中的数字即可。

如何发布您的滑板车

当你对滑动侧推车的设置感到满意时，就是时候让它活起来了。只需点击“启用购物车”滑块，它就会变成蓝色。

现在，如果你访问你的在线商店，你会看到现场滑动手推车。

如果您想在任何时候移除滑动侧推车，那么只需返回到FunnelKit？购物车在WordPress仪表板中。然后，单击以禁用“启用购物车”滑块。

您还可以创建独特的奖励，如优惠券代码和免费礼物，然后在滑动购物车内进行推广。

FunnelKit甚至可以跟踪客户需要多花多少钱，以便解锁下一次奖励。

要添加这些强大的功能，您需要升级到FunnelKit Funnel Builder Pro。请注意，你需要的是加号或更高的计划。

购买套餐后，登录您的FunnelKit帐户。在这里，您将找到FunnelKit漏斗生成器专业插件，以及FunnelKit漏斗生成器和FunnelKit购物车。您需要安装所有这三个插件才能解锁高级滑动购物车功能。

首先，您需要安装并激活这三个插件。如果你需要帮助，请参考我们关于如何安装WordPress插件的指南。

激活后，请转到FunnelKit»设置并将您的许可证密钥添加到‘FunnelKit Funnel Builder Pro’字段。

您可以通过登录到您在FunnelKit网站上的帐户来查找此信息。完成这些操作后，请点击“激活”。

在此之后，只需转到FunnelKit？购物车。

现在，您可以按照方法1中描述的相同流程配置和定制侧推车。当您对滑动侧推车的设置感到满意时，您就可以添加追加销售、交叉销售和奖励了。

通过追加销售和交叉销售WooCommerce产品获得更多销售

当顾客打开滑动侧推车时，你可以根据他们购物篮中的商品向他们展示独特的追加销售和交叉销售促销活动。

追加销售是指鼓励购物者购买价格更高的产品，而不是他们购物车中已经有的产品。

例如，假设客户在购物车中添加了一件防水夹克。你可以推荐一件质量更好的夹克，更耐用，更多才多艺，有不同的颜色。

交叉销售是指你推销与顾客已经购买的东西相关的产品。例如，如果他们在购物车上加了一张贺卡，那么你可能会鼓励他们也买巧克力或鲜花。

WooCommerce有一个链接的产品功能，允许您创建追加销售和交叉销售。欲了解更多信息，请参阅我们关于如何在WooCommerce追加销售产品的指南。

不过，您也可以直接从FunnelKit仪表板创建追加销售和交叉销售。这是最快的选项，因此我们将在本指南中使用它。

首先，点击“追加销售”选项，然后选择“启用购物车追加销售”。

之后，滚动到“向上销售和交叉销售”部分。

在这里，您将看到您的在线商店上的所有产品。

只需点击要添加一个或多个链接产品的项目。

然后，根据您要创建的促销类型，点击“添加追加销售”或“添加交叉销售”。

在弹出窗口中，开始输入您要用作追加销售或交叉销售的产品。当正确的产品出现时，点击一下。

要提供多种产品，只需遵循上述相同流程即可。

完成后，只需点击“添加”按钮即可。

您现在可以为您商店中的每一种产品创建独特的交叉销售和追加销售活动，只需遵循上述相同的流程即可。

现在，您已经准备好定制追加销售和交叉销售促销在您的滑动侧推车上的外观。

要开始，请尝试在不同的样式之间进行切换，方法是单击“Display”旁边的单选按钮。

实时预览将自动更新，以便您可以尝试不同的样式以查看您最喜欢哪种样式。

默认情况下，FunnelKit将在滑动侧推车中显示追加销售和交叉销售。如果你愿意，你可以只显示追加销售，或者只显示交叉销售，使用单选按钮在‘产品推荐类型’。

接下来，您可以更改FunnelKit在追加销售或交叉销售促销上方显示的标题，方法是将其输入到“标题”字段中。

请注意，FunnelKit将对这两种类型的促销使用相同的标题。

在此之后，您可以设置FunnelKit将显示的建议产品的最大数量，方法是在“显示最大追加销售量”字段中输入。

只要有可能，为每一种产品创建独特的追加销售和交叉销售促销活动是一个好主意。然而，如果你的网上商店有很多商品，那么这可能是不可能的。

考虑到这一点，您可以设置一个默认的追加销售产品，当没有链接的产品可用时，FunnelKit将推广该产品。要做到这一点，只需在“默认追加销售”栏中输入产品名称即可。当正确的产品出现时，点击一下。

当您对您创建的追加销售和交叉销售促销感到满意时，不要忘了点击“保存”来存储您的更改。

提供免费送货、折扣和免费礼品

你通常可以通过给顾客一个更多消费的理由来增加平均订单价值。考虑到这一点，FunnelKit允许您创建各种奖励，然后在滑动侧推车中将其作为可解锁的奖金进行推广。

例如，如果客户超过最低消费，您可以提供免费送货服务。FunnelKit甚至会向客户展示他们还需要再花多少钱才能解锁他们的奖品。

这是一种通过游戏化获得更多销售和建立客户忠诚度的简单方法。

FunnelKit允许你提供三种不同的奖励：免费送货、折扣和免费礼物。

要提供免费送货服务，您需要在您的WooCommerce商店中设置送货服务。有关详细说明，请参阅我们的WooCommerce Made Simple指南。

与此同时，当顾客达到最低消费时，折扣奖励会自动发放优惠券。如果你想提供这一奖励，那么你需要使用内置的WooCommerce优惠券功能或WordPress优惠券插件创建百分比优惠券。

有关逐步说明，请参阅我们的指南如何创建智能优惠券。

之后，你就可以通过在FunnelKit设置中选择“奖励”，然后点击“创建奖励”来创建奖励了。

现在，您可以打开“类型”下拉菜单并选择要创建的奖励类型。

无论您是选择免费赠送、免费送货还是折扣，您都可以通过在“消息”栏中输入来更改FunnelKit向客户显示的文本。

如果您进行了任何更改，请注意不要进行编辑{{remaining_amount}}因为这允许FunnelKit显示客户需要多花多少钱。

如果你正在提供折扣，那么一定要更改消息，以显示客户将节省多少钱。

完成后，在“获得奖励的金额”栏中输入一个数字。这是购物者必须花费的金额，才能解锁奖励。

如果您正在提供百分比折扣，那么您需要指定FunnelKit应该自动应用哪种优惠券。

在“优惠券”栏中，开始输入你想要使用的优惠券。当正确的代码出现时，点击一下。

现在，当有人达到最低消费时，FunnelKit将自动申请优惠券。

提供一份免费的礼物？然后开始在“产品”栏中输入礼物的名称。

当合适的产品出现时，给它一个点击。

现在，一旦顾客满足最低消费要求，FunnelKit就会将该商品添加到顾客的购物车中。

要添加更多奖励，只需点击“创建另一个奖励”即可。

现在，您可以按照上述相同流程配置折扣、免费礼品或免费送货奖励。

默认情况下，一旦客户有资格获得所有奖项，FunnelKit将显示以下消息：“恭喜！你已经解锁了所有的奖励。

要显示不同的消息，只需在“当所有奖励解锁时”字段中输入即可。你甚至可以为解锁所有奖励的顾客提供特殊的奖金，例如在他们下次购买时使用的独家优惠券代码。

当你对你的奖励设置感到满意时，点击“保存”按钮。

如何发布您的滑板车

当您准备好让滑动侧推车上线时，只需点击“启用推车”开关即可。

如果您想在任何时候移除滑动侧推车，只需返回到FunnelKit？购物车在WordPress仪表板中。然后，单击以禁用“启用购物车”切换。

我们希望这篇文章能帮助你在WooCommerce中添加一个滑动侧推车。你可能还想看看我们的指南，关于如何创建WooCommerce弹出窗口来增加销售额，以及如何为你的商店创建最好的WooCommerce插件。

中国和中国都是如此。