WPC WooCommerce 产品属性、变体与自定义字段开发指南

面向木塑地板（Composite Decking）、木塑墙板（Wall Cladding）与木塑栅栏（Composite Fencing）的 WooCommerce 产品数据建模与前端开发说明。

本文档的目标不是把 WooCommerce 配置做复杂，而是先把 Category → Product → Attribute → Term → Variation → Custom Field → Frontend 的关系彻底理顺，为后续产品录入、页面开发、筛选、颜色色卡、变体图片和自定义字段扩展建立统一标准。

---

1. 为什么要先建立这套规则

WooCommerce 很灵活，但如果一开始没有统一数据结构，产品数量增加后很容易出现：

• 同一个概念出现多个 Attribute 名称；
• Colour、Color、Post color 等命名不统一；
• 本应作为 Product 的型号被做成 Variation；
• 本应只是技术参数的字段被做成 Variation；
• 每个产品重复创建相同的本地 Attribute；
• 为了前端显示而滥用 ACF / Custom Field；
• 变体组合数量快速膨胀；
• 前端模板、插件和数据结构互相耦合，后期难维护。

因此，本项目优先解决的是 数据模型和开发边界，而不是先增加功能。

---

2. 核心数据关系

整个商城统一按下面的关系理解：

Category
   ↓
Product
   ↓
Global Attribute
   ↓
Term
   ↓
Variation

Custom Field / Meta
可附加在 Product / Term / Variation / Category 上

也可以用一句话概括：

Category 决定“它属于哪一类产品”；Product 决定“它是哪一个型号”；Attribute 描述标准维度；Term 是具体值；Variation 是真正可销售的组合；Custom Field 只是给已有对象补充额外信息。

---

3. 当前 WooCommerce 配置流程截图

下面 6 张截图记录了当前商城已经运行正常的一套完整流程。

3.1 建立全局 Attribute

当前已经存在：

• Style
• Colour
• Length

其中 Colour 为全局 Attribute。

标准路径：

Products
→ Attributes
→ Add new attribute

建议以后可复用的产品属性尽量使用 Global Attribute，避免每个产品重复建立同名的本地属性。

---

3.2 给 Attribute 添加 Terms

例如 Colour 下已有：

Amber Yellow
Ash Wood
Birch
Black
Blue Grey
Bright White
Cedar
Gray
Oak
Teak
Walnut
...

关系为：

Attribute: Colour
    ↓
Terms:
    Black
    Gray
    Oak
    Teak
    Walnut

Term 是 Attribute 的具体标准值。

---

3.3 编辑单个 Term

WooCommerce 原生 Term 已经包含：

Name
Slug
Description

例如：

Name: Black
Slug: black

如果只是普通下拉选择，这些原生字段已经足够，不需要额外增加自定义字段。

---

3.4 产品中引用 Attribute

示例产品中：

Colour
→ Black / Gray / Oak

Post color
→ Black / Gray / Oak

并勾选：

Visible on the product page
Used for variations

这里需要注意：

• Colour 当前是 Global Attribute；
• Post color 当前是 Product Custom Attribute；
• 从长期维护角度，建议将 Post color 也调整为 Global Attribute，并统一命名为 Post Colour。

---

3.5 生成 Variation

当：

Panel Colour = Black / Gray / Oak
Post Colour  = Black / Gray / Oak

就会形成：

3 × 3 = 9 Variations

例如：

Black / Black
Black / Gray
Black / Oak
Gray / Black
Gray / Gray
Gray / Oak
Oak / Black
Oak / Gray
Oak / Oak

每一个 Variation 可以拥有自己的：

• SKU
• Price
• Stock
• Image
• Weight
• Dimensions

如果某个组合实际不存在，应直接删除该 Variation，而不是保留无效组合。

---

3.6 前端调用 Variation

当前前台已经实现：

Colour = Gray
Post Colour = Oak

WooCommerce 根据这两个属性找到对应 Variation，并显示对应产品图片。

