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

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

20250414141746735-image

一、准备工作

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

20250414141805254-image

二、页面结构设置

产品标题区域

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

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

容器布局

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

20250414141859338-image

侧边栏布局

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

20250414141910843-image

三、商品列表展示样式

商品卡片样式

提供三种风格:

  • 样式一:图片下方依次展示标题、分类、价格、评分
20250414141925903-image
  • 样式二:悬停图片时出现“加入购物车”按钮
20250414141951695-image
  • 样式三:图片与商品信息横向排列,视觉更清晰
20250414141957535-image

商品排列与显示

  • 自定义列数,分别适配桌面、平板、手机设备
20250414142004745-image
  • 设置每页展示商品数量
20250414142010492-image
  • 控制商品展示区域的宽度
20250414142116519-image

页面内容显示类型

商店首页展示内容可选:

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

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

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

商品卡片组件

可选显示项目包括:

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

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

工具栏内容

工具栏可启用以下元素:

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

五、增强功能与交互细节

快速预览(Quick View)

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

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

分页与无限滚动

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

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

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

六、附加展示选项

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

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

结语

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

相关文章



了解 宝藏号 的更多信息

订阅后即可通过电子邮件收到最新文章。

© 版权声明

相关文章

暂无评论

none
暂无评论...

了解 宝藏号 的更多信息

立即订阅以继续阅读并访问完整档案。

继续阅读