WordPress+Elementor+Woocommerce配置产品聚合页和分类页多项筛选产品功能

示例图:

具体步骤:

一、配置产品信息

1、在后台产品子菜单点击attributes 新增产品属性(就是进行筛选的选项)

此处所对应前台的部分为:

2、新增attributes后点击该属性右侧的configure items 配置属性对应的选项

此处所对应前台的部分为:

3、 点击新增产品,对产品信息进行编辑后,绑定对应的attribute属性

下拉找到对应的product data项,点击Attributes,在Add existing下拉菜单中找到之前所添加的attribute选项,分别添加后选择该产品对应的参数,点击下面save attributes,点击发布产品。

二、配置smart filter插件

1、安装并激活插件 JetSmartFilters

2、回到控制台,左侧菜单中下拉找到smart filters, 点击add new新增filter选项(分别是对应前面产品信息录入的属性)。

3、 给新建filter项填写对应 N ame, T ype ,D ata source, T axonomy,打开对应功能选项,填写label参数,填完后点击右上角update发布。

三、配置elementor页面

1、 在编辑页面上新增对应个数的S elect Filter 组件,该组件是smart filter插件生成的。

选择对应的select filter,配置对应参数,Query ID需要注意,这里绑定的ID是下面product list组件的ID,不然此处的参数无法传递给list使用,也就无法成功筛选对应属性的产品。至于该模块的样式请自行调试,笔者此处只写明了功能实现步骤。

2、 创建完三个对应的filter组件后下面添加product list组件。

可以看到笔者此处是使用了一个loop组件,单独写了一个内容渲染的模板,此处可以自行选择使用模板还是使用组件实现。Template type类型要选择产品product或者post,要注意下面的is filterable一定要开启,否则无法正确检索。

3、 配置Query参数来源

此处需要注意的是,如果是在product聚合页使用该方案,此处要选择Laster Products或其他非Current Query的选项,因为聚合页的参数获取是null的,会无法显示产品列表。

相对的,如果是产品分类页面使用该方案,一般是在模板中配置,则对应要选择Current Query选项,否则无法正确显示该分类下的对应产品列表。

4、 配置product list组件的 ID, 关联select filter组件

Product list组件的advanced菜单下配置对应的ID,该ID需与上面创建的select filter组件的query ID相同,否则无法正确传递对应filter参数。

5、 前台查看功能测试

可以看到配置完成后选择对应参数进行筛选,下面会显示符合筛选条件的产品列表。

相关推荐
taocarts_bidfans1 天前
2026跨境SaaS工具选型指南:Taoify与Shopify/Shopyy/Ueeshop深度对比
java·前端·javascript·跨境电商·独立站
taocarts_bidfans2 天前
Taoify开放接口全解析:RESTful架构下,跨境开发者多系统对接实操指南
大数据·架构·restful·跨境电商·独立站
Web极客码3 天前
加快WooCommerce性能
服务器·wordpress·网站
SEO_juper4 天前
2026 跨境独立站 SEO 行业格局与机会预判
人工智能·seo·独立站·谷歌seo·谷歌优化·外贸电商·谷歌geo
豆豆5 天前
WordPress至PageAdmin CMS跨平台迁移技术指南:应对环境约束的系统化过渡方案
cms·wordpress·建站系统·内容管理系统·网站管理系统·pageadmin
2501_912784086 天前
技术深度解析:Taocarts 跨境独立站系统 —— 反向海淘全链路架构设计与自动化实现
运维·自动化·独立站·taocarts
taocarts_bidfans7 天前
Taoify与Redis、Nginx集成实战:提升跨境独立站性能与并发能力
数据库·redis·nginx·跨境电商·独立站
LTD营销SaaS8 天前
GEO 的本质是官网权威信源建设
独立站·ai建站·geo优化
Web极客码10 天前
Akismet对WordPress防垃圾评论
服务器·搜索引擎·wordpress
尘中客12 天前
【2026最新】如何用 WordPress 零代码搭建八字排盘/紫微斗数网站(附免费开源插件)
php·api·wordpress·建站源码·网站引流