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

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

相关推荐
代龙涛2 天前
WordPress sidebar.php 侧边栏开发教程
开发语言·php·wordpress
代龙涛3 天前
WordPress header.php 与 footer.php 模板结构详解
开发语言·php·wordpress
SEO_juper3 天前
2026年Schema自动注入实战:用Python批量给1000个页面加上JSON-LD,AI引用率实测提升38%
人工智能·python·json·seo·独立站
Web极客码8 天前
如何在WordPress中添加动态内容
服务器·前端·wordpress
tommyjiatong11 天前
WordPress电商展示站服务器迁移指南
服务器·数据库·wordpress
IT大白鼠12 天前
WordPress组合漏洞wp2shell技术分析报告
wordpress·安全漏洞·wp2shell 漏洞
Markk14 天前
Wordpress及第三方支持工具docker容器化搭建
wordpress
Web极客码19 天前
WordPress SEO优化:提升网站排名的13个关键步骤
服务器·seo·wordpress
tommyjiatong25 天前
解决 WordPress 必须带 index.php 才能访问及无法提交站点地图(Sitemap)的底层原理与方案
php·网站搭建·wordpress
youwen211 个月前
一个3D集装箱可视化工具
3d·外贸·集装箱·外贸工具