{"id":50709229,"url":"https://github.com/coowinit/woocommerce-learning-kit","last_synced_at":"2026-06-09T14:01:46.414Z","repository":{"id":357288145,"uuid":"1236183402","full_name":"coowinit/woocommerce-learning-kit","owner":"coowinit","description":"一个从静态 HTML 页面开始，逐步学习 WooCommerce 前台商城页面结构、产品列表、产品详情、变体交互，并过渡到动态模板接入的学习包。","archived":false,"fork":false,"pushed_at":"2026-05-12T05:19:47.000Z","size":158,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-12T07:19:20.046Z","etag":null,"topics":["css","ecommerce","html","php","woocommerce","woocommerce-api","woocommerce-cart","woocommerce-development","woocommerce-hooks","woocommerce-rest-api","wordpress"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/woocommerce-learning-kit/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-12T02:50:07.000Z","updated_at":"2026-05-12T05:19:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/woocommerce-learning-kit","commit_stats":null,"previous_names":["coowinit/woocommerce-learning-kit"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/woocommerce-learning-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwoocommerce-learning-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwoocommerce-learning-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwoocommerce-learning-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwoocommerce-learning-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/woocommerce-learning-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwoocommerce-learning-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","ecommerce","html","php","woocommerce","woocommerce-api","woocommerce-cart","woocommerce-development","woocommerce-hooks","woocommerce-rest-api","wordpress"],"created_at":"2026-06-09T14:01:45.561Z","updated_at":"2026-06-09T14:01:46.395Z","avatar_url":"https://github.com/coowinit.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WooCommerce Frontend Page Learning Kit\n\n一个从 **静态 HTML 页面设计** 开始，逐步学习 **WooCommerce 前台商城页面结构**，并进一步过渡到 **WooCommerce 动态模板接入** 的学习包。\n\n本项目适合已经了解 WooCommerce 后台基础操作，但希望继续深入学习前台页面结构、产品列表、产品详情页、产品变体交互、购物车、结账页、账户页，以及后续如何接入 WooCommerce 动态数据的人。\n\n---\n\n## 项目简介\n\n很多 WooCommerce 学习资料一开始就进入 PHP、hooks、模板覆盖、支付、订单和复杂二次开发，这对于前台页面学习来说容易过早进入复杂阶段。\n\n这个项目采用更适合循序渐进学习的方式：\n\n```text\n静态 HTML 页面\n↓\n产品卡片和产品列表\n↓\n品牌风格产品详情页\n↓\n规格选项和变体图片联动\n↓\n购物车、结账、账户页静态结构\n↓\n静态页面到 WooCommerce 动态模板的接入思路\n```\n\n你可以先不依赖 WordPress 或 WooCommerce 环境，直接打开 HTML 页面学习页面结构、布局方式、交互逻辑和响应式设计。等页面结构理解清楚后，再逐步学习如何把这些静态模块替换为 WooCommerce 的真实产品数据和模板输出。\n\n---\n\n## 项目特点\n\n- 使用纯 HTML + CSS + JavaScript 编写\n- 不依赖 WordPress 或 WooCommerce 环境\n- 下载后可直接打开 `index.html` 学习\n- 适合作为 WooCommerce 前台页面练习项目\n- 覆盖产品卡片、产品列表、产品详情页、变体选项、购物车、结账和账户页\n- 包含静态页面如何接入 WooCommerce 动态模板的学习章节\n- 重点强调“先保留结构，再替换数据”的动态化思路\n- 适合后期继续改造成 WooCommerce 主题模板参考\n\n---\n\n## 适合人群\n\n本项目适合：\n\n- 想学习 WooCommerce 前台页面结构的人\n- 已经会一些 HTML / CSS，希望练习电商页面的人\n- 觉得 WooCommerce PHP / hooks 暂时有难度的人\n- 想先从产品卡片、产品列表、产品详情页开始学习的人\n- 想把静态 HTML 页面逐步改造成 WooCommerce 动态模板的人\n- 想为后期制作 WooCommerce 主题或子主题打基础的人\n\n不适合：\n\n- 想直接得到完整 WooCommerce 主题的人\n- 想直接得到支付、订单、库存、物流完整开发方案的人\n- 想一开始就深入 WooCommerce hooks、REST API、HPOS 的人\n\n---\n\n## 当前版本\n\n```text\nv1.3.1\n```\n\n当前版本重点：\n\n- 修复动态化路线页面布局错位问题\n- 扩展静态页面到 WooCommerce 动态模板的学习章节\n- 增加 21-26 页面，讲解静态 HTML 如何过渡到真正的 WooCommerce 动态页面\n- 进一步完善产品卡片、产品列表、产品详情、变体数据、购物车、结账和账户页的接入思路\n\n---\n\n## 页面目录\n\n本项目当前包含 26 个学习页面。\n\n### 第一部分：WooCommerce 前台静态页面基础\n\n| 页面 | 主题 | 学习重点 |\n|---|---|---|\n| `01-page-structure.html` | 页面结构 | Header、Main、Section、Footer |\n| `02-header-navigation.html` | 头部导航 | Logo、菜单、账户、购物车 |\n| `03-hero-banner.html` | 首页 Banner | 标题、卖点、按钮、产品图 |\n| `04-product-card.html` | 产品卡片 | 产品图、标题、价格、按钮 |\n| `05-product-grid.html` | 产品列表 | Grid 三列产品展示 |\n| `06-responsive-grid.html` | 响应式产品列表 | 桌面多列、手机一列 |\n| `07-category-sidebar.html` | 分类侧边栏 | 分类筛选、价格筛选、侧栏布局 |\n| `08-toolbar-filter.html` | 搜索筛选栏 | 搜索、排序、结果数量 |\n| `09-card-details.html` | 产品卡片细节 | 徽章、评分、原价、促销价 |\n| `10-list-view.html` | 列表视图 | 横向产品列表 |\n| `11-pagination.html` | 分页 | 产品列表分页结构 |\n\n### 第二部分：产品详情页和购买流程静态页面\n\n| 页面 | 主题 | 学习重点 |\n|---|---|---|\n| `12-product-detail.html` | 产品详情页 | Swiper 主图轮播、缩略图、购买信息 |\n| `13-product-gallery.html` | 产品图集 | Swiper 主图 + 缩略图联动 |\n| `14-variation-selector.html` | 规格选项 | 品牌风格产品详情页、变体图片联动 |\n| `15-product-tabs.html` | 产品详情 Tab | 描述、规格、安装、评价 |\n| `16-related-products.html` | 相关产品 | 推荐产品、配件、同类产品 |\n| `17-cart-page.html` | 购物车页面 | 商品、数量、小计、订单汇总 |\n| `18-checkout-page.html` | 结账页面 | 账单信息、配送、订单确认 |\n| `19-account-orders.html` | 账户订单页面 | 我的账户、订单列表、状态标签 |\n| `20-complete-store-page.html` | 完整商店页面 | Header、Hero、产品列表、分页整合 |\n\n### 第三部分：静态页面到 WooCommerce 动态页面\n\n| 页面 | 主题 | 学习重点 |\n|---|---|---|\n| `21-dynamic-roadmap.html` | 动态化路线 | 静态 HTML 到 WooCommerce 模板的整体路线 |\n| `22-product-card-loop.html` | 产品卡片动态化 | 从静态卡片到 WooCommerce Product Loop |\n| `23-shop-archive-template.html` | 商店列表动态化 | 从产品 Grid 到 Shop / Category Archive |\n| `24-single-product-template.html` | 产品详情动态化 | 从静态详情页到 Single Product Template |\n| `25-variation-data.html` | 变体数据动态化 | 从 `data-*` 到 WooCommerce Variation Data |\n| `26-cart-checkout-account.html` | 购物车、结账和账户页 | 先保留默认流程，再做样式优化 |\n\n---\n\n## 文件结构\n\n```text\nwoocommerce-frontend-page-learning-kit/\n├── index.html\n├── 01-page-structure.html\n├── 02-header-navigation.html\n├── 03-hero-banner.html\n├── 04-product-card.html\n├── 05-product-grid.html\n├── 06-responsive-grid.html\n├── 07-category-sidebar.html\n├── 08-toolbar-filter.html\n├── 09-card-details.html\n├── 10-list-view.html\n├── 11-pagination.html\n├── 12-product-detail.html\n├── 13-product-gallery.html\n├── 14-variation-selector.html\n├── 15-product-tabs.html\n├── 16-related-products.html\n├── 17-cart-page.html\n├── 18-checkout-page.html\n├── 19-account-orders.html\n├── 20-complete-store-page.html\n├── 21-dynamic-roadmap.html\n├── 22-product-card-loop.html\n├── 23-shop-archive-template.html\n├── 24-single-product-template.html\n├── 25-variation-data.html\n├── 26-cart-checkout-account.html\n├── css/\n│   └── common.css\n├── js/\n│   └── main.js\n├── assets/\n│   └── *.svg\n└── README.md\n```\n\n---\n\n## 如何使用\n\n### 方法一：直接打开学习\n\n1. 下载并解压项目\n2. 双击打开 `index.html`\n3. 按页面编号从 01 学到 26\n4. 在浏览器中查看每个页面的布局和交互\n\n### 方法二：使用 VS Code + Live Server\n\n1. 用 VS Code 打开整个项目文件夹\n2. 安装 Live Server 插件\n3. 右键 `index.html`\n4. 选择 `Open with Live Server`\n5. 修改 HTML、CSS、JS 后实时预览效果\n\n### 方法三：作为 WooCommerce 主题开发前的静态原型\n\n你可以先在这个项目中完成：\n\n- 产品卡片设计\n- 产品列表布局\n- 产品详情页布局\n- 产品图集交互\n- 颜色 / 规格选择交互\n- 购物车、结账、账户页视觉结构\n\n然后再逐步把这些静态结构迁移到 WooCommerce 主题模板中。\n\n---\n\n## 推荐学习路线\n\n### 阶段 1：先理解页面结构\n\n```text\n01 页面结构\n↓\n02 头部导航\n↓\n03 首页 Banner\n```\n\n这一阶段重点理解一个商城页面由哪些大区块组成。\n\n---\n\n### 阶段 2：学习产品卡片和产品列表\n\n```text\n04 产品卡片\n↓\n05 产品列表\n↓\n06 响应式产品列表\n↓\n07 分类侧边栏\n↓\n08 搜索筛选栏\n↓\n09 产品卡片细节\n↓\n10 列表视图\n↓\n11 分页\n```\n\n这一阶段重点理解 WooCommerce 商店页、分类页、搜索结果页的基础结构。\n\n---\n\n### 阶段 3：学习产品详情页\n\n```text\n12 产品详情页\n↓\n13 产品图集\n↓\n14 规格选项\n↓\n15 产品详情 Tab\n↓\n16 相关产品\n```\n\n这一阶段重点理解单产品页的结构，包括产品图、价格、SKU、规格选项、变体图片、详情内容和相关产品。\n\n---\n\n### 阶段 4：学习购买流程页面\n\n```text\n17 购物车页面\n↓\n18 结账页面\n↓\n19 账户订单页面\n↓\n20 完整商店页面\n```\n\n这一阶段重点理解购物流程中的核心页面。\n\n---\n\n### 阶段 5：学习如何动态化\n\n```text\n21 动态化路线\n↓\n22 产品卡片动态化\n↓\n23 商店列表动态化\n↓\n24 产品详情动态化\n↓\n25 变体数据动态化\n↓\n26 购物车、结账和账户页接入建议\n```\n\n这一阶段重点理解如何把静态 HTML 页面逐步变成真正的 WooCommerce 动态页面。\n\n---\n\n## 核心学习思路\n\n本项目的核心学习思路是：\n\n```text\n先做静态页面\n↓\n再拆分成模块\n↓\n然后替换动态数据\n↓\n最后接入 WooCommerce 模板\n```\n\n不要一开始就想着完全重写 WooCommerce 页面。更稳的方式是：\n\n1. 保留你已经写好的 HTML 结构\n2. 保留 CSS class 和页面布局\n3. 先替换产品标题、价格、图片、链接\n4. 再替换产品列表循环\n5. 再处理产品详情页\n6. 最后处理变体、购物车、结账和账户页\n\n---\n\n## 静态页面和 WooCommerce 动态模板的对应关系\n\n| 静态页面模块 | WooCommerce 动态来源 | 常见模板 / 函数 |\n|---|---|---|\n| 产品卡片 | Product Loop | `content-product.php` |\n| 产品列表 | Shop / Category Archive | `archive-product.php` |\n| 产品标题 | 当前产品标题 | `the_title()` |\n| 产品图片 | 产品缩略图 | `woocommerce_template_loop_product_thumbnail()` |\n| 产品价格 | WooCommerce 价格 HTML | `woocommerce_template_loop_price()` / `$product-\u003eget_price_html()` |\n| 产品详情页 | Single Product | `single-product.php` |\n| 产品主图 | Featured Image | `get_the_post_thumbnail()` |\n| 产品图集 | Gallery Images | `$product-\u003eget_gallery_image_ids()` |\n| 加入购物车 | Add to Cart | `woocommerce_template_single_add_to_cart()` |\n| 规格变体 | Variation Data | Variable Product |\n| 购物车页面 | Cart Template / Cart Block | WooCommerce Cart |\n| 结账页面 | Checkout Template / Checkout Block | WooCommerce Checkout |\n| 我的账户 | My Account Endpoints | WooCommerce My Account |\n\n---\n\n## 从静态产品卡片到动态产品卡片\n\n静态产品卡片通常是这样：\n\n```html\n\u003carticle class=\"product-card\"\u003e\n  \u003cimg src=\"assets/product-01.svg\" alt=\"Product 01\"\u003e\n  \u003ch3\u003eProduct 01\u003c/h3\u003e\n  \u003cp class=\"price\"\u003e$39.00\u003c/p\u003e\n  \u003ca class=\"button\" href=\"#\"\u003eView Product\u003c/a\u003e\n\u003c/article\u003e\n```\n\n动态化后，核心思路是把静态内容替换成 WooCommerce 数据：\n\n```php\n\u003carticle \u003c?php wc_product_class( 'product-card', $product ); ?\u003e\u003e\n  \u003ca href=\"\u003c?php the_permalink(); ?\u003e\"\u003e\n    \u003c?php woocommerce_template_loop_product_thumbnail(); ?\u003e\n  \u003c/a\u003e\n\n  \u003ch3\u003e\u003c?php the_title(); ?\u003e\u003c/h3\u003e\n\n  \u003cdiv class=\"price\"\u003e\n    \u003c?php woocommerce_template_loop_price(); ?\u003e\n  \u003c/div\u003e\n\n  \u003c?php woocommerce_template_loop_add_to_cart(); ?\u003e\n\u003c/article\u003e\n```\n\n建议先只动态化：\n\n- 产品图片\n- 产品标题\n- 产品价格\n- 产品链接\n- 按钮\n\n再考虑：\n\n- Sale 标记\n- Featured 标记\n- 评分\n- 分类\n- 产品属性\n\n---\n\n## 从静态产品列表到 WooCommerce Shop 页面\n\n静态产品列表通常是：\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003carticle class=\"product-card\"\u003e...\u003c/article\u003e\n  \u003carticle class=\"product-card\"\u003e...\u003c/article\u003e\n  \u003carticle class=\"product-card\"\u003e...\u003c/article\u003e\n\u003c/div\u003e\n```\n\n动态化后，可以理解为：\n\n```php\n\u003cdiv class=\"grid\"\u003e\n  \u003c?php if ( woocommerce_product_loop() ) : ?\u003e\n\n    \u003c?php while ( have_posts() ) : ?\u003e\n      \u003c?php the_post(); ?\u003e\n      \u003c?php wc_get_template_part( 'content', 'product' ); ?\u003e\n    \u003c?php endwhile; ?\u003e\n\n  \u003c?php endif; ?\u003e\n\u003c/div\u003e\n```\n\n你现在的静态 Grid 布局仍然可以保留，只是里面的产品卡片不再手写，而是由 WooCommerce 产品循环输出。\n\n---\n\n## 从静态产品详情页到 Single Product\n\n静态产品详情页通常包含：\n\n- 产品主图\n- 缩略图\n- 标题\n- 评分\n- 价格\n- SKU\n- 产品描述\n- 规格选项\n- 数量\n- 加入购物车按钮\n- 相关产品\n\n动态化时建议按顺序接入：\n\n```text\n产品标题\n↓\n产品价格\n↓\nSKU\n↓\n短描述\n↓\n产品主图\n↓\n产品图集\n↓\nAdd to Cart\n↓\n产品 Tab\n↓\n相关产品\n↓\n变体数据\n```\n\n不要一开始就同时改图集、变体、按钮和购物车逻辑，否则排查会比较困难。\n\n---\n\n## 规格选项和变体数据\n\n本项目中的 `14-variation-selector.html` 使用 `data-*` 模拟了 WooCommerce 变体数据。\n\n例如：\n\n```html\n\u003cbutton\n  data-variation-option\n  data-image=\"assets/product-02.svg\"\n  data-name=\"Walnut Decking\"\n  data-price=\"$42.00\"\n  data-sku=\"DECK-WALNUT-220\"\n  data-description=\"Darker premium tone...\"\n\u003e\n  Walnut\n\u003c/button\u003e\n```\n\n后期接入 WooCommerce 时，可以这样理解：\n\n| 静态字段 | WooCommerce 变体数据 | 用途 |\n|---|---|---|\n| `data-image` | Variation Image | 切换产品主图 |\n| `data-name` | Variation Attribute / Display Name | 更新当前选项名称 |\n| `data-price` | Variation Price HTML | 更新价格 |\n| `data-sku` | Variation SKU | 更新 SKU |\n| `data-description` | Variation Description | 更新变体说明 |\n| 库存标签 | Variation Availability | 显示库存状态 |\n\n建议先使用 WooCommerce 默认可变产品表单，理解它如何工作，再尝试把默认变体数据映射到你自己的品牌化 UI。\n\n---\n\n## 购物车、结账、账户页建议\n\n购物车、结账和账户页涉及真实订单流程，不建议一开始完全重写。\n\n建议顺序：\n\n```text\n先使用 WooCommerce 默认页面\n↓\n确认购物车、结账、支付、订单邮件正常\n↓\n再用 CSS 优化外观\n↓\n再局部覆盖模板\n↓\n最后才考虑自定义功能\n```\n\n### 购物车页面\n\n优先保留：\n\n- 数量更新\n- 优惠券\n- 小计\n- 运费计算\n- 库存校验\n\n可以先优化：\n\n- 表格样式\n- 按钮样式\n- 空购物车提示\n- 订单汇总卡片\n\n### 结账页面\n\n优先保留：\n\n- 字段验证\n- 地址填写\n- 配送方式\n- 支付方式\n- 订单创建\n\n可以先优化：\n\n- 字段间距\n- 分栏布局\n- 订单摘要样式\n- 按钮样式\n\n### 我的账户页面\n\n优先保留：\n\n- 登录状态\n- 订单列表\n- 地址管理\n- 下载\n- 账户详情\n- Logout\n\n可以先优化：\n\n- 菜单样式\n- 订单表格\n- 状态 badge\n- 账户中心布局\n\n---\n\n## 版本更新记录\n\n### v1.3.1\n\n- 修复 `21-dynamic-roadmap.html` 页面布局错位问题\n- 将动态化路线页面改为更稳定的路线图卡片和时间线布局\n- 扩展 `22-product-card-loop.html`\n- 扩展 `23-shop-archive-template.html`\n- 扩展 `24-single-product-template.html`\n- 扩展 `25-variation-data.html`\n- 扩展 `26-cart-checkout-account.html`\n- 补充产品卡片、产品列表、产品详情页、变体数据、购物车、结账和账户页的接入说明\n- 更新 `css/common.css`\n- 更新 `README.md`\n\n### v1.2.0\n\n- 重点优化 `14-variation-selector.html`\n- 将规格选项页面升级为品牌风格产品详情页\n- 优化变体图片联动\n- 点击颜色或缩略图时同步更新主图、标题、价格、SKU 和描述\n- 增加卖点卡片、Request Sample、Download Specs 等内容\n- 优化手机端显示效果\n\n### v1.1.0\n\n- 优化产品详情页 Swiper 主图轮播\n- 优化产品图集 Swiper 缩略图\n- 优化分类侧边栏布局\n- 优化账户订单页面\n\n### v1.0.0\n\n- 创建基础 WooCommerce HTML 页面学习包\n- 包含 20 个静态 HTML 学习页面\n- 覆盖页面结构、产品卡片、产品列表、产品详情、购物车、结账和账户页面\n\n---\n\n## 后续可继续扩展方向\n\n这个项目后续可以继续扩展：\n\n- WooCommerce 模板覆盖实战\n- `content-product.php` 完整改造示例\n- `archive-product.php` 完整改造示例\n- `single-product.php` 完整改造示例\n- WooCommerce 产品筛选侧栏动态化\n- WooCommerce 可变产品前端 UI 改造\n- WooCommerce 购物车页面样式优化\n- WooCommerce 结账页面样式优化\n- WooCommerce My Account 页面样式优化\n- WooCommerce Block 页面和传统模板的区别\n\n---\n\n## 技术栈\n\n- HTML5\n- CSS3\n- JavaScript\n- Responsive Design\n- Swiper\n- SVG placeholder assets\n- WooCommerce template learning notes\n\n---\n\n## 注意事项\n\n本项目是学习包，不是完整 WooCommerce 主题。\n\n如果要用于真实 WooCommerce 网站，需要进一步处理：\n\n- WordPress 主题结构\n- WooCommerce 模板覆盖\n- PHP 模板文件\n- 产品循环\n- 产品对象\n- 变体数据\n- 购物车和结账流程\n- 支付方式\n- 订单邮件\n- 安全和兼容性测试\n\n请不要直接把静态 HTML 当作完整 WooCommerce 主题使用。\n\n---\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwoocommerce-learning-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fwoocommerce-learning-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwoocommerce-learning-kit/lists"}