这说明当前的核心逻辑已经正确：

用户选择 Attribute
        ↓
WooCommerce 匹配 Variation
        ↓
读取 Variation 数据
        ↓
更新图片 / 价格 / 库存 / SKU

---

4. 三类 WPC 产品的标准数据模型

4.1 木塑地板 Composite Decking

推荐：

Category
Composite Decking

Product
CWD-01

Variation Attributes
Colour
Length（仅在长度确实形成不同 SKU 时）

Specification Attributes
Width
Thickness
Surface Finish
Profile
Structure

建议表：

Attribute	Term 示例	是否参与 Variation
Colour	Teak / Oak / Walnut / Gray / Black	✅
Length	2200 mm / 2900 mm / 3600 mm	视销售方式
Width	140 mm	❌
Thickness	23 mm	❌
Surface Finish	Wood Grain / Brushed / Embossed	通常 ❌
Profile	Hollow / Solid	❌
Structure	Capped / Uncapped	❌

如果 CWD-01 有：

4 Colours
×
2 Lengths

则最多：

8 Variations

这是比较容易长期维护的范围。

---

4.2 木塑墙板 Wall Cladding

推荐：

Category
Wall Cladding

Product
CWC-01

Variation Attributes
Colour
Length（仅在不同长度对应不同 SKU 时）

Specification Attributes
Width
Thickness
Surface Finish
Profile
Installation

建议表：

Attribute	Term 示例	是否参与 Variation
Colour	Teak / Oak / Walnut / Gray / Black	✅
Length	2900 mm / 3600 mm	视销售方式
Width	219 mm	❌
Thickness	26 mm	❌
Surface Finish	Wood Grain / Brushed	通常 ❌
Profile	Flat / Fluted / Slatted	通常 ❌
Installation	Horizontal / Vertical	❌

如果 Flat / Fluted / Slatted 实际已经代表不同模具、截面、结构或型号，建议直接拆为：

CWC-01
CWC-02
CWC-03

而不是把它们塞进一个产品的 Variation。

---

4.3 木塑栅栏 Composite Fencing

栅栏与地板、墙板不同，因为一个成品往往由多个可选部件组成。

推荐：

Category
Composite Fencing

Product
CWF-01

Variation Attributes
Panel Colour
Post Colour

Specification Attributes
Width
Height
Surface Finish
Post Material
Installation

建议表：

Attribute	Term 示例	是否参与 Variation
Panel Colour	Black / Gray / Oak / Teak	✅
Post Colour	Black / Gray / Oak	✅
Width	1800 mm	❌
Height	1800 mm	通常 ❌
Surface Finish	Wood Grain / Brushed	❌
Post Material	WPC / Aluminium	通常 ❌
Installation	In-ground / Base Plate	❌

当前 CWF-01 的：

3 Panel Colours
×
3 Post Colours
=
9 Variations

属于非常合理的使用场景。

---

5. 判断一个数据到底属于哪里

以后录入任何信息，都先按下面的规则判断。

5.1 Category

回答：

它属于哪一类产品？

例如：

Composite Decking
Wall Cladding
Composite Fencing

不要把颜色、尺寸、表面效果做成 Category。

---

5.2 Product

回答：

它是哪一个真正的产品型号？

例如：

CWD-01
CWC-01
CWF-01

当消费者认为“这已经是另一个型号”，通常就应该拆 Product。

---

5.3 Attribute

回答：

这是一个需要跨产品统一描述、筛选或选择的标准维度吗？

例如：

Colour
Length
Width
Thickness
Panel Colour
Post Colour
Surface Finish
Profile

---

5.4 Term

回答：

它是不是某个 Attribute 下的标准值？

例如：

Colour
└── Oak

Length
└── 2900 mm

Surface Finish
└── Wood Grain

---

5.5 Variation

回答：

用户改变这个选项后，是否形成一个真实可销售的 SKU / 价格 / 库存 / 图片组合？

