使用 Astra WooCommerce 模块设计产品目录页与商店页面

Astra 主题结合 WooCommerce 模块，通过可视化界面提供全方位产品展示定制能力。本指南将完整解析所有核心功能设置，助你快速构建风格统一、转化率出众的专业级电商页面。

一、准备工作

首先需要安装并启用 Astra Pro 插件与 WooCommerce 插件。进入 WordPress 后台，路径为 Astra > Welcome > Modules，启用 WooCommerce 模块。之后进入外观 > 自定义 > WooCommerce，开始进行页面样式调整。

二、页面结构设置

产品标题区域

产品标题区域开关启用后，可自由控制以下内容显示：

• 横幅布局
• 产品标题
• 描述信息
• 面包屑导航

容器布局

提供三种宽度选择：默认、普通、全宽。根据需求灵活切换，适配整体页面风格。

侧边栏布局

支持以下选项：默认、无边栏、左边栏、右边栏。设置左侧或右侧边栏能呈现筛选或导航功能。

三、商品列表展示样式

商品卡片样式

提供三种风格：

• 样式一：图片下方依次展示标题、分类、价格、评分

• 样式二：悬停图片时出现“加入购物车”按钮

• 样式三：图片与商品信息横向排列，视觉更清晰

商品排列与显示

• 自定义列数，分别适配桌面、平板、手机设备

• 设置每页展示商品数量

• 控制商品展示区域的宽度

页面内容显示类型

商店首页展示内容可选：

• 所有商品
• 分类导航
• 商品和分类组合

分类页也支持相同展示组合方式，自定义程度较高。

四、商品卡片与工具栏内容

商品卡片组件

可选显示项目包括：

• 商品标题
• 分类信息
• 价格
• 用户评分
• 简短描述
• 加入购物车按钮

点击图标即可控制是否显示，操作直观。

工具栏内容

工具栏可启用以下元素：

• 商品总数统计
• 排序功能（价格、评分、热度等）
• 筛选器按钮
• 网格与列表视图切换

五、增强功能与交互细节

快速预览（Quick View）

快速查看商品信息时，可选择以下交互形式：

• 不启用
• 显示在商品图片上
• 点击图片触发
• 显示在商品摘要后方

分页与无限滚动

分页支持数字样式、圆形、方形样式切换。若选择无限滚动，可设定以下模式：

• 滚动加载更多商品
• 点击“加载更多”按钮展示商品

按钮文本可根据品牌语言自定义。

六、附加展示选项

页面还包含多个细节展示功能开关，例如：

• 页面标题显示与否
• 面包屑导航显示控制
• 吸附边栏功能
• 筛选器以按钮形式显示
• 筛选器折叠手风琴展示
• 页面元素滚动加载动效

结语

通过 Astra 的 WooCommerce 模块，产品展示变得更加灵活清晰，适配各种类型电商网站需求。以上设置可帮助网站整体风格更统一，布局更合理，提升访问者浏览商品时的效率与清晰度。

相关文章

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：[email protected]
④ 工作时间：周一至周五，9:30-18:30，节假日休息