https://github.com/coowinit/wpc-product-pages-preview
WPC产品列表页与产品详情页HTML静态预览模板，包含分类筛选、分页、产品图Hover切换、Swiper详情图库、色卡切换和响应式布局，适用于WooCommerce商城或B2B询盘商城前端效果参考。
https://github.com/coowinit/wpc-product-pages-preview
b2b-website css html javascript product-detail product-list product-page responsive-design swiper woocommerce wordpress wpc
Last synced: 23 days ago
JSON representation
WPC产品列表页与产品详情页HTML静态预览模板，包含分类筛选、分页、产品图Hover切换、Swiper详情图库、色卡切换和响应式布局，适用于WooCommerce商城或B2B询盘商城前端效果参考。
- Host: GitHub
- URL: https://github.com/coowinit/wpc-product-pages-preview
- Owner: coowinit
- Created: 2026-05-22T03:08:46.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-22T03:32:17.000Z (about 1 month ago)
- Last Synced: 2026-05-22T12:27:07.245Z (about 1 month ago)
- Topics: b2b-website, css, html, javascript, product-detail, product-list, product-page, responsive-design, swiper, woocommerce, wordpress, wpc
- Language: JavaScript
- Homepage: https://coowinit.github.io/wpc-product-pages-preview/
- Size: 563 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WPC 产品列表页与产品详情页静态模板
本项目是一套面向 WPC 木塑产品展示的前端静态页面模板，主要包含两个页面：**产品分类列表页** 和 **产品详情页**。
这套页面可以作为后期搭建 WooCommerce 商城、B2B 询盘商城、产品展示型网站、样品订购页面时的前端参考模板。当前版本重点验证页面结构、视觉布局、交互逻辑和响应式效果，后期可以根据真实产品数据、商城系统字段和品牌视觉继续扩展。
---
## 效果截图
请将页面截图放到以下目录：
```text
docs/screenshots/
```
这样 README.md 可以自动显示图片：
```text
docs/screenshots/product-list-page-preview.png
docs/screenshots/product-detail-page-preview.png
```
### 产品分类列表页预览
### 产品详情页预览
---
## 页面结构
```text
wpc-product-pages-github-preview/
├── index.html
├── README.md
├── docs/
│ └── screenshots/
│ ├── .gitkeep
│ ├── product-list-page-preview.png
│ └── product-detail-page-preview.png
├── product-list/
│ ├── index.html
│ ├── README.md
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── assets/
│ └── svg/
└── product-detail/
├── index.html
├── README.md
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
```
---
## 入口页面说明
根目录中的 `index.html` 是一个简单的预览入口页，用于集中展示并跳转到两个核心页面：
- `product-list/index.html`：产品分类列表页
- `product-detail/index.html`：产品详情页
这个入口页的作用是方便后期预览和演示，不参与实际商城系统逻辑。后期接入 WooCommerce 或 B2B 询盘系统时，可以只提取 `product-list/` 和 `product-detail/` 中的页面结构、样式与交互逻辑。
---
## 产品分类列表页
页面路径：
```text
product-list/index.html
```
### 页面定位
产品分类列表页主要用于展示多个产品卡片，适合用于：
- Decking 样品列表
- Wall Cladding 产品列表
- Fencing 产品列表
- Accessories 配件列表
- B2B 产品展示列表
- WooCommerce 产品分类归档页参考
### 核心功能
- 页面最大宽度为 `1200px`
- 桌面端一行三列产品卡片
- 平板端自动变为两列
- 手机端自动变为单列
- 产品分类按钮筛选
- 产品分页功能
- 产品图片 hover 后切换为场景图
- 产品标题最多显示两行，超出自动隐藏
- 支持不同长度标题，保持卡片排版整齐
- 数量选择与加入购物车按钮结构完整
- CSS 与 JS 独立拆分，方便后期维护
### 适合使用的场景
这个页面适合作为产品归档页或分类页的前端原型。对于 WooCommerce 网站，可以将产品卡片结构改造成循环模板；对于普通 B2B 询盘网站，可以将 `Add to Cart` 替换为 `View Details`、`Get Quote` 或 `Send Inquiry`。
---
## 产品详情页
页面路径：
```text
product-detail/index.html
```
### 页面定位
产品详情页主要用于展示单个产品的详细信息，适合用于样品套装、地板产品、墙板产品、围栏产品、配件产品等详情展示。
### 核心功能
- 页面最大宽度为 `1200px`
- 桌面端产品图库与产品信息区域保持接近 `1:1` 的视觉比例
- 左侧为产品缩略图，右侧为主图区域
- 缩略图整体高度与主图外框高度保持一致
- 缩略图超出时隐藏，并通过上下箭头逐个切换
- 点击缩略图时，主图同步切换
- 色卡切换时，对应切换一张产品主图
- 色卡不需要绑定多张场景图，逻辑更简单，适合商城系统落地
- 放大镜按钮绝对定位在主图右下角
- 支持数量加减
- 同时包含 `Add to Cart` 和 `Request Quote` 两种按钮
- 手机端自动改为上下结构，方便浏览
- CSS 与 JS 独立拆分，便于后期集成
### 适合使用的场景
这个页面既可以用于 WooCommerce 这类支付型商城，也可以用于普通 B2B 询盘商城。
在 WooCommerce 场景中，可以保留 `Add to Cart`，并将数量选择器、价格、产品标题、评分、色卡选项接入真实产品数据。
在 B2B 询盘场景中，可以隐藏价格或购物车按钮，只保留 `Request Quote`，并将其绑定到询盘表单、邮件表单、WhatsApp、在线客服或 CRM 线索系统。
---
## 图片与素材说明
当前项目中的图片主要为 SVG 示例图，方便在没有真实产品图片的情况下测试布局和交互效果。
后期替换为真实产品图时，建议按照以下逻辑整理：
### 产品列表页图片
```text
product-list/assets/svg/
```
建议每个产品至少准备两张图：
- 产品主图：默认显示
- 场景图：鼠标 hover 时显示
这样可以形成更接近真实商城的产品卡片交互体验。
### 产品详情页图片
```text
product-detail/images/
```
建议包含以下类型图片：
- 产品主图
- 色卡图
- 产品细节图
- 场景图
- 应用案例图
当前详情页色卡逻辑为：**一个色卡对应一张产品图**。这种方式结构更简单，更适合后期对接 WooCommerce 变体图或普通产品图库。
---
## 后期扩展方向
### 1. 接入真实产品数据
后期可以将静态 HTML 中的产品标题、价格、评分、分类、图片、色卡等内容替换为真实数据。
在 WooCommerce 中，可以对应到：
- 产品标题
- 产品价格
- 产品短描述
- 产品分类
- 产品标签
- 产品特色图
- 产品图库
- 变体属性
- 库存状态
在 B2B 系统中，可以对应到：
- 产品名称
- 产品型号
- 产品颜色
- 产品应用场景
- 产品规格参数
- 下载资料
- 询盘按钮
### 2. 扩展筛选功能
当前产品列表页已经包含基础分类按钮，后期可以继续扩展为更完整的筛选系统，例如：
- 按颜色筛选
- 按系列筛选
- 按应用场景筛选
- 按材质筛选
- 按价格区间筛选
- 按库存状态筛选
- 多选筛选与组合筛选
### 3. 优化分页与加载方式
当前分页为前端静态分页，适合页面原型验证。后期可以根据系统类型扩展为：
- WooCommerce 默认分页
- Ajax 无刷新分页
- Load More 加载更多
- 无限滚动加载
- 分类切换后自动刷新产品列表
### 4. 强化产品详情页图库
当前详情页图库已经包含主图、缩略图、上下箭头和色卡切换。后期可以继续扩展：
- 图片放大预览弹窗
- 图片局部放大镜
- 视频缩略图
- 360° 产品展示
- 场景图分组
- 颜色切换后同步更新标题、价格、SKU 和描述
### 5. 适配 WooCommerce 模板
后期如果接入 WooCommerce，可以将当前结构拆分到主题模板中：
- 产品列表卡片结构：用于产品归档页循环模板
- 产品详情图库：用于单产品页图片区域
- 色卡区域：用于变体属性或自定义字段
- 数量与购物车：对接 WooCommerce 原生表单
- Request Quote：对接询盘插件或自定义表单
### 6. 适配 B2B 询盘商城
如果用于非支付型 B2B 网站，可以弱化购物车逻辑，强化询盘和转化：
- 将 `Add to Cart` 改为 `Add to Inquiry List`
- 将 `Request Quote` 绑定到询盘表单
- 增加产品规格表
- 增加下载资料区域
- 增加应用案例区域
- 增加相关产品推荐
- 增加 WhatsApp、邮箱、电话等快速联系入口
### 7. 增加 SEO 与内容模块
后期可以根据真实商城页面继续增加 SEO 相关内容：
- 分类页顶部介绍文案
- 产品详情页长描述
- FAQ 常见问题
- 应用场景说明
- 材料优势说明
- 安装说明
- 维护保养说明
- 相关博客入口
---
## 当前版本的价值
这个项目的核心价值不是最终商城系统，而是提供一套清晰的页面结构和交互原型。
它可以帮助后期开发时快速确认以下内容：
- 产品列表页应该如何排版
- 产品卡片应该包含哪些信息
- 产品图片 hover 效果是否适合当前品牌
- 产品标题多行时如何保持整齐
- 产品详情页图库如何展示
- 色卡切换逻辑如何简化
- WooCommerce 和 B2B 询盘系统如何共用同一套前端思路
- 桌面端与手机端体验是否统一
后期只需要在这个基础上替换真实图片、真实产品数据，并根据具体系统进行模板化改造，就可以逐步形成完整的商城前端页面。