如果是：

Variation

如果只是技术参数：

不要参与 Variation

这是控制 WooCommerce 复杂度最重要的一条规则。

---

6. Attribute 不等于 Variation

这是开发和产品录入时最容易混淆的地方。

例如：

Colour       10
Length        3
Surface       2
Profile       3

如果全部参与 Variation：

10 × 3 × 2 × 3
= 180 Variations

如果再增加 Height、Width，组合会迅速膨胀。

因此建议：

Variation 尽量只保留 1～2 个真正影响购买结果的核心维度。

当前推荐：

Decking
→ Colour + Length

Wall Cladding
→ Colour + Length（长度确实形成 SKU 时）

Fencing
→ Panel Colour + Post Colour

其他属性优先作为普通 Attribute / Specification。

---

7. Global Attribute 与 Product Custom Attribute

推荐

跨多个产品重复出现的 Attribute：

Colour
Panel Colour
Post Colour
Length
Width
Thickness
Height
Surface Finish
Profile
Structure

优先建立为：

Global Attribute

这样可以：

• 全站统一命名；
• 集中维护 Terms；
• 方便筛选；
• 方便批量录入；
• 减少同义重复；
• 后期开发前端组件时数据结构更稳定。

不推荐长期使用

每个产品重复建立：

Post color
Post Colour
Post Color
Fence Post Colour

这些实际上描述的是同一个概念。

---

8. 命名规范

建议统一使用英式拼写：

Colour
Panel Colour
Post Colour

不要混用：

Colour
Color
Post color

推荐 Attribute Slug：

colour
panel-colour
post-colour
length
width
thickness
height
surface-finish
profile
structure

WordPress/WooCommerce 实际 taxonomy 名称通常会表现为：

pa_colour
pa_panel-colour
pa_post-colour

Term 也尽量保持简单：

Attribute: Length

Terms:
2200 mm
2900 mm
3600 mm

不要混成：

Board (2.2m)
Board (2.9m)
Meter (1m)

因为这同时混入了“类型”和“长度”两个概念。

---

9. Custom Field 的正确定位

Custom Field 不是 Attribute 的下一层。

它的作用是：

给 Product / Term / Variation / Category 补充 WooCommerce 原生字段没有的信息。

数据关系：

Product
├── WooCommerce 原生字段
└── Product Custom Fields

Attribute
└── Term
    ├── Name / Slug / Description
    └── Term Custom Fields

Variation
├── SKU / Price / Stock / Image
└── Variation Custom Fields

---

10. 是否需要给每个 Attribute 添加自定义字段？

答案：不需要。

优先原则：

WooCommerce 原生字段够用，就不要增加 Custom Field。

例如：

Length
├── 2200 mm
├── 2900 mm
└── 3600 mm

如果只是显示和选择长度，不需要任何自定义字段。

同理：

Width
Thickness
Height
Structure
Installation

大多数情况下都不需要 Term Meta。

---

11. Term Custom Fields：最适合颜色和视觉信息

最典型的是 Colour。

例如：

Colour
└── Oak

WooCommerce 原生已经有：

Name
Slug
Description

如果前台只是：

[ Oak ▼ ]

则不需要 Custom Field。

如果希望变成：

[Oak 木纹图]
Oak

才需要：

swatch_image

必要时可以增加：

swatch_color

推荐最小方案：

Attribute	Term Custom Field
Colour	swatch_image，可选 swatch_color
Panel Colour	swatch_image，可选 swatch_color
Post Colour	swatch_image，可选 swatch_color
Surface Finish	可选 swatch_image
Profile	可选 profile_image
Length	不需要
Width	不需要
Thickness	不需要
Height	不需要

对于 WPC 产品，真实木纹通常比单纯 HEX 色块更有价值，因此优先考虑图片色卡。

---

12. Product Custom Fields

Product Custom Fields 适合存放产品级补充资料，而不是购买选项。

例如：

