在 Elementor 中为文章和产品添加多级筛选功能教程

在本教程中，我们展示在 Elementor 中使用 Unlimited Elements 插件，为产品或文章添加多级筛选功能。本文以 WooCommerce 产品网格配合“标签筛选器（Tab Filters）”小工具为例。这是一个常见的应用场景。实际上，多级筛选功能也适用于多种类型的文章、画廊等内容。

下面是逐步实现多级筛选的详细操作指南：

第一步：设置分类和子分类

在开始操作之前，先为文章或产品设置好分类和子分类，并分配到正确的类别中。

这样，筛选器才能按照预设的层级逻辑展示内容。

第二步：安装所需小工具

首先我们需要安装Unlimited Elements 插件。

本次示例中使用的是 Tab Filters 小工具和 WooCommerce 产品网格 小工具。

打开 Unlimited Elements 小工具库，搜索这两个小工具。当鼠标悬停在小工具上时，会看到“安装”按钮，点击即可完成安装。

第三步：添加产品网格到页面中

在页面中添加 WooCommerce 产品网格小工具，并设置产品查询条件。例如，可以只显示“男装”或“女装”分类下的产品。

注意，在设置查询时将术语关系（Term Relation）设置为“或（OR）”，否则在选择多个分类时，网格中不会正确显示结果。

继续下一步之前，打开产品网格小工具中的 Ajax 过滤功能。

第四步：启用过滤功能

在产品网格的小工具设置中启用 Ajax 过滤功能，如图所示。

第五步：添加主筛选器

将一个 Tab Filters 小工具拖入页面，并将其“筛选角色（Filter Role）”设置为 主筛选器（Main）。

然后进入“术语选择（Terms Selection）”部分，自定义查询，显示主标签中要展示的分类，比如“男装”、“女装”。

第六步：添加子筛选器

在主筛选器下方，再添加一个 Tab Filters 小工具，并将其“筛选角色”设置为 子筛选器（Child）。

然后进入“术语选择”部分，配置要展示的子分类。在本例中，选择“Men（男装）”作为父分类，并勾选“显示子分类（Children Of）”。

这样设置后，子筛选器会根据主筛选器的选择动态更新分类标签。

总结

完成设置后，预览页面，测试多级筛选功能是否如预期运行。当点击主分类（如“男装”）时，下方会动态展示对应的子分类；点击子分类后，产品网格将自动筛选出匹配的商品。

通过以上步骤，可在 Elementor 中实现多级筛选功能，让页面内容展示更加有条理，并方便访问者快速找到目标信息。

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