Avada 主题教程：如何使用 Woo Filter 元素为产品添加筛选功能

在构建 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交流社区。