在本教程中,我们展示在 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 中实现多级筛选功能,让页面内容展示更加有条理,并方便访问者快速找到目标信息。