woocommerce-product

Source

framework/global/scss/layouts/_woocommerce-product.scss (commented out u2014 historical spec)
framework/brand/nerdworks/scss/woocommerce-product.scss (active per-brand styling)
framework/theme/saberco/scss/saberco-woocom-product.scss
framework/brand/saber66/scss/layouts/_woocommerce-product.scss
framework/brand/artsabers/scss/layouts/_woocommerce-product.scss
framework/theme/paratura_gaming/scss/layouts/_woocommerce-product.scss
wp-content/themes/saberco/woocommerce/content-single-product.php (canonical anatomy)

Block class name .woocommerce-product Edit in wp-admin

Example markup

Prompt

Operator-authored guidance for the camcom-design skill — when to use this block, composition rules, brand-variation notes. Saves on blur.

The single-product page anchor. A grid wrapper containing the page-top product summary (gallery / title / ATC / promo) and the below-the-fold body (description / reviews / related). Renders once per product page from `content-single-product.php`.

The global SCSS is commented out — framework-v1 moved the styling per-brand, with each brand silo owning a dedicated `woocommerce-product.scss` file outside the layouts folder. The library entry documents the canonical anatomy; existing brands keep their per-brand files; new brand builds emit the slot tree and brand-style it themselves.

WC's full hook chain (`woocommerce_before_single_product` through `woocommerce_after_single_product_summary`) fires in sequence as the template renders. The skill emits the structural slot tree; WC hook orchestration is Scope B (the packager).

## Production example

Single-product template using the framework-v1 `.camcom__*` slot anatomy (saberco):

```html
<div class="camcom__notices">
    <?php do_action( 'woocommerce_before_single_product' ); ?>
</div>

</div>

<div class="camcom__body">
    <?php do_action( 'woocommerce_after_single_product_summary' ); ?>
</div>
```

Legacy fields (tier, composition role, layout pattern, repeaters)

Pre-MC-plan-#64 schema. Data preserved here for reference. Collapsed into example markup + prompt opportunistically as we walk sections.

Composition role Layout pattern

Purpose Composes with

Elements observed

Modifiers observed

States

Non-canonical elements

Notes

**Framework-v1 deviation.** The global `_woocommerce-product.scss` is entirely commented out — historical reference for the original grid spec. Active rendering uses the `.camcom__*` slot classes (emitted by `content-single-product.php`) with brand themes owning the styling in per-brand files (`framework/brand/nerdworks/scss/woocommerce-product.scss`, `framework/theme/saberco/scss/saberco-woocom-product.scss`). The library entry documents the canonical anatomy; the actual rendered root container class is `.camcom` (the framework-v1 wrapper), not `.woocommerce-product`.
For new brand builds, the engine-v2 skill should emit either the framework-v1 form (`.camcom__*` slot classes) for backwards compatibility OR migrate to the canonical `.woocommerce-product__*` form. The choice is deferred to the operator at first instantiation.
The `__header` triple-column on desktop (gallery / content / ATC+promo) collapses on mobile to single-column with `__gallery` first.
WC hook integration is Scope B (the packager), not Scope A (the skill). The skill emits the slot tree; the packager wires the WC hook orchestration.

Source

Prompt

AI-Assist