如何在您的在线商店中添加迷你浮动购物车?

已发表: 2023-09-14

寻找更顺畅、更愉快的购物之旅? 探索我们的迷你浮动推车的便利性 - 完美的购物伴侣。

将迷你 ajax 浮动购物车添加到您的电子商务网站,为购物者在整个购物过程中与购物车互动提供一种用户友好、方便且引人入胜的方式。 通过解决常见问题并简化流程,可以增加用户完成购买的可能性。

目录

什么是迷你浮动车?

迷你浮动购物车是电子商务网站中经常使用的功能,旨在增强用户体验。 它使用户可以轻松地查看他们选择购买的商品,并使他们能够在继续购物的同时更改他们的选择。

添加迷你浮动车的优点

让我们看看迷你浮动购物车的一些优点,这将使您知道在您的网站上安装该插件后如何轻松使用该插件。

  • 使用户能够轻松查看他们选择的项目,而无需导航到单独的页面。
  • 直接在购物车中添加折扣/促销代码可以简化购物流程,帮助用户轻松购物并节省费用。
  • 修改产品数量并直接从方便的迷你浮动推车中移除不需要的物品。
  • 您可以创建无限量的购物车并在选择性页面上显示每个购物车。
  • 更改按钮和图标大小、按钮和文本颜色以满足您的品牌形象。
  • 从许多打开/关闭购物车图标中进行选择。

在您的在线商店中添加迷你浮动购物车

既然您已经认识到将迷你浮动购物车集成到电子商务商店中以增强用户体验的重要性,那么让我们概述一下将该插件添加到 WordPress 网站的简单过程。

如果您已经熟悉 WooCommerce,则可以继续安装迷你浮动购物车插件。 但是,如果您是新手,我们建议您阅读全面的分步指南以供您理解。

第 1 步:安装 WooCommerce 插件

WooCommerce 是一款开源电子商务插件,可与 WordPress 无缝集成,满足从小企业到大型企业的在线商家的需求。 这个广受好评的插件以其多样化的功能而闻名,可以通过多种方式增强电子商务网站。

如果您尚未将 Woo Commerce 集成到您的网站中,第一步是安装此工具。

第 2 步:选择兼容的主题

选择与 WooCommerce 兼容的 WordPress 主题。 Mini Ajax Cart 与几乎所有主题兼容。

步骤 3:安装 WooCommerce Mini 浮动购物车插件

为了增强购物车的功能和用户体验,请考虑安装专门的 WooCommerce 迷你购物车插件。 在这里,我们将引导您完成安装迷你 AJAX 购物车插件的步骤。

在本教程中,我们将使用Mini Ajax Cart WooCommerce 插件作为购物车参考。

让我们指导您完成安装插件并进行必要的调整以开始使用的过程。 您可以点击此链接直接下载该插件。

  • 转到您的 WordPress 仪表板。
  • 导航至“插件”> “添加新插件”。
  • 搜索“迷你AJAX购物车”
  • 单击“立即安装”,然后激活所选的插件。
添加迷你浮动车

现在,您已经安装并激活了插件,以使迷你购物车在您的网站上可见:

  • 转到您的 WordPress 仪表板
  • 导航至Mini Ajax 购物车> 主要设置
  • 添加购物车标题
  • 打开“启用迷你购物车”按钮。
  • 确保“发布/更新”您所做的所有必要更改。

需要仅在选定的页面上显示购物车? 不用担心。 您可以仅在选定页面上有选择地显示或隐藏购物车。 根据需要为其配置“在页面中显示/隐藏”选项。 还可以在所有设备上或有选择地在台式机、平板电脑或移动设备上显示购物车。

前往您的电子商务网站,您可以看到迷你浮动购物车可见,以提供轻松的用户体验。

现在,用户可以轻松地从任何页面查看和修改添加到购物车的购物车商品,而无需导航到商店页面。

第 4 步:配置迷你车

下一步是配置迷你购物车插件。 安装并激活迷你购物车插件后,您可以配置所需的购物车行为。 让我们简要介绍一下您可以对每个部分进行哪些更改。

