对于使用 WooCommerce 的站长来说，默认的产品详情页往往无法满足个性化的展示需求。Avada 主题自带的 Layouts（布局） 功能，可以让我们像搭积木一样，自由定制产品页的每一个版块。本文将详细介绍如何通过 Avada 搭建专属的产品详情页，并正确应用给全站或指定分类。

第一步：创建产品内容区块 Layout Section

我们需要先设计出产品页的主体内容，这是实现自由定制的核心。

  1. 进入 WordPress 后台，在左侧菜单找到 Avada > Layouts。
  2. 点击顶部的 Layout Section Builder 选项卡。
  3. 点击 Create New Layout Section（创建新区块）。
  4. 命名建议：建议采用“分类名 + Section”的格式，例如 Ice Machines - Serial Section。如果你打算全站通用，可以命名为 Global Product Content。清晰的命名方便以后复用和修改。
  5. 创建后，点击页面左上角的 Back-end Builder 进入 Avada 可视化编辑器。

设置动态预览与搭建页面

  1. 在编辑器左下角的 Layout Section Options 中，找到 View Dynamic Data As，将其设置为 Product，并选择一个现有产品，以便在编辑时实时看到真实的图片和价格数据。
  2. 点击中间的 + Container 按钮。你可以选择自己拖拽排版（例如左侧放 Woo Product Images，右侧放标题、价格和 Woo Add To Cart），或者直接点击绿色的 Avada Studio 按钮，在模板库中导入现成的设计。
  3. 设计完成后，点击右上角的 Save 保存。

第二步：创建外层布局 Layout 并绑定条件

内容设计好后，需要一个“容器”来承载它，并告诉系统将它应用到哪些页面。

  1. 回到 Avada > Layouts 页面，点击 Layout Builder 选项卡。
  2. 在输入框输入名称（建议命名为 Global Product Template），点击 Create New Layout。
  3. 在生成的布局卡片中，找到 Content 区域，点击 + 号，选中你在第一步创建的 Section（如 Ice Machines - Serial Section）。
  4. 卡片下方的 Header、Page Title Bar 和 Footer 可以留空，系统会自动调用全局默认设置。

设置生效条件

这是最关键的一步，只有正确设置条件，前台才会真正变化。

  1. 点击布局卡片底部的 No condition selected（未选择条件）。
  2. 在左侧选择 Products 选项卡。
  3. 如果你想先局部测试，点击展开 Products with Specific Product categories，勾选对应的产品分类；如果你想全站应用，直接勾选最上方的 All Products。
  4. 务必注意：勾选后，右侧面板会显示你的选择。只有看到绿色的 ✅ 勾选号，才代表条件已被系统识别。之后关闭弹窗，点击 Save Layout Order 保存布局顺序。

排错提示：如果你在设置 All Products 时看到提示说该条件已分配给另一个布局，说明你的站点里已经有其他模板正在接管全站产品页。此时你可以点击 Assign Here 强制覆盖，或者取消勾选，改为只针对特定分类生效，以免产生冲突。

第三步：排查模板是否生效及清理缓存

设置完成后，打开前台的产品详情页，如果发现页面并没有变成你设计的样子，请按以下顺序排查：

1. 检查是否被其他模板覆盖

回到 /wp-admin/admin.php?page=avada-layouts 页面，查看列表中各个布局卡片底部的状态。如果存在多个针对全站或该分类的布局，Avada 的规则是“越具体的优先，列表中越靠下的优先”。请确保你的新模板没有被其他高优先级模板覆盖。

2. 清理 Avada 性能缓存

如果条件确认无误，那大概率是缓存导致的。进入 /wp-admin/themes.php?page=avada_options，在顶部选项卡中找到 Performance（性能） 标签，滚动到页面最底部，找到并清除 Avada Caches 和 CSS/JS 缓存。如果使用了其他缓存插件，也请一并清理。

3. 使用无痕模式测试

清理缓存后，建议使用浏览器的无痕模式重新打开前台产品页。这可以排除浏览器本地缓存的干扰。只要你的 Layout Section 里确实拖入了相关的 Woo 元素并保存，且条件匹配正确，前台就一定会呈现出你定制的页面效果。