WoodMart商品详情页自定义教程：布局与模板全解析

WoodMart 是一个强大又美观的 WooCommerce 主题，很多人选择它来做电商网站，不只是因为设计好看，更因为它的灵活性。其中最能体现差异化的地方，就是商品详情页。这篇文章就教你，怎么用 WoodMart 的工具，把商品详情页改成自己想要的样子，不用动代码，也不怕出错。

一、商品详情页支持的布局方式有哪些？

WoodMart 默认就提供了多种布局可选，比如：

• 图片在左，内容在右（经典结构）
• 图片横排展示在上，内容在下（简洁风）
• 全宽布局，适合大图商品
• 内容模块分块展示，适合细节多的产品页

你可以在后台自由切换这些布局，适配不同类型的商品，比如服饰类适合多图风格，电子产品适合模块化展示。

二、在后台切换默认布局

路径如下：

1. 进入后台
2. 点击左侧菜单 WoodMart → Theme Settings
3. 找到 Product Page 设置项
4. 选择你想使用的布局样式（单列、两列、带侧边栏等）
5. 保存设置，刷新前台页面查看效果

如果你希望不同分类使用不同布局，还可以到分类页设置中独立设置。

三、用“页面构建器”来自定义详情内容（高级玩法）

WoodMart 完美兼容 Elementor 和 WPBakery，这就意味着你可以自己用拖拉拽的方式设计详情页。

步骤如下：

• 开启自定义模板功能
  • 后台进入 WoodMart → Theme Settings → Product Page
  • 找到并启用 “Builder for product page” 或类似选项

• 创建一个新的模板
  • 在左侧点击 Templates → Saved Templates（Elementor）或 Layouts（WPBakery）
  • 添加一个新模板，选择类型为 “单个产品”

• 拖拽组件构建你想要的结构
  • 比如：产品名称、价格、评分、变体按钮、购买按钮、分享图标、标签等
  • WoodMart 自带许多专用的产品小工具，比如 Single Product Gallery、Add to Cart、Product Meta
• 保存即自动更新

四、单个商品使用独立详情页模板

设计好后，点击 Publish（发布）

弹出 Display Conditions 设置：

• 选择适用条件（如：应用到所有产品 / 仅应用到特定产品 / 某个分类）
• 保存后 Elementor 会根据这些条件自动切换详情页模板

五、其它可优化细节模块

• 添加信任图标（如：正品保障、7天退换、包邮）
• 展示变体图像切换（颜色/规格按钮图像化）
• 添加产品视频介绍或使用演示
• 启用粘性“购买”按钮（用户滑动时依然能看到购买入口）
• 在商品描述区域插入FAQ、评价图文、表格等组件

这些功能在 WoodMart 中都可以设置，或用 Elementor/WPBakery 组件实现。

总结

自定义商品详情页看起来很复杂，其实在 WoodMart 主题里，整个过程都是可视化操作。你可以从简单的后台布局设置入手，逐步深入到页面构建器和模板细化，提升展示效果，增强专业感与品牌统一性。

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