如何在 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

在电商网站中，通过结合 WooCommerce 和 Astra 主题，你可以轻松将 WooCommerce Mini 购物车添加到旧版 Astra 页眉中，确保购物车始终可见并方便访问。

在旧版 Astra 页眉中添加 WooCommerce Mini 购物车

Astra 主题为 WordPress 提供了强大的自定义功能，结合 WooCommerce 插件，商家可以轻松创建高效的电商网站。本文将介绍如何在 Astra 旧版页眉中添加 WooCommerce Mini 购物车，提高网站的功能性。

第一步：启用 WooCommerce 插件

首先，需要确保已经启用了 WooCommerce 插件。可以在 插件 > 已安装插件 中检查插件是否启用。如果没有启用，请点击启用按钮。

第二步：将 WooCommerce Mini 购物车添加到主菜单

• 进入自定义设置：从 WordPress 仪表盘，进入 外观 > 自定义 > 页眉 > 主菜单 > 菜单最后一项。
• 选择 WooCommerce：在“菜单最后一项”设置中，选择 WooCommerce，这样就会将购物车图标添加到主菜单的末尾。

通过这些设置，WooCommerce Mini 购物车将显示在主菜单的末尾，用户可以随时查看购物车内容。

使用 Astra Pro 将 WooCommerce Mini 购物车添加到页眉上方或下方

如果启用了 Astra Pro 插件，可以将 WooCommerce Mini 购物车添加到页眉的 上方 或 下方，这样能提升页面的可用性和视觉效果。

启用 Astra Pro 插件

首先，确保已安装并启用了 Astra Pro 插件，并启用了 WooCommerce 模块。

将 Mini 购物车添加到页眉上方或下方

• 启用页眉部分附加组件：进入 外观 > 自定义 > 页眉 > 页眉上方 > 部分 (1/2)，选择 WooCommerce 以添加 Mini 购物车。
• 页眉下方添加 Mini 购物车：使用相同的方法，将 Mini 购物车添加到页眉下方部分。

这样，WooCommerce Mini 购物车将始终可见，方便用户随时查看购物车中的商品。

使用短代码在任意位置显示 WooCommerce Mini 购物车

除了添加到页眉外，还可以使用 WooCommerce Mini 购物车短代码 在网站任意位置显示购物车图标。只需将以下短代码添加到页面、文章或小工具中：[astra_woo_mini_cart]

确保已启用 Astra Pro 和 WooCommerce 模块，短代码将正常工作，并能在选定位置显示 Mini 购物车图标。

启用 WooCommerce 产品的快速查看功能

Astra Pro 插件还提供了 快速查看 功能，用户可以在灯箱中查看产品详情，不用跳转到单独的产品页面。

快速查看选项：

• 在图片上显示：当鼠标悬停在产品图像上时，显示快速查看条形，点击后弹出灯箱查看产品详情。
• 点击图片查看：点击产品图像后，直接在灯箱中显示产品的详细信息。
• 在摘要后显示：快速查看按钮显示在产品的摘要信息后面。

可以启用 固定添加到购物车按钮，让“添加到购物车”按钮在快速查看窗口中始终可见，提升购物便捷性。

设置位置：

• 转到 外观 > 自定义 > WooCommerce > 单一产品 设置这些选项。

在 WooCommerce 商店页面启用 Off-Canvas 侧边栏

Astra Pro 插件还提供了 Off-Canvas 侧边栏 功能，适用于大规模产品目录的商店页面。启用该功能后，侧边栏默认隐藏，用户点击触发按钮时将其显示。

如何启用 Off-Canvas 侧边栏：

• 设置位置：进入 外观 > 自定义 > WooCommerce > 产品目录，启用 Off-Canvas 侧边栏。
• 选择触发器类型：可以选择通过链接、按钮或自定义类触发侧边栏的显示。
  • 链接：通过三行菜单显示触发器。
  • 按钮：显示为按钮的触发器。
  • 自定义类：可以在网站的任何位置添加触发器，例如在页眉或页脚。

向 Off-Canvas 侧边栏添加小工具：

为了使侧边栏功能正常，你需要向其添加一些小工具（如过滤器）。进入 外观 > 小工具 > 商店过滤器，将所需的小工具拖到侧边栏中。

添加完小工具后，可以通过 自定义面板 进行样式和功能的进一步调整。

总结

借助 Astra Pro 插件，商家可以轻松将 WooCommerce Mini 购物车 添加到主菜单、页眉上方或下方，甚至在网站的任何位置显示。结合 快速查看功能 和 Off-Canvas 侧边栏，这些功能为用户提供了更加便捷的购物方式，同时提升了网站的互动性。商家通过这些设置，可以更好地优化页面布局，吸引更多顾客，提升转化率。

相关文章