woocommerce-account

Source

framework/global/scss/layouts/_woocommerce-account.scss
framework/brand/nerdworks/scss/layouts/_woocommerce-account.scss
framework/theme/saberco/scss/layouts/_woocommerce-account.scss
wp-content/themes/camcom-v2/woocommerce/myaccount/dashboard.php (canonical link-icon-grid pattern)

Block class name .woocommerce-account 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 My Account page anchor. Sidebar nav on the left, notices + active sub-page body on the right. Renders once on any My Account page (Dashboard, Orders, Addresses, Payment Methods, Downloads, Account Details) from WC's `my-account.php`.

The sidebar contains the WC-generated My Account nav (a list of sub-page links with count badges). The body changes per sub-page — dashboard tiles, orders table, address-edit form, downloads list.

Framework-v1 uses `.woocommerce` as the container and WC's emitted classes (`.woocommerce-MyAccount-navigation`, `.woocommerce-MyAccount-content`) as the slot anatomy. The library canonical form uses `__nav` / `__notices` / `__body` against a `.woocommerce-account` container; new brand builds can emit either.

## Production example

My Account page template structure (canonical BEM form):

```html
<div class="woocommerce-account">

<ul class="list-nav">
            <li><a class="list-nav__item is-active" href="/my-account/">Dashboard</a></li>
            <li><a class="list-nav__item" href="/my-account/orders/">Orders <span>12</span></a></li>
            <li><a class="list-nav__item" href="/my-account/downloads/">Downloads <span>3</span></a></li>
            <li><a class="list-nav__item" href="/my-account/edit-address/">Addresses</a></li>
            <li><a class="list-nav__item" href="/my-account/payment-methods/">Payment methods</a></li>
            <li><a class="list-nav__item" href="/my-account/edit-account/">Account details</a></li>
            <li><a class="list-nav__item" href="/my-account/customer-logout/">Log out</a></li>
        </ul>

</nav>

<div class="grid grid--3">

<a href="/my-account/orders/" class="link-icon grid__item grid__item--border">
                <span class="icon icon--large link-icon__image">…</span>
                <p class="link-icon__title">Orders</p>
            </a>

<a href="/my-account/edit-address/" class="link-icon grid__item grid__item--border">
                <span class="icon icon--large link-icon__image">…</span>
                <p class="link-icon__title">Addresses</p>
            </a>

</div>

</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 quirk.** The SCSS targets WC-emitted classes directly (`.woocommerce-MyAccount-navigation`, `.woocommerce-MyAccount-notices`, `.woocommerce-MyAccount-content`) rather than BEM elements. Library canonical anatomy uses `__nav` / `__notices` / `__body`. This is the cleanest of the WC page-templates — at least every slot is a single WC class — but still not BEM-shaped.
Root container class is `.woocommerce` in framework-v1, NOT `.camcom` or `.page-structure`. Third different root class across the WC page-templates tier — framework-v1 inconsistency.
Grid template-areas: sidebar spans both rows on the left (1 of 4 columns); notices + body stack on the right (3 of 4 columns).
The grid reflows to single-column at 900px (not 768px — different breakpoint from cart/checkout) because the My Account nav needs more space to stay readable.
Dashboard sub-page typically uses `.link-icon` blocks inside a `.grid` to render the tile grid (Orders / Addresses / Payment Methods / Downloads / Logout) — see `link-icon.md`.

Source

Prompt

AI-Assist