WooCommerce HTML Page Learning Kit

从静态 HTML 页面开始，逐步学习 WooCommerce 页面结构、产品卡片、产品列表、分类筛选、产品详情、购物车和结账页面。

学习说明

这版不重点讲 PHP、hooks 和复杂二次开发，而是回到页面本身：先学会如何用 HTML + CSS 做出 WooCommerce 常见页面。

学完后，你会更容易理解 WooCommerce 的产品列表模板、产品详情模板、购物车模板和结账模板。

页面结构产品卡片产品列表分类筛选产品详情购物车结账页

学习建议：先不要急着看 WooCommerce PHP 模板。先把这些静态页面拆开、改样式、改结构。

01 页面结构一步步学习 WooCommerce 前台页面结构。 02 头部导航一步步学习 WooCommerce 前台页面结构。 03 首页 Banner一步步学习 WooCommerce 前台页面结构。 04 产品卡片一步步学习 WooCommerce 前台页面结构。 05 产品列表一步步学习 WooCommerce 前台页面结构。 06 响应式列表一步步学习 WooCommerce 前台页面结构。 07 分类侧栏一步步学习 WooCommerce 前台页面结构。 08 搜索筛选一步步学习 WooCommerce 前台页面结构。 09 卡片细节一步步学习 WooCommerce 前台页面结构。 10 列表视图一步步学习 WooCommerce 前台页面结构。 11 分页一步步学习 WooCommerce 前台页面结构。 12 产品详情一步步学习 WooCommerce 前台页面结构。 13 产品图集一步步学习 WooCommerce 前台页面结构。 14 规格选择一步步学习 WooCommerce 前台页面结构。 15 详情 Tab一步步学习 WooCommerce 前台页面结构。 16 相关产品一步步学习 WooCommerce 前台页面结构。 17 购物车一步步学习 WooCommerce 前台页面结构。 18 结账页一步步学习 WooCommerce 前台页面结构。 19 账户订单一步步学习 WooCommerce 前台页面结构。 20 完整页面一步步学习 WooCommerce 前台页面结构。 21 动态化路线从静态页面到 WooCommerce 动态页面的整体路线。 22 产品卡片动态化把静态产品卡片替换为 WooCommerce product loop。 23 商店列表动态化把产品 Grid 变成 Shop / Category Archive。 24 产品详情动态化把产品详情页接入标题、价格、图集和按钮。 25 变体数据动态化把 data-* 模拟数据替换为 WooCommerce variation data。 26 购物车结账账户先保留默认流程，再做视觉优化。