WoodMart 产品详情页布局优化

一、产品详情页设置入口

WoodMart 的产品详情页（Single Product Page）大部分设置集中在主题选项面板的 Single product 模块中，控制着图片布局、按钮样式、标签页、相关产品等。

🚪 1.1 进入设置

1. 登录 WordPress 后台。
2. 进入 WoodMart → 主题设置 → Single product。
3. 你会看到多个子选项卡，分别控制产品页的不同部分。

📋 1.2 主要设置模块

模块	控制内容
Gallery（图库）	产品图库排列方式、缩略图、图片缩放等
Add to cart（加购）	加购按钮行为，如 AJAX 加购、数量选择器
Buy now（立即购买）	立即购买按钮及点击后的跳转目标
Elements（元素显隐）	产品页各信息元素的显示与隐藏
Reviews（评价）	评价区相关设置
Tabs（标签页）	描述、附加信息、评价等标签页
Related & Upsells（相关与向上销售）	相关产品和向上销售区块
Visitor counter / Sold counter	实时访客计数、已售数量显示

---

二、产品图片库设置

🖼️ 2.1 图库排列方式

1. 进入 Single product → Gallery。

2. 选择图库的排列方式，官方提供的方案包括：
– 标准缩略图：主图在上方，缩略图排列在下方
– 垂直缩略图：缩略图竖排在主图一侧
– 网格：多张图片以网格形式平铺展示
– 轮播：图片以轮播方式逐张切换

1. 同一个设置区域还有 Product page design（产品页设计）选项，控制整个产品页的布局风格：
2. Default：标准布局
3. Centered：信息居中排列
4. Sticky product：滚动时产品信息区固定跟随

💡 大多数电商站点用标准缩略图或轮播。如果你的产品图片较多（5 张以上），轮播更节省空间；想让加购按钮始终可见，可以试试 Sticky product 设计。

📐 2.2 图片区占比

主图区域占产品页的宽度比例，不是通过填写数值控制的，而是由 Product page layout（产品页布局）决定。官方提供三种布局：

• Large image：图片区占比较大，视觉重心在产品图上
• Compact：图片区收窄，右侧信息区更宽
• Gallery-focused：以图库为绝对主角，适合图片驱动的产品

💡 如果产品图片是竖图（如服装），Compact 能让信息区更宽，价格和加购按钮更从容；如果是家居、数码这类靠大图打动人的产品，选 Large image 或 Gallery-focused 更合适。布局的整体风格还会和 2.1 提到的 Product page design 联动，改完后记得整页预览效果。

🔲 2.3 缩略图设置

在 Gallery 区域还有几个缩略图相关的选项：

• Thumbnails per slide on desktop：桌面端每屏显示几张缩略图
• Gallery gap：缩略图之间的间隙
• Thumbnails position bottom on mobile devices：开启后移动端缩略图强制排在主图下方（即使桌面端用了垂直缩略图）

🖱️ 2.4 图片缩放

WoodMart 单产品页图库支持图片缩放（zoom）功能：鼠标悬停或点击主图时局部放大，方便用户查看材质、做工等细节。

1. 在 Gallery 设置区域找到 Main image click action（主图点击动作）。
2. 三个选项按需选择：
3. Zoom：启用图片缩放，并可勾选 Show “Click to enlarge” icon 显示放大镜提示图标
4. Photoswipe popup：点击打开灯箱大图浏览
5. 禁用：点击主图无任何动作

📌 注意区分：「悬停切换到下一张图片」是产品列表页卡片的悬停特性（归档页设置），不属于单产品页图库的配置项。

---

三、产品变体与色板设置

🧩 3.1 创建可变产品

可变产品（Variable Product）允许用户在同一产品页选择不同颜色、尺寸等变体。创建方法属于 WooCommerce 基础操作，这里主要讲 WoodMart 的展示优化。

🎨 3.2 变体色板（Swatches）

WoodMart 支持将变体的下拉选择框转换为更直观的色板：

1. 进入 主题设置 → Shop → Variable products。

2. 开启变体色板相关选项。
3. 色板支持三种类型：
– Color（颜色）：显示为彩色圆点，适用于颜色属性
– Image（图片）：显示为小图片，适用于材质、图案等属性
– Text（文本）：显示为文字标签，适用于尺寸（S/M/L/XL）等属性

⚙️ 3.3 配置色板值

