Addonn Variant Grid for WooCommerce

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.