14 规格选择：品牌产品详情页打磨版
把规格选项页面重点优化成更干净、更高级、更适合后期动态化的品牌官网产品详情界面。
本页学习重点
这次重点优化了什么
- 整体改成更干净的品牌产品详情页布局，减少厚重紫色块的压迫感
- 左侧产品图区域增加浮动标签、缩略图、当前变体和价格展示
- 右侧信息区重新梳理层级：面包屑、标题、评分、价格、卖点、颜色、长度、数量、按钮
- 变体切换时，主图、标题、当前颜色、价格、SKU、描述全部同步变化
- 结构保留 data-*，后期更容易替换为 WooCommerce variation data
品牌风格产品详情界面
Best Seller
Color preview
Teak Decking
Teak Decking
Selected variation image
$39.00
Teak Decking
Premium WPC decking board for outdoor residential and commercial projects.
24 reviews
SKU: DECK-TEAK-220
$59.00
$39.00
Warm natural wood tone for residential decking, poolside areas, and relaxed outdoor living spaces.
Low maintenance
No painting or staining required
Weather resistant
Designed for outdoor use
Sample available
Good for color checking
Choose color
Selected: Teak Decking
Choose length
Standard stock lengths
This layout is ready to be connected with WooCommerce variation data later.
<button
data-variation-option
data-image="assets/product-02.svg"
data-name="Walnut Decking"
data-price="$42.00"
data-sku="DECK-WALNUT-220"
data-description="Darker premium tone...">
Walnut
</button>
本页总结
这一版把规格选择页从练习页面提升为更接近品牌商城详情页的静态原型。后期可以把 data-* 替换为 WooCommerce variation data，逐步接入真实产品数据。