1. 进入 产品 → 属性，编辑对应属性的属性值。
2. 在属性值编辑页面会出现色板配置区域：
3. 颜色类型：选择或输入色值
4. 图片类型：上传对应图片
5. 文本类型：直接显示属性值名称
6. 保存属性。

⚠️ 色板功能仅适用于全局属性，且需要产品已勾选「用于变体（Used for variations）」并创建了变体。色板的完整配置流程在第 11 篇有详细说明。

---

四、加购按钮与数量选择

🛒 4.1 加购按钮样式与行为

加购相关的设置分两处：

• 行为设置：进入 Single product → Add to cart，可配置 AJAX 加购（点击加购不刷新页面）等行为类选项。
• 样式设置：按钮的颜色、圆角等样式在 主题设置 → Styles and colors → Buttons 中配置——通过 Advanced button styles 选择单产品页加购按钮对应的元素，单独设置颜色。

💡 想让加购按钮更醒目，优先改按钮颜色，让它与整站主色形成对比；不要同时改太多属性，保持按钮风格与全站一致更重要。

🔢 4.2 数量选择器

WoodMart 默认在加购按钮旁显示数量选择器（带加减按钮）。可在主题设置中控制其样式和是否显示：

1. 进入 Single product → Add to cart。
2. 找到数量选择器相关选项，按需调整。

💡 对于单价较高的产品，建议保留数量选择器。对于单价低、批量购买的产品，数量选择器更重要。

---

五、产品标签页（Tabs）

📑 5.1 默认标签页

WooCommerce 默认提供三个标签页：

标签页	内容
Description（描述）	产品长描述
Additional information（附加信息）	产品属性数据
Reviews（评价）	用户评价和评分

⚙️ 5.2 标签页设置

1. 进入 Single product → Tabs。

2. 可配置选项：
– Tabs location（标签页位置）：在产品信息区下方或在产品描述区
– Hide tabs（隐藏标签页）：可选择隐藏特定标签页
– Tabs order（标签页排序）：拖拽调整标签页顺序

📌 5.3 自定义标签页（Custom Tabs）

WoodMart 支持为产品添加自定义标签页：

1. 编辑产品。
2. 在产品编辑页面的 Product Settings 区域找到自定义标签页设置。
3. 添加新标签页：输入标签标题和内容。
4. 内容支持 HTML 和 HTML Block，可以放图文说明、规格表等。

💡 自定义标签页适合放：尺码指南、使用说明、常见问题、物流信息等。

---

六、相关产品与向上销售

🔁 6.1 相关产品（Related Products）

相关产品显示在产品页底部，基于产品分类和标签自动匹配。

1. 进入 Single product → Related & Upsells。

2. 可配置选项：
– Show related products：开启或关闭
– Number of related products：显示数量（建议 4-8 个）
– Columns：列数（建议 4 列）

📈 6.2 向上销售（Upsells）

向上销售是 WooCommerce 原生功能，用于推荐更高级版本或更贵的产品：

1. 编辑产品。
2. 在产品数据面板中找到 Linked Products（关联产品） 标签页。
3. 在 Upsells 字段中搜索并添加推荐产品。

🛍️ 6.3 交叉销售（Cross-sells）

交叉销售显示在购物车页面，用于推荐互补产品：

1. 编辑产品。
2. 在 Linked Products 标签页中。
3. 在 Cross-sells 字段中搜索并添加互补产品。

💡 Upsells 和 Cross-sells 的区别：Upsells 在产品页推荐更贵的替代品；Cross-sells 在购物车页推荐搭配购买的产品。

---

七、使用 Single Product Page Builder 自定义布局

🏗️ 7.1 什么时候用 Page Builder

如果你需要完全自定义产品详情页的布局（比如把评价移到图片旁边、添加自定义区块、改变信息排列顺序），可以使用 WoodMart 的 Single Product Page Builder。

🛠️ 7.2 创建自定义产品布局

1. 进入 WoodMart → Layouts。
2. 点击 Add New，选择 Single Product 类型。

3. 用 Elementor 或 WPBakery 编辑布局，添加 WoodMart 产品元素（图片库、标题、价格、加购按钮、标签页、评价等）。
4. 保存后，该布局会应用到符合条件的产品详情页。

⚠️ 使用自定义布局后，主题设置中 Single product 的部分选项可能不再生效（因为布局由 Page Builder 控制）。建议先在测试站调整好再应用到正式站。