跳过到主内容

以水平布局显示的产品筛选器表单。

在 WPBakery 中配置的产品筛选器表单示例。

选择 HTML 区块作为商店筛选器内容。

显示在商店产品网格上方的筛选器表单。
Mloun 外贸建站知识库
< 返回
当前位置:
打印
创建产品筛选表单
创建于
上次更新时间
由Mloun
目录
产品筛选器元素允许客户按类别、属性、库存状态、价格或排序方式筛选产品。您可以使用 Gutenberg、Elementor 或 WPBakery 构建表单,将其显示在商店产品网格上方,或放置在另一个页面上。有关前端示例,请参阅旅行演示。

创建筛选器表单
- 导航至仪表盘 -> HTML 区块 -> 添加新。
- 使用您当前使用的页面构建器添加产品筛选器元素或区块。
- 添加并配置所需的筛选器类型。
- 配置表单布局、行为和样式,然后发布 HTML 区块。
在 Gutenberg 和 WPBakery 中,将各个筛选器元素添加到产品筛选器容器内。在 Elementor 中,将它们作为项目添加到小部件的筛选器部分。
可用的筛选器类型
- 类别 — 按产品类别筛选产品。
- 属性 — 按选定的全局 WooCommerce 属性(例如颜色或尺寸)进行筛选。
- 库存状态 — 可以包括促销、有货和缺货预订选项。
- 价格 — 按选定的价格范围筛选产品。
- 排序方式 — 允许客户更改产品排序顺序。
在使用属性筛选器之前,请在仪表盘 -> 产品 -> 属性中创建全局属性及其术语,然后将这些术语分配给您产品。
配置表单行为
使用产品筛选器设置来选择下拉菜单是在点击还是悬停时打开,以及是否显示选定的值。Elementor 和 WPBakery 还提供提交表单于选项:
- 按钮点击 — 当客户点击筛选按钮时应用所有选定的筛选器。
- 下拉选择 — 选择某个值时应用筛选器。
在 Gutenberg 中,将按钮区块保留在产品筛选器内以进行手动提交,或将其移除以在选择后应用筛选器。

在商店产品上方显示表单
- 导航至仪表盘 -> 主题设置 -> 产品存档 -> 商店筛选器。
- 启用商店筛选器。
- 将商店筛选器内容类型设置为HTML 区块。
- 在商店筛选器 HTML 区块中选择您创建的表单。
- 保存主题设置。


在另一个页面上显示表单
将已发布的 HTML 区块插入到您希望筛选器表单出现的任何位置。当表单在产品存档之外使用时,提交它会打开带有选定筛选参数的 WooCommerce 商店页面。在商店和产品存档页面上,筛选器与当前存档一起工作,并在启用 AJAX 商店时支持 WoodMart AJAX 筛选。
创建于
上次更新时间
-
一般设置
-
产品管理-B2B展示站
-
主题设置
-
商店设置
- Abandoned cart弃购挽回/购物车跟踪设置
- B2C商店设置向导
- Paypal付款设置
- Size guide table尺码表设置-针对服装和鞋
- Stripe支付设置
- Tax 税率设置
- 产品详情页侧边栏设置
- 优惠券设置
- 促销倒计时设置
- 促销弹窗设置
- 商店基础设置
- 已售出数量/库存进度条设置
- 物流设置及订单发货流程
- 虚拟销售通知信息提示
- 虚拟销售量/虚拟当前访问量
- 设置-满XXX元包邮
- 设置PDF Invoice发票/装箱单
- 货币设置
- 运费设置
- 运费设置案例1
- 邮件模板设置
- 隐藏checkout结账页面的Ship to a different address
- 页眉横幅设置
- 显示所有 (13) 折叠
-
幻灯片教程
-
其它
- B2B添加自定义产品起批量
- CSS-自定义渐变背景
- Facebook Meta Pixel 像素代码安装
- Google Merchant Center
- Mailchimp邮件订阅功能
- Mailgun邮件订阅功能
- PDF账单的中文字符问题
- PHP远程下载文件
- Polylang 多语言
- VPS网络回程线路一键测试脚本
- VPS高负载排查流程
- woocommerce Checkout Field结账条件显示姓名及身份证号码字段
- woocommerce添加自定义字段
- Woodmart自定义功能代码
- Wordpress网站被黑修复
- 为背景图添加遮罩效果
- 产品导入CSV文件转码UTF-8
- 关于隐藏PayPal Standard 标准支付
- 删除外观->菜单->产品类别的分页
- 商店订单列表添加自定义列
- 如何使用 phpMyAdmin 创建新的 WordPress 管理员用户
- 如何使用Google网站管理员 (Google Search Console)提交网站
- 如何申请reCAPTCHA验证码
- 嵌入Youtube视频播放结束后不要显示其它推荐
- 常用插件
- 插入自定义Html block 简码
- 显示 WooCommerce 下载文件列表
- 添加Buy now 按钮-针对simple产品
- 添加自定义销售量
- 火车头采集产品导入woocommerce+SEO yoast
- 禁止Wordpress通知信息
- 移除Nitropack页脚标志
- 简单产品和可变产品添加buy now
- 给woocommerce Order by加on sale排序
- 给Wordpress后台页面添加自定义CSS
- 自定义Add To Cart按钮文字
- 自定义CSS代码
- 表格隔行显示背景
- 隐藏掉woocommerce Product data里面的选项卡
- 显示所有 (29) 折叠
-
站内优化
-
产品管理-B2C商城
-
SEO设置
-
B2B2C设置
-
页面设计
-
多语言
-
页头构建器
-
商店
-
操作指南
- 暂无
-
布局构建器
- 暂无
-
WoodMart 轮播
- 暂无
-
弹出层与浮动块
- 暂无
-
文章类型
- 暂无