Addonn Variant Grid for WooCommerce
Show WooCommerce product variations as individual, color-grouped cards on your shop and category pages — instead of one card per parent product.
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.
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.
Shop page showing individual color cards instead of one card per product.
One card per color, not per product
Pick a primary attribute
Group by — usually Color.
Fewer, clearer cards
2 colors × 4 sizes shows as 2 cards, not 8.
In-card selectors
Size, material or any attribute becomes a button inside the card.
Live updates
Price, stock and Add to Cart update instantly — no page reload.
Out-of-stock handling
Combinations that are out of stock are automatically disabled.
A card with an in-card attribute selector — clicking an option updates price and stock instantly.
What's under the hood
Group by any attribute
Color, Material, Style, or any attribute you use.
Multiple secondary attributes
Size and Material together on one card, for example.
Live price and stock
Updates instantly as customers switch options.
Auto + manual sync
Syncs on save, plus a manual "Sync Now" for bulk changes.
HPOS & Blocks compatible
Works with WooCommerce's High-Performance Order Storage and Cart/Checkout blocks.
Lightweight
No external API calls, no tracking.
Stores that sell by color first
Any WooCommerce store using color/size/material variations — especially fashion, apparel, and accessories stores where customers shop by color first.
Five steps to get running
Upload the plugin
To /wp-content/plugins/addonn-variant-grid, or install via the WordPress plugins screen.
Activate it
Through the "Plugins" screen in WordPress.
Choose your attribute
Under WooCommerce → Variant Grid — e.g. Color.
Sync
Click Sync Variations Now to apply it to existing products.
Done
Visit your shop page — variations now appear as individual cards.
The Variant Grid 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.
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.
Renamed from "WC Variation Cards" to Addonn Variant Grid (with unique prefixes on every function, class and hook, per WordPress.org guidelines), plus a security hardening pass: nonce verification and stricter input sanitization on the AJAX add-to-cart endpoint, and KSES-sanitized output on filtered content.
We can help with that too
Whether it's installing and configuring this plugin on your store or building something bespoke, get in touch and we'll scope it out.