By default, WooCommerce shows one card per product on your shop page, no matter how many color/size/material variations it has. Customers have to click in and use a dropdown to see if their preferred color is even available.
Addonn Variant Grid 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.
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.
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.
Screenshots
Search for "Addonn Variant Grid" and click Install Now.
Click Activate after installation completes.
Go to WooCommerce → Variant Grid and set "Color" as the primary grouping attribute.
Save settings, then click Sync Variations Now to apply it to your products.
Before: the default shop page shows swatches, but each product is still one card.
After: each color becomes its own individual, shoppable card.