Datasheet PDF
Installation Guide
Warranty
Certification
Packaging Information
Coverage

如果站点已经安装 ACF，可以单独建立字段组，例如：

WPC Product Information

可选字段：

datasheet_pdf
installation_guide
warranty
certification
pack_quantity
coverage

但要避免重复 WooCommerce 已有字段。

不要再建立：

acf_sku
acf_price
acf_stock
acf_weight

因为 WooCommerce 已经有原生：

SKU
Price
Stock
Weight
Dimensions

一个数据只保留一个权威来源。

---

13. Variation Custom Fields

WooCommerce Variation 原生已经可以保存：

SKU
Price
Stock
Image
Weight
Dimensions

优先使用原生字段。

只有当某个数据确实随 Variation 变化，而且 WooCommerce 没有对应字段时，再增加 Variation Custom Field。

例如 B2B 场景：

MOQ
Lead Time
Pieces per Carton
Container Quantity

例如：

CWD-01 / Oak / 2900 mm

MOQ: 200 pcs
Lead Time: 15 Days
Pieces per Carton: 8

如果所有 Variation 的 MOQ / Lead Time 都一样，则应放 Product 级，而不是重复保存到每个 Variation。

---

14. 前端是如何读取这些数据的

整个前端调用关系可以理解为：

WooCommerce / WordPress 数据库
        ↓
WC_Product / Taxonomy / Meta API
        ↓
PHP / WooCommerce Hooks
        ↓
HTML
        ↓
CSS / JavaScript
        ↓
产品详情页

---

15. 调用普通 Product Attribute

例如读取 Colour：

$product = wc_get_product( get_the_ID() );

$colour = $product->get_attribute( 'pa_colour' );

echo esc_html( $colour );

适合简单显示：

Colour: Oak, Gray, Black

---

16. 获取具体 Terms

如果需要获得 Term 对象：

$product = wc_get_product( get_the_ID() );

$terms = wc_get_product_terms(
    $product->get_id(),
    'pa_colour',
    array( 'fields' => 'all' )
);

foreach ( $terms as $term ) {
    echo esc_html( $term->name );
}

此时可以继续获得：

term_id
name
slug
description

以及 Term Meta。

---

17. 读取 Term Custom Field

假设 Oak 有：

swatch_image
swatch_color

WordPress 原生方式：

$color = get_term_meta(
    $term->term_id,
    'swatch_color',
    true
);

如果使用 ACF：

$swatch_image = get_field( 'swatch_image', $term );

然后前端可以输出：

<button class="swatch">
    <img src="..." alt="Oak">
    <span>Oak</span>
</button>

这就是以后开发 WPC 木纹色卡的核心位置。

---

18. Variation 前端工作原理

WooCommerce Variable Product 原生流程：

用户选择 Attribute
        ↓
Variation Form JS
        ↓
找到匹配的 Variation
        ↓
读取 Variation Data
        ↓
更新：
Image
Price
Stock
SKU
Availability

当前 CWF-01 已经验证该流程正常。

因此后面开发自定义色卡时，最好不要重新实现一套 Variation 匹配算法。

推荐：

保留 WooCommerce 原生 Variation 数据和匹配机制，只改变前端选择控件的 UI。

例如：

原来：
<select>

改成：
图片色卡按钮

但底层仍然同步 WooCommerce 原生 select。

这样兼容性和维护性最好。

---

19. Variation Custom Field 的前端动态显示

例如每个 Variation 有：

lead_time

用户选择：

Oak + 2900 mm

前端希望自动显示：

Lead Time: 15 Days

推荐的数据流：

Variation Meta
      ↓
woocommerce_available_variation
      ↓
WooCommerce Variation JSON
      ↓
found_variation JS Event
      ↓
更新页面 DOM

开发时重点是：

1. PHP 把自定义字段加入 Variation Data；
2. JavaScript 监听 WooCommerce 的 Variation 事件；
3. 用户切换 Variation 时更新页面；
4. 不重写 WooCommerce 的 Variation 核心逻辑。

