用 Bricks 设计产品详情页：WooCommerce 还是 Meta Box？

为什么要用 Bricks 重做详情页

默认详情页往往字段堆砌、版式固定，和你的品牌调性对不上。用 Bricks 做单页模板，能把每个区块按产品特点重新组织，转化率也更容易优化。

下面讲两种做法。

路线一：WooCommerce Single Product 模板

WooCommerce 是成熟的电商插件，C 端场景功能最完整。

1. 安装 WooCommerce，建好产品和分类。
2. 后台 Bricks → Templates 新建模板，类型选 WooCommerce Single Product。
3. 进编辑器，小部件面板最上方的 Product 分类下，全是对应产品字段的小部件：
   • Product title：产品标题
   • Product gallery：产品图册
   • Product short description：短描述
   • Product price：价格
   • Product stock：库存
   • Product meta：SKU、分类等信息
   • Product rating：评分
   • Product content：详细描述正文
   • Add to cart：加入购物车
   • Related products：同分类/同标签的关联产品
   • Product additional information：重量、尺寸等
   • Product tabs：把描述、附加信息、评价整合进切换面板
   • Product up / cross-sells：upsell / cross-sell
4. 按产品特点排好版。
5. 用 Template settings → Conditions 把模板挂到产品页。
6. 保存，前台查看。

Product 分类下的核心小部件

上面列出的小部件几乎覆盖了产品页所有常规区块。实际做的时候，按你的转化目标排布即可——比如把 Gallery 放左侧、Price 和 Add to cart 放右侧首屏，详细描述用 Product tabs 收起来，避免页面过长。

brickswiki 视角：B2C 首选 WooCommerce（现成小部件多）；如果 B2C 还需要额外字段（如技术参数表），也可以用 Meta Box 在 Woo 产品编辑页扩展自定义字段，两全其美。

路线二：Meta Box + MB CPT 自定义详情页

这条路线最适合 B2B 产品——B 端产品一般不在站上交易，需求简单。

1. 装好 Meta Box 和 MB CPT，建好自定义产品类型和字段（可复用列表页里建的字段）。
2. 到 Bricks → Templates 新建模板，类型选 Single。
3. 进编辑器，挑一个自定义产品做预览。
4. 按设计稿加小部件，用 Dynamic Data 把字段显示出来。
5. 把模板应用到整个自定义类型或具体分类。
6. 保存验收。

B2B 与 B2C 的选型建议

• B2C：直接用 WooCommerce，配套插件最全。
• B2B：用 Meta Box + MB CPT，轻量、快、够用。

小结

详情页两条路和列表页同理：WooCommerce 便利（现成小部件多），Meta Box 更依赖自定义字段和动态数据。按你做 B2B 还是 B2C 来选，最后别忘用 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.

获取报价 →浏览全部教程