在构建 WooCommerce 商店时，为用户提供便捷的产品筛选体验，是提升转化率和用户满意度的重要一步。Avada Builder 提供了功能完善的 Woo Filter 元素，可以帮助用户根据价格、属性、评分等条件快速过滤产品，从而更高效地找到自己想要的商品。
本文将带你一步步了解如何在 Avada 中使用 Woo Filter 元素构建一个具备筛选功能的商店页面。
Woo Filter 元素简介
Avada 提供的 Woo Filter 元素用于替代传统的 WooCommerce 小工具，提供更高的灵活性与视觉一致性。共有四个核心元素：
- Woo Filter Active：显示当前启用的筛选条件
- Woo Filter by Attribute：按产品属性筛选，如颜色、尺寸等
- Woo Filter by Price：按价格区间筛选
- Woo Filter by Rating：按用户评分进行筛选
注意：这些元素仅适用于“产品归档页”（Product Archives），因此不能直接添加到普通页面上。
操作步骤
使用 Layout 构建商店页面
要启用 Woo Filter 功能，必须通过 Avada Layouts 创建一个新的页面布局，而非普通页面编辑方式。这样可以利用 Post Card Archives 元素加载产品，并与 Woo Filter 元素协同工作。
- 前往 Avada > Layouts，新建一个布局，例如命名为 “New Shop”
- 在布局中添加一个 内容区域（Content Layout Section）
- 将原先商店页面中的内容容器复制粘贴到这个新布局中
替换 Post Card 元素为 Post Card Archives
Woo Filter 仅在归档内容中生效，因此需要将原本的 Post Card 元素替换为 Post Card Archives 元素，并设置内容来源为 “产品归档（Product Archives）”。
- 设置每页列数、卡片样式等参数
- 保持原有排版的一致性
添加 Woo Filter 元素
1. Woo Filter Active
该元素用于显示当前已应用的筛选条件，建议始终添加。
2. Woo Filter by Price
用户可以自定义价格区间筛选产品，设置标题样式与滑块外观。
3. Woo Filter by Attribute
可用于按如“颜色”、“尺寸”等产品属性筛选，支持列表或下拉菜单展示方式。该元素可以重复使用来分别展示多个属性。
4. Woo Filter by Rating
用于按评分筛选产品（如显示 4 星以上的商品），适合有用户评价系统的网站。
每个元素都支持在样式面板中自定义字体大小、边距、颜色等视觉细节。
设置显示条件
完成页面布局和元素添加后，需要在 Avada Layout 的“条件”中设置该布局仅作用于产品归档页（Shop 页面或产品分类页）：
- 打开布局条件设置
- 选择
Archives > Product Archives作为目标显示区域
- 可选项：可以启用在
Product Categories页面
启用 WooCommerce 商品循环显示
最后，前往 WooCommerce 分配的商店页面设置中，在页面选项的内容选项卡中，开启“显示 WooCommerce 商品循环”选项（Show WooCommerce Shop Loop），这样 Post Card Archives 才能正确加载产品。
展示效果演示
完成所有设置后，刷新页面即可看到带有产品筛选栏的商店页面。左侧可展示：
- 当前活跃筛选条件（可一键清除）
- 价格筛选滑块
- 尺寸等属性筛选列表
- 用户评分筛选选项
用户点击筛选项后，页面自动刷新并只显示符合条件的商品，大大提升浏览效率与购物体验。
总结
Woo Filter 元素是 Avada 提供给 WooCommerce 商店页面的一项高级功能，虽然设置稍显复杂，但其灵活的筛选系统和良好的视觉集成，能显著提升用户购物体验。想了解更多WordPress相关的教程和资讯，请关注光子波动网，拥有最全的WordPress教程和最活跃的WordPress交流社区。
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
使用 WPML 翻译 Astra Site Builder 布局内容 lyc054211
Cloudflare 错误 525 解决指南：修复 SSL 握手失败问题lyc054211
Blocksy 教程：使用 MetaBox 创建并美化自定义文章类型（CPT）lyc054211 暂无评论... |
|---|