WooCommerce Single Product HTML Prototype

A premium, brand-oriented static HTML prototype for a WooCommerce / WordPress single product page.

This repository includes:

• A product archive page demo (index.html)
• A single product page demo (single-product.html)
• Localized front-end assets for Bootstrap v5, Swiper, fancyBox v3.2.10, jQuery, and Roboto
• A gallery data structure that is already moving toward WordPress / WooCommerce template mapping

The visual direction is clean, restrained, and brand-led rather than sales-heavy.

Preview

Open these files locally in a browser:

• index.html
• single-product.html

Tech Stack

• HTML5
• CSS3
• Bootstrap v5
• JavaScript (Vanilla + jQuery)
• Swiper
• fancyBox v3.2.10
• Local Roboto variable font

Key Features

• Flat and premium single product page layout
• Archive page and single product page visual consistency
• Swiper-based main gallery and thumbnail slider
• fancyBox lightbox preview
• Color swatch gallery switching
• Clear action to restore the default product gallery
• Front-end naming split for easier maintenance:
  • style classes: cw-*
  • behavior hooks: js-cw-*
• Data structure prepared for future WordPress / WooCommerce integration

Project Structure

.
├── index.html
├── single-product.html
├── README.md
├── assets/
│   ├── css/
│   ├── fonts/
│   ├── images/
│   └── js/
└── docs/
    └── screenshots/

Main Files

• index.html Archive / product listing page demo
• single-product.html Single product page demo
• assets/css/product-list.css Shared archive card and brand UI styles
• assets/css/single-product.css Single product page styles
• assets/js/single-product.js Gallery switching, Swiper init, FancyBox init, and swatch interactions

Gallery Logic

The single product page uses JSON data embedded in the HTML as the source of truth for the gallery.

Current behavior:

• Default state uses the product gallery
• Clicking a color swatch switches to the swatch-linked gallery group
• Clicking Clear restores the default product gallery

This means that when you add or remove slides, you should update both:

1. The initial HTML gallery markup
2. The gallery JSON data used by the page script

WordPress / WooCommerce Mapping

This prototype can be used in two directions.

1. WordPress theme only

Use it as a custom product showcase template with:

• Custom Post Type
• ACF / Meta Box / custom fields
• Manually controlled gallery, tabs, specs, and inquiry blocks

2. WooCommerce theme template

Map the structure to WooCommerce data such as:

• product title
• SKU / model
• featured image + product gallery
• attribute swatches
• swatch-linked gallery groups
• product tabs / additional information
• related products

Customization Notes

Recommended customization areas:

• Product title, model, pricing, and metadata
• Color swatch labels and gallery keys
• Tabs content
• Inquiry block copy
• Related product cards
• WordPress / WooCommerce data output layer

Screenshots

Add your screenshots to:

docs/screenshots/

Screenshots

Add your screenshots to the following folder:

• docs/screenshots/archive-page.png
• docs/screenshots/single-product-page.png

Archive Page

Preview of the product archive layout:

Single Product Page

Preview of the single product layout:

Notes

This repository is a static prototype intended for front-end review, theme planning, and later integration into WordPress or WooCommerce templates.

Updated CSS Structure

The stylesheet layer is now split into:

• assets/css/common.css — shared design tokens, base typography, page switcher buttons, shared status pill, and reusable product-card styles
• assets/css/product-list.css — archive/list page styles only
• assets/css/single-product.css — single product page styles only

This means single-product.html no longer depends on product-list.css.

Page Switching Demo

Both demo pages include two centered buttons at the top so you can quickly switch between:

• index.html — product archive page
• single-product.html — single product page