如果你用的是 WoodMart 主题,并且打算做一个电商网站,那一定不能错过它自带的 AJAX 产品过滤器 功能。这个过滤器可以让顾客在不刷新页面的情况下快速按品牌、价格、颜色、分类等维度筛选商品,提高浏览效率,降低跳出率。
第一步:确认你启用了 WooCommerce 和 WoodMart Core 插件
要用 AJAX Filter,你的站点必须先具备以下两点:
已安装并启用 WooCommerce 插件
已安装并启用 WoodMart Core 插件(这是 WoodMart 功能的核心)
如果这两个没装,先到后台【插件 → 安装插件】里搜索并启用。
第二步:配置好商品属性和分类
过滤器依赖商品的“属性”和“分类”。你必须先定义好这些内容,系统才知道要过滤什么。
操作步骤如下:
后台进入【产品 → 属性】
新建属性,比如:颜色、尺寸、品牌对每个属性点击“配置条目”,比如为颜色添加红、蓝、白编辑商品时,在“产品数据 → 属性”中添加并勾选“用于产品变体”(如果是可变产品)和“可见”这些属性值
注意:只有商品实际用了这些属性,过滤器里才会显示相关选项。
第三步:创建一个带过滤器的小工具侧边栏
WoodMart 推荐使用 Elementor 或默认小工具面板来添加过滤器。这里以 WordPress 原生侧边栏为例:
后台进入【外观 → 小工具】
找到 Shop sidebar(商店侧边栏)或自己新建一个小工具区域
拖入以下几个小工具(前提是已启用 WoodMart Core):WOODMART Filter by Attribute(用于按颜色、品牌等属性过滤)
WOODMART Filter by Price(用于价格范围过滤)
WOODMART Categories Widget(用于按商品分类过滤)每个过滤器都可以设置标题、显示方式(列表、下拉、多选)等样式选项
保存设置
第四步:将这个侧边栏应用到商店页面
现在你需要让这个过滤器出现在正确的页面位置。
操作方式:
进入后台【WoodMart → Theme Settings → Layout→ Sidebar】
在“Shop sidebar position”中选择 Left 或 Right(左边或右边显示)保存设置
刷新你的网站商品列表页,就能看到带过滤器的侧边栏了。
第五步:开启 AJAX 过滤功能
默认 WoodMart 的过滤器就是 AJAX 的,也就是点击筛选选项时商品会自动更新,不需要刷新页面。但你也可以手动检查是否开启了相关功能。
后台进入【WoodMart → Theme Settings → Product archive】
确认以下选项是否已启用:AJAX shop
AJAX add to cart
Product grid switching(可选)
这些功能能让整个商品页更加顺滑、无跳转,提高用户体验。
第六步:设置移动端折叠筛选
为了兼顾手机端访问体验,WoodMart 提供了移动设备专用的“Filter”按钮,点击后弹出侧边栏。
进入【Theme Settings → Layout】下拉到底部,打开:
Filters button on mobile(开启移动端筛选按钮)
Filters off-canvas for tablet(开启弹出式侧边栏)
这样在手机上用户就能点按钮呼出筛选面板,页面更整洁、操作更方便。
常见问题排查
过滤器点击没反应?
检查页面是否开启 AJAX 模式,或是否有缓存插件拦截 JS 请求。
筛选选项没有显示?
确保商品已经应用了对应属性或分类,否则系统不会生成筛选项。
样式错乱?
尝试清理缓存,或关闭 CSS 压缩合并功能后刷新页面。
总结
WoodMart 自带的 AJAX 产品过滤器功能其实非常强大,用好了就是一个高效转化工具。你需要提前设置好商品的属性和分类,再在侧边栏中添加合适的小工具,几分钟也能搭出一个功能完整的筛选系统。