🆕 Bricks 2.4 已发布:查询循环性能提升 40%,迁移教程同步更新 →

首页 / 中文教程 / 教程

Bricks 制作 Single Product 产品详情模板(WooCommerce)

教程:单个商品详情页由 Single Product 模板决定。Woo 版拉价格、相册、加购、评价等电商模块,两栏布局是标配。

Ray ChanRay Chan·2026-08-20·约 1 分钟
目录
  1. 1.与 Single Post 的区别
  2. 2.制作步骤
  3. 3.电商模块从哪来
  4. 4.小结

单个商品的详情页由 Single Product 模板决定。Woo 版可拉价格、相册、加购、评价等电商模块。本文讲做法。

与 Single Post 的区别

数据类型换成 Woo 的「产品」:要展示的是价格、库存、相册、加购按钮、评价,而不是文章正文。模板类型仍选 Single,条件设为产品类型。

制作步骤

  1. 后台 Bricks → Templates → 新建,类型选 Single,条件设为「产品」。
  2. 用 Bricks 的产品元素/动态数据拉:标题、画廊(相册)、价格、简述、加购按钮、评价。
  3. 用两栏布局:左相册、右购买区,是电商详情页常见结构。
  4. 下方可放「相关产品」(Query Loop 按分类取同品类)。

电商模块从哪来

加购、价格、评价都是 Woo 提供,Bricks 有对应元素直接拖。相册用产品画廊元素,加购用加购按钮元素,不必手写。

小结

Single Product(Woo)= Single 模板 + 产品动态数据 + 电商模块。两栏相册+购买区是标配,相关产品用 Query Loop 自动带出。


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

Ray Chan

站长

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.

延伸阅读