---

20. 前端实现的三种常见方式

方案 A：WooCommerce 原生 Dropdown

Colour
[ Gray ▼ ]

Post Colour
[ Oak ▼ ]

优点

• 最稳定；
• WooCommerce 原生；
• 几乎没有维护成本；
• 主题 / WooCommerce 更新风险最低。

缺点

• 视觉表现一般；
• 不直观展示木纹。

当前阶段

完全可以继续使用。

---

方案 B：Variation Swatches 插件

前端：

Panel Colour
[Oak 图] [Gray 图] [Black 图]

优点：开发快。

不足：引入插件依赖，后台数据结构可能由插件控制。

如果只是希望快速获得成熟色卡功能，这是一个可选方案。

---

方案 C：WooCommerce + ACF + 自定义前端

推荐长期结构：

WooCommerce
负责 Product / Attribute / Term / Variation

ACF / Term Meta
负责 swatch_image 等少量扩展数据

PHP Hooks
负责读取和输出

CSS
负责视觉

JavaScript
负责与 WooCommerce Variation 交互

优点：

• 数据结构完全可控；
• 不依赖大型 Swatches 插件；
• 最适合定制 WPC 产品展示；
• 后续可扩展色卡、纹理、产品组合预览。

不足：

• 需要自己维护少量代码；
• 必须理解 WooCommerce Variation JS 的工作机制。

对于本项目，如果后面确实要开发自定义产品选择体验，方案 C 更值得研究。

---

21. 后续开发最值得投入的代码位置

不建议马上重写整个 WooCommerce Product Page。

建议把开发重点集中在以下几个位置。

21.1 第一优先级：Term Swatch 数据

目标：

Colour / Panel Colour / Post Colour

支持：

swatch_image
swatch_color（可选）

主要代码：

Term Meta / ACF
PHP Term Data Retrieval

---

21.2 第二优先级：前端 Swatch UI

把：

<select>

增强为：

[图片] Oak
[图片] Gray
[图片] Black

主要代码：

PHP
CSS
JavaScript

但底层继续使用 WooCommerce 原生 Variation select 和匹配机制。

---

21.3 第三优先级：Variation 图片联动

目前 WooCommerce 原生已经能够完成：

Variation
→ Image

因此这里优先复用，不要重写。

重点只需要测试：

• 色卡点击；
• select 同步；
• Variation 正确匹配；
• 主图正确切换；
• Clear / Reset 正常工作。

---

21.4 第四优先级：Product Technical Information

使用 ACF 或 WooCommerce Hooks 显示：

Datasheet
Installation Guide
Warranty
Certification
Packaging

主要代码：

ACF Field Group
PHP Output
WooCommerce Hooks

---

21.5 第五优先级：Variation Extra Data

只有实际业务需要时才做：

MOQ
Lead Time
Pieces per Carton
Container Qty

主要代码：

Variation Admin Field
Variation Meta Save
woocommerce_available_variation
found_variation JS

这部分不建议提前开发。

---

22. 推荐代码架构

如果以后开始写自定义代码，不建议把大量代码继续堆进主题 functions.php。

更适合长期维护的是做一个轻量的自定义插件，例如：

wpc-product-enhancements/
│
├── wpc-product-enhancements.php
│
├── includes/
│   ├── class-wpc-term-fields.php
│   ├── class-wpc-product-fields.php
│   ├── class-wpc-variation-fields.php
│   └── class-wpc-frontend.php
│
├── assets/
│   ├── css/
│   │   └── swatches.css
│   └── js/
│       └── variations.js
│
└── README.md

模块职责

class-wpc-term-fields.php
→ Colour / Panel Colour / Post Colour 的 Term Meta

class-wpc-product-fields.php
→ Product 级额外数据

class-wpc-variation-fields.php
→ MOQ / Lead Time 等 Variation 扩展

class-wpc-frontend.php
→ WooCommerce Hooks / HTML 输出

