整理产品数据：筛选的基础
在动手搭建之前，确保 WooCommerce 已安装且后台有可供展示的商品。如果安装流程不熟悉，可以参考官方提供的集成指南。筛选功能依赖现有的数据字段，比如分类、颜色或尺寸。如果产品没有分配这些属性，前端添加再多的筛选控件也是无效的。
建议先检查产品分类是不是包含实际商品，全局属性是不是已定义并赋值。为了让价格区间筛选更直观，商品的价格跨度最好拉开一些；同样，不同评分的商品能更明显地展示评分筛选的效果。排序功能也依赖数据，比如说按“人气”排序需要基于销量数据，如果所有商品销量一致，排序结果就没有区分度。
构建产品循环结构
Divi 提供了多种 WooCommerce 模块，但为了获得更精细的控制权，本教程选用独立的图片、标题、文本和按钮模块，并在其父容器上启用循环（Loop）。这种方式允许自定义产品卡片的内部布局，决定显示哪些信息和排列方式。如果希望直接从现成设计开始，可以导入 Divi 提供的“12 个商店循环”免费模板，导入后继续配置下方的查询设置。无论哪种方式，核心步骤都是先建立循环，再连接筛选模块。
设计产品卡片
进入可视化编辑器，添加一个行或组作为网格容器，在其内部再嵌套一个容器作为单个产品卡片。选中外层容器，将布局模式改为 CSS Grid，用来控制卡片的列数和间距。内层卡片保持为单一单元，内部可以添加图片模块展示主图，标题模块显示名称，文本模块显示价格，按钮模块链接到商品详情页。还可以使用组模块来微调卡片内部的水平排列，这种局部调整不会影响外部网格的整体结构。
启用循环并设置查询
选中包含产品卡片的外层容器，在设置中启用 Loop 功能。配置查询规则，确定要显示的商品类型、排序方式和每页数量。这一步决定了网格中会填充哪些数据。
绑定动态内容
将卡片内的静态模块替换为动态字段。图片模块绑定商品主图，标题模块绑定商品名称，文本模块绑定价格，按钮模块绑定商品链接。确保每个字段都正确映射到 WooCommerce 的数据源，这样循环运行时才能显示实时数据。
标记循环
为这个循环设置一个唯一的 ID 或标签。后续的筛选模块需要通过这个标识来关联特定的产品列表，确保筛选操作只影响目标区域。
连接筛选模块
添加 Divi 的 Post Filter 模块，并将其指向刚才创建的产品循环。这个模块提供用户交互界面，允许他们细化搜索结果。
配置筛选项
在筛选模块设置中，定义可用的筛选维度。除了基础的关键词搜索，还可以添加分类筛选、价格滑块等控件。确保这些筛选项与产品数据中的字段对应。
添加 WooCommerce 专属筛选
利用 Divi 与 WooCommerce 的集成功能，添加库存状态、评分星级、商品属性（如颜色、尺码）等专用筛选项。这些控件能直接读取 WooCommerce 的数据结构，提供更专业的购物筛选体验。
支持属性、标签与自定义字段
如果商品使用了自定义属性或标签，也可以在筛选模块中配置相应的输入控件，让用户根据这些维度做查找。自定义字段筛选适合需要按特定参数（如材质、适用人群）过滤的场景。
启用排序功能
为筛选结果添加下拉菜单，让用户可以按价格（低到高、高到低）、人气（销量）、评分或最新发布等标准重新排列网格中的产品。排序选项同样基于后端数据，确保逻辑准确。
筛选触发时的行为逻辑
当用户点击筛选项或输入关键词时，前端会向服务器发送请求，更新产品循环的查询参数。Divi 的筛选模块会动态刷新网格内容，无需重新加载整个页面，保持流畅的浏览体验。注意，筛选和排序是叠加生效的，比如说用户可以先筛选“红色商品”，再在结果中按“价格最低”排序。
美化筛选表单
统一样式调整
进入筛选模块的设计选项，统一调整输入框、下拉菜单、滑块和按钮的字体、颜色和间距。保持筛选栏的视觉风格与页面整体一致，避免突兀。可以批量应用 CSS 类来简化重复的样式设置。
优化小屏幕布局
在移动设备或小屏幕窗口中，复杂的筛选栏可能会显得拥挤。通过 Divi 的响应式断点设置，在小屏模式下将多列筛选控件切换为堆叠显示，或默认隐藏部分高级筛选选项，点击“更多筛选”时展开。确保操作区域留有足够的点击空间，提升移动端体验。
完成可探索的产品网格
至此，一个具备搜索、分类、属性、价格及排序功能的产品网格就搭建完成了。用户可以根据需求快速定位商品，提升浏览效率。定期检查产品数据与筛选配置的同步性，确保新增商品能正确进入筛选系统。这个结构不仅适用于商店主页，也可以嵌入产品列表页或分类页，提供一致的购物体验。
