WoodMart 主题设置 AJAX 商品筛选功能教程

如果你用的是 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 产品过滤器功能其实非常强大,用好了就是一个高效转化工具。你需要提前设置好商品的属性和分类,再在侧边栏中添加合适的小工具,几分钟也能搭出一个功能完整的筛选系统。

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注