swatches.css
→ 色卡样式

variations.js
→ 色卡与 WooCommerce Variation 的同步

这样即使以后切换 Astra、Elementor 或其他主题，核心产品逻辑仍然独立。

---

23. 尽量使用 Hooks，不直接修改 WooCommerce Core

原则：

不要修改：
wp-content/plugins/woocommerce/

否则 WooCommerce 更新后修改会丢失。

优先级建议：

1. WooCommerce Hooks
2. WooCommerce Product API
3. WordPress Term / Meta API
4. ACF
5. 必要时模板 Override

只有 Hook 无法满足时，再考虑：

child-theme/woocommerce/

模板覆盖也要尽可能少。

---

24. WPC 产品数据的建议最终结构

WPC WooCommerce
│
├── Categories
│   ├── Composite Decking
│   ├── Wall Cladding
│   └── Composite Fencing
│
├── Products
│   ├── CWD-01
│   ├── CWC-01
│   └── CWF-01
│
├── Global Attributes
│   │
│   ├── Colour
│   │   └── Terms
│   │       ├── Oak
│   │       │   └── swatch_image [Optional]
│   │       ├── Gray
│   │       └── Black
│   │
│   ├── Panel Colour
│   ├── Post Colour
│   ├── Length
│   ├── Width
│   ├── Thickness
│   ├── Height
│   ├── Surface Finish
│   ├── Profile
│   └── Structure
│
├── Product Custom Fields
│   ├── Datasheet
│   ├── Installation Guide
│   ├── Warranty
│   ├── Certification
│   └── Packaging Information
│
└── Variations
    ├── WooCommerce Native
    │   ├── SKU
    │   ├── Price
    │   ├── Stock
    │   ├── Image
    │   ├── Weight
    │   └── Dimensions
    │
    └── Optional Custom Fields
        ├── MOQ
        ├── Lead Time
        └── Pieces per Carton

---

25. 开发前的判断口诀

以后碰到任何新需求，先问下面 4 个问题。

① 它是客户选择或产品筛选的标准维度吗？

是：

Attribute

② 它是某个 Attribute 的具体值吗？

是：

Term

③ 它改变后会产生不同 SKU / Price / Stock / Image 吗？

是：

Variation

④ 它只是给已有对象增加附加信息吗？

是：

Custom Field / Meta

典型例子：

Oak
→ Term

Oak 木纹小图片
→ Term Custom Field

CWD-01 Datasheet PDF
→ Product Custom Field

Oak + 2900 mm
→ Variation

Oak + 2900 mm 的交期
→ Variation Custom Field

---

26. 推荐开发顺序

不要一次开发全部功能。

Phase 1：数据标准化

先统一：

Category
Product Naming
Global Attribute
Term Naming
Slug
Variation Rules

当前最值得调整：

Colour
→ 保留 / 视业务改名

Post color
→ Post Colour
→ 改为 Global Attribute

Style
→ 明确实际含义
→ Surface Finish / Profile / 其他更具体名称

Length Terms
→ 统一为 2200 mm / 2900 mm / 3600 mm

---

Phase 2：保留 WooCommerce 原生前端

先保证：

Dropdown
Variation
Image
Price
Stock
Add to Cart

全部稳定。

这一阶段不追求复杂视觉。

---

Phase 3：开发 Colour Swatches

只处理：

Colour
Panel Colour
Post Colour

增加：

swatch_image

然后开发：

图片色卡 UI
+
原生 Variation select 同步

这是当前最有实际价值的自定义开发部分。

---

Phase 4：产品技术资料

再增加：

Datasheet
Installation Guide
Warranty
Certification

优先使用 ACF Product Fields。

---

Phase 5：B2B Variation 扩展

只有确认业务需要后再增加：

MOQ
Lead Time
Packaging
Container Qty

不要提前增加大量字段。

---

27. 当前方案中已经正确的部分

当前网站已经验证：

