用 Bricks 做产品列表页：WooCommerce 与 Meta Box 两条路线怎么选

为什么需要产品列表页

做外贸或电商站，能简单、全面地展示产品，会间接拉高转化率。产品列表页就是把「一堆产品」整齐铺出来，让访客快速浏览、筛选、点进详情页的入口。

在 Bricks 里有两条主流路线：一条用 WooCommerce 的原生小部件，一条用 Meta Box + MB CPT 自己定义产品类型。下面讲清两者的操作和取舍。

两种方案一句话对比

• WooCommerce 路线：功能最全、最省事，Bricks 原生小部件支持好，适合 B2C / 需要在线交易 的站。
• Meta Box + MB CPT 路线：完全自定义，无购物车/支付等冗余功能，对加载速度影响小，适合 B2B / 只展示不交易 的站。

路线一：WooCommerce 产品列表页

1. 安装 WooCommerce 插件，先建好产品和产品分类。
2. 后台进 Bricks → Templates，新建模板，模板类型选 WooCommerce Product Archive。
3. 进编辑器后，小部件面板会多出 WooCommerce 和 Product 两个分类（装了 Woo 才会出现）。列表页主要用 WooCommerce 分类下的小部件：
   • Products：展示产品，可自定义查询条件（排序、数量等）。
   • Products filter：按属性筛选，支持下拉、复选、单选等多种形式。
   • Products archive description：产品分类描述，动态数据取自后台 Products → Categories → Description。
   • Mini cart：购物车图标，一般放页眉而非列表页。
4. 排好版后，进 Template settings → Conditions，选要套用该模板的页面或产品分类。
5. 保存，回前台预览。

Products Filter 小部件的用法与坑

这个筛选小部件非常强，展示形式应有尽有：

• Dropdown（下拉框）、Checkbox（复选框）
• Radio list / Text list（只能单选）、Box list（可多选）
• 还能按价格、按评分过滤，并带一个「重置所有筛选条件」的按钮

但它有两个已知短板，规划时要心里有数：

• 不是 AJAX 交互：每次点筛选都会整页刷新。
• 动态网址不利于 SEO：筛选状态会写进 URL。

brickswiki 视角：在手机/平板上，建议配合「显示条件」把这个筛选器藏起来，再放一个带显示条件设定的按钮搭配 Off-canvas 抽屉，移动端体验会好很多。

路线二：Meta Box + MB CPT 自定义列表

1. 安装 Meta Box 和 MB CPT 两个插件，创建自定义页面类型（如 Products-MB）和自定义字段。
2. 进 Products-MB 新增产品（如 T-shirt），填好描述和自定义字段。
3. 到 Bricks → Templates 新建模板，模板类型选 Archive。
4. 进编辑器按设计稿布局，配合 Dynamic Data（动态数据） 和 Query Loop 把字段喂进去。
5. 进 Template settings → Conditions，把模板应用到刚才的自定义页面类型。
6. 保存，到前端验收。

B2B 还是 B2C？怎么选

• 要加购、付款、物流、评论这套 C 端链路 → 无脑选 WooCommerce，生态成熟、小部件现成。
• 只展示产品、不需要交易 → 选 Meta Box + MB CPT，页面更轻、加载更快，对 B2B 站更友好。

小结

产品列表页两条路：WooCommerce 省事但偏重，适合 B2C；Meta Box 轻量自由，适合 B2B。无论哪条，最后都用 Template settings → Conditions 把模板挂到对应页面或分类上。

内容说明（整理稿）：本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程（源多为截图驱动教程，正文极薄），内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理，非原文逐字翻译，也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准，实操前建议对照官方文档核对。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程