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

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

相关推荐
tommyjiatong4 天前
解决 WordPress 必须带 index.php 才能访问及无法提交站点地图(Sitemap)的底层原理与方案
php·网站搭建·wordpress
youwen218 天前
一个3D集装箱可视化工具
3d·外贸·集装箱·外贸工具
Web极客码9 天前
如何在WordPress中通知用户他们的评论已获批准?
服务器·wordpress·评论
小李@Free2FA14 天前
跨境卖家多平台二次验证统一管理
安全·外贸·2fa·二次验证
钟智强15 天前
我警告了 329 天
git·php·wordpress·webshell
JokySue16 天前
外名网深度评测:ICANN认证域名注册商,600多种域名后缀一站搞定
云计算·wordpress·云服务器·域名注册·无代码建站
fobwebs16 天前
网站多国语言URLs被谷歌收录后,如果这些URLs移除了,如何正确处理?
seo·wordpress·多语言·小语种
豆豆16 天前
CMS 网站管理系统是什么?2026企业建站选哪个系统高效又省心
wordpress·建站系统·cms建站·网站管理系统·企业建站·建站工具·政务建站
SEO_juper16 天前
图片站点地图 Image Sitemap 提交,加速爬虫收录全部视觉素材
seo·跨境电商·外贸·geo·谷歌优化
jump_jump21 天前
EmDash:如果今天重写一遍 WordPress
cms·全栈·wordpress