Astra Pro 添加 WooCommerce Mini Cart 的完整方法

购物车图标发挥着双重作用：既直观显示商品添加状态，又能有效引导用户完成购买转化。Astra Pro 插件扩展了 WooCommerce 的功能，支持在不同区域添加迷你购物车（Mini Cart），通过短代码可以灵活嵌入页面任意位置，实现个性化的版式设计需求。以下内容将介绍迷你购物车在 Astra 中的设置方法，包括旧页眉、新构建器、短代码调用以及常见样式调整。

旧版 Astra 页眉添加购物车图标

当网站使用 Astra 旧版页眉结构时，可将购物车图标添加到主菜单的末尾。操作方式如下：

• 激活 WooCommerce 插件；
• 进入后台，点击外观 > 自定义 > Header > Primary Menu；
• 找到菜单设置中的“Last Item in Menu”项，选择 WooCommerce；

设置完成后，主菜单最右侧显示购物车图标，图标会显示商品数量，并能跳转到购物车页面。

新版页眉构建器添加购物车图标

新版 Astra 提供了 Header & Footer Builder 功能，支持在主菜单区域、上方页眉或下方页眉中放置购物车图标。使用方法如下：

• 启用 Astra Pro 插件；
• 在 Astra Dashboard 中开启 Header Sections 模块；
• 进入外观 > 自定义 > Header > Above Header；
• 在 Section 1 或 Section 2 中选择 WooCommerce；

添加后，购物车图标将显示在指定区域，图标样式、标题和金额等内容均可进行独立设置。

使用短代码插入购物车图标

如果需要在页面某处展示购物车图标，例如文章内容、页脚或边栏，可以使用 Astra Pro 提供的短代码功能。

基础短代码为：[astra_woo_mini_cart]

该短代码支持设置弹出框方向，例如：

[astra_woo_mini_cart direction="top left"]

[astra_woo_mini_cart direction="bottom right"]

[astra_woo_mini_cart direction="top right"]

想在页面中插入滑出式购物车，则使用：[astra_woo_slide_in_cart]

以上短代码可放置在 Gutenberg 区块、Elementor 页面、侧边栏小工具区域或任意支持短代码的位置。

使用短代码前，需要激活 Astra Pro 插件，并在 Astra 选项中打开 WooCommerce 模块。

商品数量颜色调整

购物车图标旁的商品数量可能因配色问题而无法显示，常见原因是数字颜色与背景色过于接近导致视觉混淆。

处理方法如下：

• 进入外观 > 自定义 > Header Builder > Cart > Design；
• 找到“Count Color”选项；
• 将颜色设置为对比度较高的颜色；
• 保存更改；

该功能自 Astra Pro 插件版本 3.5.9 起支持，可用来自定义数字颜色，避免显示异常。

总结

Astra Pro 的 WooCommerce Mini Cart 功能非常灵活，支持在页眉结构中添加图标，也可以通过短代码嵌入至页面任意区域。结合图标样式与颜色设置，可满足不同类型站点对购物流程的排版需求。合理使用这些功能，有助于提升页面整体效果和操作便捷性。