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

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

相关推荐
WordPress学习笔记20 小时前
wordpress链接的调用方法
wordpress
WordPress学习笔记20 小时前
wordpress建站专家和wordpress建站骗子最大的区别
wordpress
gpldock2224 天前
Flutter App Templates Deconstructed: A 2025 Architectural Review
开发语言·javascript·flutter·wordpress
Junson1420995 天前
使用雷池Waf架构搭建woocommerce外贸网站
wordpress·waf·雷池·woocommerce
Web极客码5 天前
WordPress 在哪里存储网站上的图片?
运维·服务器·wordpress
2601_949532846 天前
Psello HTML Template: A Developer‘s Deep-Dive Review and Guide - Download Free
前端·windows·html·seo·wordpress·gpl
Web极客码6 天前
选择CDN提升WordPress博客速度
cdn·wordpress·网站加速
出海生金8 天前
现在做外贸前景还好吗,做外贸需公司吗,可以自己做吗?
人工智能·经验分享·外贸·外贸soho·一人公司
独立站建站C_2Cshop9 天前
Linkedln内容营销该怎么做?
大数据·人工智能·外贸·独立站·跨境电商独立站
探索宇宙真理.9 天前
AhaChat Messenger WordPress漏洞 | CVE-2025-14316 复现&研究
经验分享·开源·wordpress·安全漏洞