WOOdrobe turns the Site Editor into a fitting room for your WooCommerce store. Select Product Details or Product Collection, open the Styles panel, and try a complete look — pre-designed, pre-animated, ready to ship.
For theme makers and store builders, WOOdrobe means you stop hand-rolling CSS for the parts of a store customers actually read and browse. Pick the visual language that fits the brand. Push to production. Move on.
43 variants across two WooCommerce blocks: 23 for woocommerce/product-details and 20 for woocommerce/product-collection.
Tab strips — segmented controls and tab bars (7)
| Variant | Look |
|---|---|
| Pill Switch | Soft segmented control with a sliding active pill |
| Sidebar Tabs | Vertical rail with mono-numbered tabs and a body panel |
| Card Tabs | Folder-tab metaphor — active tab lifts and joins the body card |
| Underline Slide | Classic underlined tabs with crisp dividers |
| Chips | Compact rounded chips with a pulsing active dot |
| Bottom Tabs | Body on top, tabs at bottom in a 3-column strip |
| Preview Strip | Tab cards with body sitting beneath the strip |
Stacked & accordion — open/close, scannable rows (6)
| Variant | Look |
|---|---|
| Accordion Stack | Refined card with soft hover and animated chevron |
| Numbered Index | Editorial decimal-leading-zero index with serif headlines |
| Magazine Masthead | Top/bottom heavy rules; serif italic active heading |
| Brutalist | 2px ink border, uppercase mono, inverted active state |
| Soft Cards | Gradient outer with soft cards that lift on hover |
| Progressive Disclosure | Crisp dividers; hover slides padding |
Editorial & expressive — narrative, technical, playful (10)
| Variant | Look |
|---|---|
| Always-on Story | Force-open editorial stream with mono kickers |
| Description First | First item is the hero; rest are boxed glance modules |
| Q&A Format | 280px+1fr grid per item, "Q." prefix in warm orange |
| Reading View | Centered serif body, mono kickers, clean separators |
| Filmstrip | Dark surface, oversized numerals, warm kicker |
| Spec Sheet | Mono datasheet on inked rules |
| Bento Grid | 4-col grid with a dark hero card and soft cells |
| Newspaper | Inked masthead, serif headlines, columnar body |
| Field Notebook | Cream paper, horizontal rules, warm numbered notes |
| Stat Block | RPG character sheet — heavy border, mono labels |
Grid & catalog layouts — product cards, rails, lists, and editorial collections (20)
| Variant | Look |
|---|---|
| Classic Refined | Clean baseline grid with generous whitespace |
| Editorial Magazine | Asymmetric feature grid with serif headlines |
| Catalog Dense | Information-rich cards for high-volume shopping |
| Hover Reveal | Image-first cards with details revealed on interaction |
| Card Stack (Soft) | Soft layered cards with friendly shadows |
| Brutalist Mono | Hard borders, mono labels, no softness |
| Showcase Hero | One hero product paired with supporting cards |
| Bento Mixed | Mixed tile sizes for curated collections |
| Polaroid Pinboard | Tilted snapshot cards with tape details |
| Index Card | Library-card rules, stamp-like price treatment |
| Marquee Strip | Horizontal numbered product rail |
| Swatch-First | Variant swatches take visual priority |
| Conversational | Recommendation bubbles for a personal-shopper feel |
| Minimal Text-Only | Type-led product list with images removed |
| Image-Left List | Single-column rows with image and details side by side |
| Two-Up Wide | Wide two-column product cards |
| Five Column Dense | Compact five-column catalog grid |
| Info Beside Image | Tight image-plus-info card layout |
| Info Overlay | Product details layered over the image |
| Masonry | Variable-height cards in masonry columns |
One stylesheet, 43 looks. Every variant is styled in CSS, with one tiny dependency-free script only for tab-style autoclose behavior.
Built-in showcase block. Open Appearance → WOOdrobe Showcase or insert the WOOdrobe Showcase block on a page to see a selected style family with the same sample content.
Multi-block by design. Built around a
block_name → variantsmap so any WooCommerce block can drop in.
Theme-aware tokens. WOOdrobe reads from your theme's
theme.jsonpalette and font families first — surface, contrast, accent, body / heading / monospace — and falls back to its own values only when the theme doesn't define a slug. Derived gray tones usecolor-mix(), so the entire tonal ramp follows the theme automatically (including dark themes).
Modern motion. Smooth panel reveals, hover lifts, on-load stagger, and pulse accents, all timed off shared motion tokens.
prefers-reduced-motionhonored everywhere.
Site Editor friendly. Loads cleanly in the editor iframe and on the front end through
enqueue_block_assets. Cache-busts via stylesheet mtime, so iterations show up immediately.
Accessible by default. Visible focus rings on every toggle. Force-open variants stay reachable to assistive tech.
Appearance → Editor → Single Product → Product Details → Styles → pick one
Appearance → Editor → Product Catalog → Product Collection → Styles → pick one
That's it. The store-front transforms instantly.
To browse the wardrobe at once, open Appearance → WOOdrobe Showcase in wp-admin or insert the WOOdrobe Showcase block on any page. The block includes a Styles to show control so each WooCommerce block family can appear in the same gallery.
git clone https://github.com/RegionallyFamous/WOOdrobe.git wp-content/plugins/woodrobeActivate WOOdrobe in Plugins. WooCommerce must be active first.
Local development
git clone https://github.com/RegionallyFamous/WOOdrobe.git
cd WOOdrobe
./sync-to-studio.sh # rsyncs into ~/Studio/theme-factory/wp-content/plugins/woodrobesync-to-studio.sh mirrors the working tree into a local Studio site and bumps the stylesheet mtime so the cache-buster updates immediately.
Adding support for another WooCommerce block (two steps)
1. Add a block-name entry to woodrobe_block_styles() in woodrobe.php:
'woocommerce/cart' => array(
array( 'slug' => 'minimal-checkout', 'label' => __( 'Minimal Checkout', 'woodrobe' ) ),
// …
),2. Append a BLOCK: woocommerce/cart section to assets/styles.css, with selectors scoped to .wp-block-woocommerce-cart.is-style-<slug> (and descendants).
The plugin auto-registers every entry through register_block_style() and shares the single stylesheet handle so design tokens cascade across blocks and the request count stays at 1.
| Status | Block | Variants |
|---|---|---|
| ✓ shipped | woocommerce/product-details |
23 |
| ✓ shipped | woocommerce/product-collection |
20 |
| next | woocommerce/cart |
— |
| next | woocommerce/checkout |
— |
| planned | woocommerce/mini-cart |
— |
| planned | woocommerce/product-image-gallery |
— |
| planned | woocommerce/product-rating |
— |
| planned | woocommerce/related-products |
— |
| planned | woocommerce/product-reviews |
— |
| planned | woocommerce/customer-account |
— |
| planned | woocommerce/store-notices |
— |
Vote on the next block by opening an issue ↗.
| WordPress | 6.4+ |
| PHP | 7.4+ |
| WooCommerce | any recent version |
| Theme | block themes (FSE) — classic themes don't render the targeted blocks |