先把品牌风格、产品卡片、产品列表、详情页、筛选栏和按钮样式都做出来。
21 动态化路线：静态 HTML 到 WooCommerce 页面
修复布局错位，并用更清晰的路线图讲解静态页面如何逐步接入 WooCommerce 动态数据。
本页学习重点
核心思路：先保留结构，再替换数据
把页面拆成 Header、产品卡片、产品列表、产品图集、规格选项等可复用模块。
用产品循环、产品对象、变体数据、购物车和账户数据替换静态内容。
推荐动态化顺序
第一阶段
只动态化产品卡片先把产品图片、标题、价格、链接替换成 WooCommerce 数据。这个阶段最容易看到成果，也最容易排查。
第二阶段
动态化商店页和分类页把产品 Grid 接到 WooCommerce Product Loop，再处理排序、分页、分类标题和面包屑。
第三阶段
动态化产品详情页接入产品标题、主图、图集、价格、短描述、SKU、Add to Cart，再处理相关产品和详情 Tab。
第四阶段
处理可变产品和变体数据把静态 data-image、data-price、data-sku 替换为 WooCommerce variation data。
第五阶段
购物车、结账、账户页做样式优化这些页面涉及订单流程，先保留 WooCommerce 默认逻辑，再逐步优化外观和局部模板。
静态页面和 WooCommerce 动态页面的对应关系
| 静态页面模块 | 动态化方向 | 常见文件 / 位置 | 学习优先级 |
|---|---|---|---|
| 产品卡片 | 循环输出图片、标题、价格和按钮 | content-product.php | 最高 |
| 产品列表 | Shop / Category Archive 产品循环 | archive-product.php | 最高 |
| 产品详情 | 单产品模板和产品对象 | single-product.php | 高 |
| 产品图集 | 主图 + gallery images | product-image.php | 中 |
| 规格选项 | 可变产品属性和 variation data | variable.php | 中高 |
| 购物车 / 结账 / 账户 | 先用默认流程，再改样式 | Cart / Checkout / My Account | 后期 |
本页总结
动态化的关键不是一次性重写所有页面，而是先保留现有 HTML 结构，再按产品卡片、产品列表、产品详情、变体、购物车结账的顺序逐步替换数据。