WooCommerce Frontend Page Learning Kit v1.3

这是 WooCommerce Frontend Page Learning Kit 的 v1.3.1 版本，本版本重点修复动态化路线页面的布局问题，并扩展静态页面过渡到 WooCommerce 动态模板的学习内容。

本项目从静态 HTML 页面开始，逐步整理 WooCommerce 前台商城页面常见结构，包括产品卡片、产品列表、分类筛选、产品详情页、产品图集、规格变体、购物车、结账页和账户订单页，并进一步补充如何将这些静态页面逐步接入 WooCommerce 动态数据和模板。

本次更新内容包括：

• 修复 21-dynamic-roadmap.html 页面中的布局错位问题
• 将 21 页面改为更稳定的路线图卡片和时间线布局
• 优化动态化章节在桌面端和移动端的显示效果
• 扩展 22-product-card-loop.html 页面内容
• 补充产品图片、标题、价格、按钮、促销标记的动态替换思路
• 扩展 23-shop-archive-template.html 页面内容
• 补充 shop archive、产品分类页、排序、分页、筛选侧栏和模板文件关系
• 扩展 24-single-product-template.html 页面内容
• 补充产品详情页动态化顺序，包括标题、价格、SKU、短描述、产品主图、产品图集和 Add to Cart
• 扩展 25-variation-data.html 页面内容
• 补充静态 data-image、data-price、data-sku、data-description 与 WooCommerce variation data 的对应关系
• 扩展 26-cart-checkout-account.html 页面内容
• 补充购物车、结账页和我的账户页面的接入建议
• 强调购物车、结账和账户页应优先保留 WooCommerce 默认流程，再逐步做样式和局部模板优化
• 更新 css/common.css
• 更新 README.md

本版本适合作为从 WooCommerce 静态前台页面设计，过渡到真实 WooCommerce 动态模板开发的学习参考。

WooCommerce HTML Page Learning Kit v1.2.0

这是 WooCommerce HTML Page Learning Kit 的 v1.2.0 版本，本次重点优化了规格选项页面，将其打磨成更接近品牌官网产品详情页的静态原型。

本版本继续以 HTML + CSS + JavaScript 为核心，不涉及复杂 PHP、hooks 或 WooCommerce 后端逻辑，重点帮助学习 WooCommerce 前台页面结构、产品详情页布局、规格选项交互和后续动态化思路。

主要更新内容包括：

• 重点优化 14-variation-selector.html 页面
• 将规格选择页面升级为品牌风格产品详情页
• 优化左侧产品图片区布局
• 增加产品图浮动标签和当前变体提示
• 优化缩略图展示和选中状态
• 重新整理右侧产品信息层级
• 增加面包屑、产品标题、评分、SKU、价格、描述和卖点卡片
• 优化颜色规格选项样式
• 为颜色选项增加色块、名称、说明和库存状态
• 点击颜色选项时同步更新产品主图、标题、价格、SKU 和描述
• 点击左侧缩略图时也可以同步切换对应变体
• 修复多个 data-variation-name 只更新一个的问题
• 增加 Request Sample 和 Download Specs 辅助按钮
• 增加更适合后期 WooCommerce 动态化的数据结构说明
• 优化手机端显示效果
• 更新 css/common.css、js/main.js 和 README.md

本版本适合作为后续真正制作 WooCommerce 可变产品详情页的静态页面参考。后期可以将页面中的 data-image、data-name、data-price、data-sku、data-description 等静态数据替换为 WooCommerce variation data，从而逐步接入真实产品数据。

WooCommerce HTML Page Learning Kit v1.1

这是 WooCommerce HTML Page Learning Kit 的第二个版本，适合想先从页面结构开始学习 WooCommerce 前台布局的人。

本版本不重点讲复杂 PHP、hooks、HPOS、REST API 或支付网关，而是从静态 HTML 页面开始，逐步整理 WooCommerce 常见前台页面结构，包括 Header、Hero、产品卡片、产品列表、响应式网格、分类侧栏、搜索筛选栏、产品详情页、产品图集、规格选择、详情 Tab、相关产品、购物车页面、结账页面、我的账户订单页和完整商店页。

项目使用纯 HTML + CSS + 少量 JavaScript 编写，不依赖 WordPress 或 WooCommerce 环境，下载后直接打开 index.html 即可学习。

WooCommerce Learning Kit Code Study Edition v1.0

这是 WooCommerce Learning Kit 的 Code Study Edition 版本，重点偏向 WooCommerce 功能开发和代码研究。

本版本包含 20 个代码主题页面和 120+ 个常用 WooCommerce 代码场景，覆盖扩展插件基础、WooCommerce hooks、产品 CRUD、可变产品、产品字段、价格折扣、购物车 Session、结账字段、订单 CRUD、HPOS 兼容、订单商品、退款、邮件通知、配送方式、支付网关、优惠券、客户账户、库存 SKU、REST API、Webhooks、Blocks、后台订单增强、性能、安全、迁移和调试维护。

同时新增 snippets/ 文件夹，把每个页面中的代码整理成独立 Markdown 文件，并提供 all-snippets.md 汇总文件，方便用 VS Code 打开研究和后续整理成自己的 WooCommerce 代码片段库。

项目使用纯 HTML + CSS 编写，不依赖 WordPress 或 WooCommerce 环境，下载后直接打开 index.html 即可阅读。