WoodMart Layout Builder 教学：WooCommerce 页面布局实操指南

WoodMart 是一款高度偏向商业实战的 WooCommerce 主题，其 Layout Builder 是整个主题体系中最关键的功能模块之一。通过 Layout Builder，可以直接接管 WooCommerce 的页面结构，实现产品页、商店页及其他系统页面的深度定制。

理解并正确使用 Layout Builder，是使用 WoodMart 搭建电商站点的基础能力。

一、Layout Builder 在 WoodMart 中的定位

1.1 Layout Builder 的实际用途

Layout Builder 的作用并不是“美化页面”，而是重构 WooCommerce 页面结构。

它主要解决以下问题：

默认产品页结构不可控
不同产品无法使用不同页面布局
商店页与分类页样式单一
修改主题文件风险高、维护成本大

通过 Layout Builder，可以在不写代码的情况下完成页面结构的完全重组。

1.2 Layout Builder 与普通页面编辑的区别

普通页面编辑器只作用于单个页面内容，而 Layout Builder 直接作用于 WooCommerce 的系统页面。

关键区别在于：

Layout Builder 会替换默认 PHP 模板输出
布局可通过条件控制应用范围
同一个站点可同时存在多个产品页结构

因此，Layout Builder 更接近“页面模板系统”，而不是内容编辑器。

二、创建 Single Product 单产品页布局

2.1 新建 Single Product Layout 的路径

后台操作路径如下：

WordPress 后台
Layouts
Single Product
Add New

创建时需要完成两项基础设置：

Layout 名称
应用条件（Conditions）

2.2 应用条件的设置逻辑

条件决定该布局作用于哪些产品，常见用法包括：

所有产品统一使用一个布局
某个分类使用独立布局
指定某几个产品使用专属结构

这一步的意义在于，让不同类型的产品拥有不同的展示策略，而不是全部套用同一个模板。

2.3 进入 Builder 编辑布局结构

点击 Create Layout 后，系统会进入可视化 Builder。

布局由模块化元素组成，例如：

产品图片
产品标题
价格
描述
按钮
自定义内容区块

每一个元素都支持：

间距调整
字体设置
颜色控制
功能参数配置

所有布局默认支持桌面端、平板端和移动端。

三、Layout Builder 中的元素分类说明

3.1 Global Elements

Global Elements 是可在多个布局中重复使用的通用模块，适合用于：

统一促销区
固定说明模块
通用 CTA 区块

这类元素用于保持站点风格一致。

3.2 Site Elements

Site Elements 包含站点级组件，通常与整体结构相关，用于维持不同布局之间的统一逻辑。

3.3 Single Product 专属元素

Single Product 区域中的元素只能用于单产品页，例如：

产品标题
产品评分
产品价格
加入购物车按钮

这些元素无法在普通页面或其他布局中调用。

四、设置正确的产品预览对象

4.1 为什么需要指定预览产品

默认情况下，Builder 会随机选择一个产品作为预览，这在以下情况下容易产生误判：

产品字段不完整
变量产品与简单产品结构不同
布局在真实产品中显示异常

4.2 指定预览产品的操作方式

操作路径如下：

Theme Settings
Single Product
Builder Area
选择一个具体产品

设置完成后，Builder 中的布局将始终基于该产品进行渲染。

五、自定义布局导致功能缺失的原因

5.1 功能消失的本质原因

当使用自定义 Layout 时：

默认 WooCommerce 页面结构被清空
原本通过 PHP Hook 输出的内容不再自动加载

因此，一些功能模块可能不再显示，例如：

访客计数
第三方插件信息
自定义扩展内容

5.2 使用 WooCommerce Hook 元素恢复功能

WoodMart 提供了 WooCommerce Hook 元素，用于手动插入 Hook。

使用流程通常为：

确认插件依赖的 Hook 名称
在布局中添加 WooCommerce Hook 元素
选择对应 Hook
启用 Clean Actions 以移除默认输出

Hook 的主要作用是：

保证第三方插件兼容
添加自定义功能代码

六、创建 Shop Page（产品归档页）布局

6.1 新建 Products Archive Layout

后台路径如下：

Layouts
Products Archive
Add New

同样需要设置布局名称和应用条件。

6.2 Archive Layout 的专属元素说明

产品归档页拥有与单产品页不同的组件，例如：

产品循环模块
分类筛选
排序工具
分类描述区域

这些元素只在 Products Archive Layout 中可用。

6.3 发布布局后的效果

发布后：

默认商店页将被替换
所有符合条件的分类页将使用新结构

这是实现商店页差异化设计的基础。

七、WoodMart 支持的其他页面布局类型

7.1 可定制的页面范围

除产品相关页面外，Layout Builder 还支持：

Cart 页面
Checkout 页面
Thank You 页面
Single Post 页面
Post Archive 页面

这使整个站点的结构可以统一在同一套系统中管理。

7.2 使用统一布局系统的意义

统一使用 Layout Builder 可以带来以下优势：

页面结构一致
降低维护成本
减少模板冲突
提高扩展稳定性

对于长期运营的 WooCommerce 站点，这是非常重要的一点。

八、实操中的常见建议

不同产品类型使用不同布局
爆款产品单独设计页面结构
插件异常优先检查 Hook
避免在布局中堆叠无效模块
必须检查移动端展示效果

Conclusion

WoodMart 的 Layout Builder 本质上是一套 WooCommerce 页面结构管理系统，而不是简单的页面美化工具。合理使用它，可以彻底摆脱默认模板限制，使产品页、商店页和系统页面都具备可控、可维护、可扩展的结构。

对于使用 WoodMart 的电商站点来说，Layout Builder 是绕不开的核心功能。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息