i)购物车篮/按钮设置

此部分使您能够个性化电子商务网站上购物车按钮的外观。 在提供的各种购物车图标选项中,选择最适合您偏好的一个。 此外,您可以灵活地修改按钮的形状以符合您的设计偏好并确定其在页面上的位置

注意:如果您需要更多高级自定义选项,请考虑升级到专业版以获取增强设置。

ii)购物车面板

在此设置部分中,您可以微调动画并查看电子商务网站上的可见更改。 选择与您的品牌形象产生共鸣的动画。

iii)购物车内容

无论您喜欢以列表还是网格格式显示购物车内容,您都可以根据自己的喜好灵活调整产品布局。

请注意折扣优惠券字段,因为当您想向尊贵的客户提供诱人的优惠时,它们发挥着至关重要的作用。 客户可以轻松输入促销代码,以折扣价接收商品。 如果您不需要此功能,只需关闭优惠券字段即可。

在设置的按钮配置部分,您可以自由地包含演示所需的按钮。 您可以通过打开/关闭按钮来轻松启用/禁用您想要显示的按钮。

在上面的视频教程中,您可以看到可以在购物车内容部分进行哪些更改。

第 5 步:自定义外观

大多数迷你浮动购物车插件都允许在颜色、样式和布局方面进行一定程度的定制。 让我们进一步详细了解您可以进行哪些自定义。

设计

此部分允许您更改购物车篮子颜色。 选择与您的品牌和公司产品产生共鸣的颜色和款式有助于创建您自己的品牌形象。

您可以选择以各种方式修改版式。 您可以从多种字体中进行选择,还可以选择与您的设计相符的颜色。 您还可以调整字母间距、字体大小和行高。

此外,您可以灵活地为各种元素选择配色方案,例如网格布局中的按钮版式、优惠券按钮、继续购物按钮、购物车/结账按钮和删除产品按钮。

第 6 步:测试迷你车

在您的实时网站上启动浮动迷你购物车之前,进行彻底的质量检查至关重要。 验证一切是否按预期完美运行:添加和删除产品、调整数量,并确认“添加到购物车”按钮响应灵敏且完全可操作。

通过遵循这些步骤并使用 WooCommerce、兼容主题和迷你购物车插件的正确组合,您可以轻松地将 AJAX 迷你购物车添加到您的 WordPress 电子商务网站,而无需编码。

解锁高级功能

免费版本具有在您的站点上部署迷你浮动购物车所需的基本功能。 但升级到专业版以充分利用该插件始终是一个更好的决定。

让我们看看 Pro 版本的一些功能:

  • 15+ 个现成模板,方便导入
  • 购物车面板上的 Ajax 结帐选项
  • 3 种不同的购物车面板布局:滑入式、浮动式、弹出式
  • 购物车定制的附加元素:标题、购物车产品、优惠券、运输栏、按钮、建议商品
  • 购物车篮/按钮的可定制图标
  • 11 种不同的购物车按钮形状
  • 各种购物车按钮动画,包括悬停和空闲状态动画
  • 购物车面板动画和进入/退出动画
  • 可定制的购物车按钮位置
  • Elementor 与 15+ Ajax Cart 元素兼容
  • 购物车之间的导入/导出设置
  • 使用类名称从不同网站元素触发购物车面板
  • 购物车空时隐藏购物篮的选项
  • 将产品添加到购物车时打开购物车面板
  • 显示/隐藏和自定义精美的滚动条
  • 显示有效的优惠券代码和优惠券形式
  • 为购物车项目配置网格布局列
  • 只需一个按钮即可删除购物车中的所有商品
  • 当购物车为空时自定义图标和文本
  • 购物车按钮和购物车面板的玻璃态射背景
  • 用于进一步样式化的自定义 CSS 选项

Mini Ajax 浮动车的功能很少,如果您满意,您可以继续使用它。 但是,如果您需要更多功能,可以升级到高级版本以充分利用此插件。

那么,为什么不升级它来将您的购物车提升到一个新的水平呢? 单击下面的按钮查看演示并升级到高级版本。

购买高级版