The problem
By default, WooCommerce shows one card per product on your shop page, no matter how many color, size, or material variations it has. Customers have to click in and use a dropdown just to see if their preferred color is even available.
What it does
WC Variation Cards changes this: it shows one card per variation group (e.g. per color) directly on the shop and category pages — with the correct image, price, and stock for that specific color. Any other attributes (size, material, etc.) become simple buttons right inside the card, so customers can pick their exact variant without leaving the grid.
Shop page showing individual color cards instead of one card per product.
How it works
- Choose a primary attribute to group by (usually Color).
- A product with 2 colors × 4 sizes shows as 2 cards, not 8 — one per color.
- Size, material, or any other attribute becomes a button selector inside each card.
- Price, stock, and the Add to Cart target update live as the customer clicks between options — no page reload.
- Out-of-stock combinations are automatically disabled.
A card with an in-card attribute selector — clicking an option updates price and stock instantly.
Features
- Group by any product attribute (Color, Material, Style, etc.)
- Supports multiple secondary attributes per card (Size and Material, for example)
- Live price and stock updates on selection
- Automatic sync when a product is saved, plus a manual "Sync Now" button for bulk changes
- Works with WooCommerce's High-Performance Order Storage (HPOS) and Cart/Checkout blocks
- Lightweight — no external API calls, no tracking
Who this is for
Any WooCommerce store using color/size/material variations — especially fashion, apparel, and accessories stores where customers shop by color first.
How to set it up
- Upload the plugin files to
/wp-content/plugins/wc-variation-cards, or install directly through the WordPress plugins screen. - Activate the plugin through the "Plugins" screen in WordPress.
- Go to WooCommerce → Variation Cards and choose your primary grouping attribute (e.g. Color).
- Click Sync Variations Now to apply it to your existing products.
- Visit your shop page — variations now appear as individual cards.
The Variation Cards settings page.
Frequently asked questions
Does this create duplicate products?
No. It doesn't change your product data at all — it only changes how variations are displayed on shop/category archive pages.
What happens to the original variable product listing?
You can choose to hide the original parent product from the shop page (recommended, to avoid a duplicate listing) via the plugin settings — the toggle is on by default.
Why don't I see a Size selector on some of my product cards?
This means that specific variation's Size attribute is set to "Any Size" in WooCommerce rather than a specific size — i.e. that product doesn't actually have separate size-specific variations yet. Add proper size-specific variations via Generate Variations in the product's Variations tab, then run Sync again.
Does this work with my theme?
It's built on WooCommerce's standard hooks and should work with most themes. If your theme has a heavily custom product-card template, some visual polish may be needed.
Does this affect performance?
No extra database queries are added to the main shop loop beyond what WooCommerce already runs. Syncing (which computes the groupings) happens once per product save, not on every page load.
Compatibility
Requires WordPress 6.0+, WooCommerce 8.0+, and PHP 7.4+. Declares compatibility with WooCommerce's High-Performance Order Storage (HPOS) and Cart/Checkout blocks.