跳过到主内容
< 返回
当前位置:
打印

创建产品筛选表单

目录

产品筛选器元素允许客户按类别、属性、库存状态、价格或排序方式筛选产品。您可以使用 Gutenberg、Elementor 或 WPBakery 构建表单,将其显示在商店产品网格上方,或放置在另一个页面上。有关前端示例,请参阅旅行演示

演示 Travel 上的筛选器控件
以水平布局显示的产品筛选器表单。

创建筛选器表单

  1. 导航至仪表盘 -> HTML 区块 -> 添加新
  2. 使用您当前使用的页面构建器添加产品筛选器元素或区块。
  3. 添加并配置所需的筛选器类型。
  4. 配置表单布局、行为和样式,然后发布 HTML 区块。

在 Gutenberg 和 WPBakery 中,将各个筛选器元素添加到产品筛选器容器内。在 Elementor 中,将它们作为项目添加到小部件的筛选器部分。

可用的筛选器类型

  • 类别 — 按产品类别筛选产品。
  • 属性 — 按选定的全局 WooCommerce 属性(例如颜色或尺寸)进行筛选。
  • 库存状态 — 可以包括促销、有货和缺货预订选项。
  • 价格 — 按选定的价格范围筛选产品。
  • 排序方式 — 允许客户更改产品排序顺序。

在使用属性筛选器之前,请在仪表盘 -> 产品 -> 属性中创建全局属性及其术语,然后将这些术语分配给您产品。

配置表单行为

使用产品筛选器设置来选择下拉菜单是在点击还是悬停时打开,以及是否显示选定的值。Elementor 和 WPBakery 还提供提交表单于选项:

  • 按钮点击 — 当客户点击筛选按钮时应用所有选定的筛选器。
  • 下拉选择 — 选择某个值时应用筛选器。

在 Gutenberg 中,将按钮区块保留在产品筛选器内以进行手动提交,或将其移除以在选择后应用筛选器。

产品筛选器元素后端 WPB
在 WPBakery 中配置的产品筛选器表单示例。

在商店产品上方显示表单

  1. 导航至仪表盘 -> 主题设置 -> 产品存档 -> 商店筛选器
  2. 启用商店筛选器
  3. 商店筛选器内容类型设置为HTML 区块
  4. 商店筛选器 HTML 区块中选择您创建的表单。
  5. 保存主题设置。
选择了 HTML 区块的商店筛选器设置
选择 HTML 区块作为商店筛选器内容。
带有产品筛选器和排序选项的商店页面
显示在商店产品网格上方的筛选器表单。

在另一个页面上显示表单

将已发布的 HTML 区块插入到您希望筛选器表单出现的任何位置。当表单在产品存档之外使用时,提交它会打开带有选定筛选参数的 WooCommerce 商店页面。在商店和产品存档页面上,筛选器与当前存档一起工作,并在启用 AJAX 商店时支持 WoodMart AJAX 筛选。