不同产品需要展示的信息并不完全相同。服装商品需要突出颜色、尺寸和穿着效果，电子产品更重视参数与配置，工厂型产品则可能需要重点展示材质、生产能力和询盘入口。
SHOPAGG主题提供布局管理功能，可以自定义WooCommerce产品详情页的结构。你既可以创建一个全站统一的产品布局，也可以按照产品分类设置不同模板，让指定类别的商品使用专属详情页。
本节是《WordPress建站教程》的第10课，详细介绍如何通过SHOPAGG主题创建、发布和管理产品详情页布局。
什么是产品详情页布局？
产品详情页布局是一套控制商品页面“怎样排列和显示”的模板。它决定产品图片、标题、评分、价格、简短描述、购买按钮和详情内容分别出现在什么位置。
需要先分清两个概念：
- 编辑产品： 修改某个商品的名称、价格、库存、图片和描述；
- 编辑产品布局： 修改一批商品详情页共同使用的页面结构和样式。
布局不是只针对编辑时看到的某一个商品。某个布局被设置为默认模板后，所有符合条件的产品详情页都会使用它，包括已经发布的产品和后续新增的产品。
默认布局与自定义布局有什么区别？
每套SHOPAGG成品网站或主题都会提供默认产品布局。即使没有创建任何自定义布局，WooCommerce商品详情页也能正常显示。
自定义布局则允许你重新组合页面区块、选择其他预设结构，并增加统一文案或调整视觉样式。
| 布局类型 | 作用范围 | 适合场景 |
|---|---|---|
| 主题默认布局 | 没有其他布局匹配时使用 | 对默认效果满意，不需要额外设计 |
| 自定义默认布局 | 应用于全部或大多数产品 | 所有产品保持统一详情页结构 |
| 条件布局 | 只应用于指定分类等条件 | 不同产品类别需要不同展示方式 |
第一步：进入SHOPAGG主题布局设置
登录WordPress后台，打开“SHOPAGG主题”，找到“布局”管理入口。
布局页面会显示当前已经创建的模板。刚导入成品网站后，可能已经存在一套产品详情页布局，也可能直接使用主题默认效果。
如果后台没有SHOPAGG主题菜单，应先检查当前是否启用了SHOPAGG主题。上一课已经介绍了主题设置的整体结构，可以先查看：SHOPAGG网站主题设置快速预览
第二步：新建一个产品详情页布局
点击布局页面右侧的“新建布局”。系统会提供一些现有布局模板，可以先查看不同结构，再选择一个更接近目标效果的方案。
选择模板后点击“创建版面”，等待布局编辑器加载。
不建议一开始从空白页面制作。对于新手来说，先使用预设布局，再调整文字、颜色和区块位置，操作更快，也不容易遗漏价格或加入购物车按钮等关键元素。
第三步：认识布局中的动态产品区块
进入布局编辑器后，会看到产品评分、价格、简介、数量和加入购物车按钮等区块。
这些区块显示的是动态产品信息：
- 在布局编辑器中看到的是预览内容；
- 打开不同商品时，会自动读取对应商品的数据；
- 商品标题、价格和库存仍然在产品编辑页面管理；
- 布局只决定这些信息显示的位置和样式。
因此，不要在布局中逐个填写某件商品的价格或标题。只要把动态产品区块放到合适位置，SHOPAGG主题就会自动填充当前商品的信息。
部分动态区块中的具体产品信息不能直接在布局编辑器里改，这是正常的。如果要修改商品本身，应返回“产品”管理页面。
第四步：调整区块和页面样式
布局由多个区块组成，可以根据需要重新排列、增加内容，或者调整可编辑区块的样式。
例如，希望在每个产品简短描述上方统一增加一句提示，可以插入文字区块，然后设置：
- 文字内容；
- 字体大小；
- 文字颜色；
- 对齐方式；
- 上下间距。
视频中使用的演示方式是把新增文字设置为红色、居中并放大，让它在商品信息区域中更加醒目。
实际运营时不要只追求“醒目”，还要考虑品牌一致性。红色通常适合警告、促销或重要提醒；普通产品卖点可以使用品牌主色，避免页面中出现太多抢眼颜色。
第五步：发布并设为默认产品布局
完成布局调整后点击“发布”。根据视频中展示的操作，新发布的布局会成为当前默认产品布局。
发布后打开一个已有商品详情页并刷新，就可以看到新的布局效果。因为这是全局模板，所有符合当前条件的产品页面都会按照同一结构显示，而不是只改变测试时打开的那个商品。
发布后建议检查：
- 产品图片与相册是否正常；
- 标题、评分、价格和库存是否显示；
- 数量和加入购物车按钮是否可用；
- 简短描述与完整详情是否完整；
- 新增文字是否出现在正确位置；
- 电脑端和手机端是否存在错位；
- 不同类型的产品是否都能正常套用。
如果前台仍然显示旧布局，可以确认布局已经发布，再清理网站缓存或使用无痕窗口重新访问。
如何只让某个产品分类使用指定布局？
如果不同产品类别需要不同页面结构，可以使用“编辑条件”限制布局的显示范围。
例如，只希望“瑜伽裤”分类的产品使用当前布局，可以设置：
包含 → 产品分类 → 瑜伽裤
保存条件后：
- “瑜伽裤”分类中的产品使用这套自定义布局；
- 其他分类的产品不使用这套条件布局；
- 没有匹配其他条件时，其他商品会继续使用默认布局。
分类条件适合以下场景：
- 服装分类突出颜色、尺寸和模特图；
- 电子产品分类突出规格参数；
- 定制产品分类突出询盘和定制流程；
- 大型设备分类突出技术文档和应用案例；
- 数字产品分类隐藏不需要的物流信息。
使用条件布局前，应先整理好WooCommerce产品分类。分类混乱或商品没有正确归类，会导致模板无法按照预期显示。
可以创建多个产品布局吗？
可以。你可以为不同产品类别分别创建多个布局，再通过显示条件决定各自的作用范围。
例如：
| 布局名称 | 显示条件 | 主要特点 |
|---|---|---|
| 全站默认产品布局 | 默认 | 适合大多数普通商品 |
| 服装产品布局 | 产品分类：服装 | 突出尺码、颜色和图片 |
| 工业设备布局 | 产品分类：设备 | 突出参数、文档和询盘 |
| 促销商品布局 | 产品分类：特价 | 突出优惠信息和购买按钮 |
创建多个布局时，名称要清楚，并避免给同一产品设置多个相互重叠的条件。如果多个布局同时匹配，而后台没有明确显示优先级，可能导致前台结果不符合预期。
最稳妥的做法是先建立一套默认布局，再逐步为确实需要差异化展示的分类创建专属模板。
如何删除自定义布局并恢复默认效果？
如果不喜欢新建的布局，可以返回布局列表，把对应布局移至回收站。
删除自定义布局后，网站会重新使用SHOPAGG主题原来的默认产品布局。刷新产品详情页即可查看恢复效果。
删除布局与删除产品是两回事：
- 删除布局只会移除页面模板；
- 商品名称、价格、库存、图片和描述不会因此删除；
- 产品页面会回退到其他匹配布局或主题默认布局。
删除前仍建议确认布局名称，避免误删正在使用的其他分类模板。
修改产品布局前为什么建议备份？
布局通常可以删除或重新编辑，但正式网站的页面结构一旦发生变化，可能直接影响所有商品和客户购买体验。
修改前可以通过SHOPAGG主机管理面板创建一次备份，并截图保留当前商品页面效果。这样如果调整后出现严重错位，可以快速恢复或按照截图重新设置。
重要提醒：不要在订单高峰或广告大量投放期间直接修改全站产品布局。先使用少量商品测试电脑端和手机端效果，确认购买流程正常后再正式使用。
产品详情页应该包含哪些核心内容？
无论采用哪套布局，电商产品详情页至少应该让客户快速找到以下信息：
- 产品名称；
- 主图与相册；
- 价格或询价方式；
- 规格与可选项；
- 库存或交付状态；
- 核心卖点；
- 数量与购买按钮；
- 配送、退换或售后信息；
- 详细参数与使用说明；
- 联系或客服入口。
布局的目标不是放入最多区块，而是把客户最关心的信息按照决策顺序展示出来。关键购买信息应靠前，详细介绍可以放在页面下部。
如何设计更适合外贸网站的产品布局？
面向海外客户时，可以优先考虑：
- 首屏直接展示产品名称、主图和核心卖点；
- 价格、起订量或询盘按钮清楚；
- 规格参数使用表格或清晰列表；
- 展示认证、包装、交期和定制能力；
- 图片和视频经过压缩，不拖慢加载速度；
- 移动端购买或询盘按钮容易点击；
- 避免只展示产品而没有公司信任信息。
B2C网站可以突出价格、变体和加入购物车按钮；偏B2B业务的网站则可以在布局中加强起订量、定制说明和询盘入口。
常见问题
1. 产品布局是只修改一个商品吗？
不是。产品布局是一套模板，会应用到全部符合条件的商品。修改单个商品的名称、价格和描述，应进入产品编辑页面。
2. 新发布的布局为什么影响了所有商品？
因为它被作为默认产品布局使用，并且没有限制显示条件。只想应用到部分商品时，应设置产品分类等条件。
3. 为什么布局里的产品标题和价格不能直接修改？
这些是动态产品区块，会自动读取当前商品的数据。需要修改实际内容时，应返回WooCommerce产品管理页面。
4. 可以给不同产品分类使用不同布局吗？
可以。创建多个布局，并在“编辑条件”中指定对应产品分类即可。
5. 删除布局会删除商品吗？
不会。删除自定义布局只会移除页面模板，商品数据仍然保留，产品页面会使用其他匹配布局或主题默认布局。
6. 修改后前台为什么没有变化？
先确认布局已经发布、显示条件与当前商品匹配，再清理缓存或使用无痕窗口访问。也要确认当前启用的是SHOPAGG主题。
7. 可以恢复主题默认产品布局吗？
可以。将不再需要的自定义布局移至回收站，如果没有其他布局匹配，产品页面会恢复为主题默认效果。
8. 创建多少套布局比较合适？
没有固定数量。建议先使用一套全站默认布局，只为确实需要不同展示方式的产品分类增加专属布局，避免后期维护过于复杂。
本节小结
使用SHOPAGG主题设置WooCommerce产品详情页布局，可以按照以下流程操作：
进入布局管理 → 新建布局 → 选择预设模板 → 调整区块和样式 → 发布为默认布局 → 按需设置产品分类条件 → 检查前台。
最重要的是理解：产品数据负责“展示什么”，布局模板负责“怎样展示”。一套合理的全局布局可以让所有商品保持统一，不同分类也可以通过条件设置获得各自的页面结构。
通过SHOPAGG官网可以一键部署WordPress与WooCommerce网站，并使用配套主题完成产品页面、品牌样式和网站结构设置，减少从零开发页面模板的成本。