• WooCommerce Variable Product 使用正确；
• Global Colour Attribute 正常；
• Colour Terms 正常；
• Attribute 可以参与 Variation；
• 两个颜色维度可以生成组合；
• 9 个 Variation 工作正常；
• Variation Image 可以正确对应组合；
• 前台选择 Attribute 后图片可以联动；
• Add to Cart 流程正常。

因此后续开发不是“推翻重做”，而是：

先标准化数据，再逐步增强前端体验。

---

28. 当前需要优化的部分

数据结构

Post color

建议：

Post Colour
Global Attribute

---

命名

避免：

Colour
Color
Post color

统一：

Colour
Panel Colour
Post Colour

---

Style

当前：

Style
├── Art style
└── Normal

含义不够明确。

后续需要根据真实业务重新定义为：

Surface Finish
Profile
Structure

中的某一个，或者直接拆成不同 Product 型号。

---

Length

当前类似：

Board (2.2m)
Board (2.9m)
Meter (1m)

建议根据实际销售规则拆清维度，并统一长度格式。

---

29. 不建议做的事情

为了保持长期可维护性，暂时不建议：

• 给每个 Attribute 都增加 ACF 字段；
• 给每个 Term 都增加很多 Meta；
• 所有 Attribute 都勾选 Used for variations；
• 用 Variation 表达完全不同的产品型号；
• 重写 WooCommerce Variation 匹配算法；
• 大量修改 WooCommerce 模板；
• 直接修改 WooCommerce 插件源码；
• 为了视觉效果过早引入复杂 JS；
• 同一数据同时保存到 WooCommerce 和 ACF 两个地方；
• 没有真实业务需求就提前增加 MOQ / Lead Time 等 Variation 字段。

---

30. 最终原则

整套 WPC WooCommerce 架构最终坚持下面几个原则：

1. Product = 型号。
2. Global Attribute = 可复用的标准产品维度。
3. Term = 标准值。
4. Variation = 真正可销售的组合。
5. Custom Field = 补充信息，不重复原生数据。
6. Variation 尽量只使用 1～2 个核心维度。
7. 能用 WooCommerce 原生解决，就不额外造字段。
8. 前端增强优先复用 WooCommerce 原生 Variation 机制。
9. 自定义代码优先使用 Hooks / API，而不是直接修改模板或核心文件。
10. 先稳定数据模型，再开发色卡、动态字段和复杂交互。

---

31. 下一步开发重点

基于当前网站状态，最值得继续研究和开发的是：

① Global Attribute 标准化
        ↓
② Colour / Panel Colour / Post Colour Terms 标准化
        ↓
③ Term 增加 swatch_image
        ↓
④ 开发图片色卡 UI
        ↓
⑤ 色卡与 WooCommerce 原生 Variation 同步
        ↓
⑥ 保留 Variation Image 原生联动
        ↓
⑦ Product Technical Information
        ↓
⑧ 有真实需求时再增加 Variation Custom Fields

其中真正需要重点写代码的是：

Term Meta / ACF
WooCommerce Hooks
Swatch HTML
Swatch CSS
Variation Sync JavaScript
Optional Variation Meta

而不需要重复开发的部分包括：

Product
Attribute
Term
Variation Matching
Variation Image
Price
Stock
SKU
Add to Cart

这些继续交给 WooCommerce 原生系统负责。

---

总结

这套架构的重点不是增加更多功能，而是明确每一层数据的职责：

Category
    ↓
Product
    ↓
Attribute
    ↓
Term
    ↓
Variation

需要额外展示的数据，再分别附加：

Term Meta
Product Meta
Variation Meta

最终形成：

WooCommerce 负责商品核心数据和购买逻辑，ACF / Meta 只负责必要的扩展信息，自定义代码主要负责前端展示和交互。

对于木塑地板、木塑墙板和木塑栅栏这三类产品，这种方式既符合 WooCommerce 的原生设计思路，也最有利于后续扩展、维护和批量录入。