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、 前台查看功能测试

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

相关推荐
SEO_juper13 天前
不同国家服务器、域名选择,提升本地谷歌抓取优先级
运维·服务器·seo·外贸·geo·独立站·跨境电商独立站
SEO_juper14 天前
B2B 工厂专属双引擎策略:SEO 承接采购词排名,GEO 抢占 AI 咨询问答
aigc·seo·跨境电商·外贸·geo·谷歌优化·gsc
豆豆15 天前
什么是CMS系统_网站内容管理系统功能、分类与搭建方法详解
cms·wordpress·内容管理系统·网站管理系统·saas 建站·网站后台管理·网站建站
豆豆16 天前
2026年如何选择适合自己的网站管理系统?
数据库·cms·wordpress·建站系统·网站管理系统·建站软件·织梦
Web极客码16 天前
使用FeedBurner优化WordPress订阅体验
服务器·wordpress·feedburner
SEO_juper16 天前
Semrush Site Audit 全站体检:自动出完整报告 + AI 逐条解析报错,附带批量整改落地方案
人工智能·seo·外贸·geo·独立站·跨境电商独立站·gsc
SEO_juper17 天前
新独立站冷启动收录全攻略:配置、推送、抓取配额优化完整手册
前端·谷歌·seo·跨境电商·外贸·geo·独立站
吾店云建站17 天前
生成式GEO优化指南:WordPress网站如何被ChatGPT、DeepSeek和豆包等AI引擎引用 - 吾店GEO
人工智能·搜索引擎·chatgpt·独立站
SEO_juper17 天前
2026 完整版 GSC 使用手册:站点验证、收录监控、流量分析、AI 报表、技术排错全流程落地
aigc·seo·跨境电商·外贸·geo·谷歌优化·gsc
cll_86924189118 天前
WordPress Porto 主题后台一直提示 Porto Functionality 插件需要更新,如何隐藏?
wordpress