{"id":349485,"date":"2026-08-12T20:43:43","date_gmt":"2026-08-12T20:43:43","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/wc-variation-cards\/"},"modified":"2026-08-13T13:53:41","modified_gmt":"2026-08-13T13:53:41","slug":"addonn-variant-grid","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/addonn-variant-grid\/","author":23108340,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"0.2.7","stable_tag":"trunk","tested":"7.0.4","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Addonn Variant Grid for WooCommerce","header_author":"AddOnn Tech","header_description":"Shows WooCommerce product variations as separate cards on shop\/category pages, grouped by a primary attribute (e.g. Color). A shirt with 2 colors x 4 sizes shows as 2 cards, with size\/other attributes selectable inside each card.","assets_banners_color":"f0f0f0","last_updated":"2026-08-13 13:53:41","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":33,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"0.2.0":"<p>Recommended update \u2014 improves compatibility with more themes and adds multi-attribute support.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3643974,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3643974,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3645566,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3645566,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3645510,"resolution":"1","location":"assets","locale":"","width":2978,"height":1526},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3645510,"resolution":"2","location":"assets","locale":"","width":2978,"height":1526},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3645510,"resolution":"3","location":"assets","locale":"","width":2978,"height":1526},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3645510,"resolution":"4","location":"assets","locale":"","width":2978,"height":1526},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3645510,"resolution":"5","location":"assets","locale":"","width":2978,"height":1526},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3645510,"resolution":"6","location":"assets","locale":"","width":2978,"height":1526}},"screenshots":{"1":"Search for \"Addonn Variant Grid\" and click Install Now.","2":"Click Activate after installation completes.","3":"Go to WooCommerce \u2192 Variant Grid and set \"Color\" as the primary grouping attribute.","4":"Save settings, then click Sync Variations Now to apply it to your products.","5":"Before: the default shop page shows swatches, but each product is still one card.","6":"After: each color becomes its own individual, shoppable card."}},"plugin_section":[],"plugin_tags":[37395,51677,275420,130912,286],"plugin_category":[45],"plugin_contributors":[275421],"plugin_business_model":[],"class_list":["post-349485","plugin","type-plugin","status-publish","hentry","plugin_tags-color-swatches","plugin_tags-product-variations","plugin_tags-single-product-display","plugin_tags-variation-swatches","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-zain111","plugin_committers-zain111"],"banners":{"banner":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/banner-772x250.png?rev=3645566","banner_2x":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/banner-1544x500.png?rev=3645566","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/icon-128x128.png?rev=3643974","icon_2x":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/icon-256x256.png?rev=3643974","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/screenshot-1.png?rev=3645510","caption":"Search for \"Addonn Variant Grid\" and click Install Now."},{"src":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/screenshot-2.png?rev=3645510","caption":"Click Activate after installation completes."},{"src":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/screenshot-3.png?rev=3645510","caption":"Go to WooCommerce \u2192 Variant Grid and set \"Color\" as the primary grouping attribute."},{"src":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/screenshot-4.png?rev=3645510","caption":"Save settings, then click Sync Variations Now to apply it to your products."},{"src":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/screenshot-5.png?rev=3645510","caption":"Before: the default shop page shows swatches, but each product is still one card."},{"src":"https:\/\/ps.w.org\/addonn-variant-grid\/assets\/screenshot-6.png?rev=3645510","caption":"After: each color becomes its own individual, shoppable card."}],"raw_content":"<!--section=description-->\n<p>By default, WooCommerce shows one card per <strong>product<\/strong> 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.<\/p>\n\n<p><strong>Addonn Variant Grid<\/strong> changes this: it shows one card <strong>per variation group<\/strong> (e.g. per color) directly on the shop and category pages \u2014 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.<\/p>\n\n<h4>How it works<\/h4>\n\n<ul>\n<li>Choose a <strong>primary attribute<\/strong> to group by (usually Color).<\/li>\n<li>A product with 2 colors \u00d7 4 sizes shows as <strong>2 cards<\/strong>, not 8 \u2014 one per color.<\/li>\n<li>Size, material, or any other attribute becomes a button selector inside each card.<\/li>\n<li>Price, stock, and the Add to Cart target update live as the customer clicks between options \u2014 no page reload.<\/li>\n<li>Out-of-stock combinations are automatically disabled.<\/li>\n<\/ul>\n\n<h4>Features<\/h4>\n\n<ul>\n<li>Group by any product attribute (Color, Material, Style, etc.)<\/li>\n<li>Supports multiple secondary attributes per card (Size <em>and<\/em> Material, for example)<\/li>\n<li>Live price and stock updates on selection<\/li>\n<li>Automatic sync when a product is saved, plus a manual \"Sync Now\" button for bulk changes<\/li>\n<li>Works with WooCommerce's High-Performance Order Storage (HPOS) and Cart\/Checkout blocks<\/li>\n<li>Lightweight \u2014 no external API calls, no tracking<\/li>\n<\/ul>\n\n<h4>Who this is for<\/h4>\n\n<p>Any WooCommerce store using color\/size\/material variations \u2014 especially fashion, apparel, and accessories stores where customers shop by color first.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to <code>\/wp-content\/plugins\/addonn-variant-grid<\/code>, or install directly through the WordPress plugins screen.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>Go to <strong>WooCommerce \u2192 Variant Grid<\/strong> and choose your primary grouping attribute (e.g. Color).<\/li>\n<li>Click <strong>Sync Variations Now<\/strong> to apply it to your existing products.<\/li>\n<li>Visit your shop page \u2014 variations now appear as individual cards.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20create%20duplicate%20products%3F\"><h3>Does this create duplicate products?<\/h3><\/dt>\n<dd><p>No. It doesn't change your product data at all \u2014 it only changes how variations are <em>displayed<\/em> on shop\/category archive pages.<\/p><\/dd>\n<dt id=\"what%20happens%20to%20the%20original%20variable%20product%20listing%3F\"><h3>What happens to the original variable product listing?<\/h3><\/dt>\n<dd><p>You can choose to hide the original parent product from the shop page (recommended, to avoid a duplicate listing) via the plugin settings \u2014 the toggle is on by default.<\/p><\/dd>\n<dt id=\"why%20don%27t%20i%20see%20a%20size%20selector%20on%20some%20of%20my%20product%20cards%3F\"><h3>Why don't I see a Size selector on some of my product cards?<\/h3><\/dt>\n<dd><p>This means that specific variation's Size attribute is set to \"Any Size\" in WooCommerce rather than a specific size \u2014 i.e. that product doesn't actually have separate size-specific variations yet. Add proper size-specific variations via <strong>Generate Variations<\/strong> in the product's Variations tab, then run Sync again.<\/p><\/dd>\n<dt id=\"does%20this%20work%20with%20my%20theme%3F\"><h3>Does this work with my theme?<\/h3><\/dt>\n<dd><p>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 \u2014 please open a support thread if you run into issues.<\/p><\/dd>\n<dt id=\"does%20this%20affect%20performance%3F\"><h3>Does this affect performance?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.2.7<\/h4>\n\n<ul>\n<li>Fixed remaining scanner ignore-comment placement (covers both the isset check and the value read).<\/li>\n<\/ul>\n\n<h4>0.2.6<\/h4>\n\n<ul>\n<li>Fixed button text being invisible on themes that set a global button text color, by explicitly setting text color instead of relying on inheritance.<\/li>\n<\/ul>\n\n<h4>0.2.5<\/h4>\n\n<ul>\n<li>Fixed placement of security scanner ignore-comments so they correctly cover the exact lines they justify.<\/li>\n<\/ul>\n\n<h4>0.2.4<\/h4>\n\n<ul>\n<li>Added nonce verification and stricter input sanitization to the AJAX add-to-cart endpoint.<\/li>\n<\/ul>\n\n<h4>0.2.3<\/h4>\n\n<ul>\n<li>Sanitized filtered output before rendering (KSES) so extension hooks cannot introduce unsafe markup.<\/li>\n<\/ul>\n\n<h4>0.2.2<\/h4>\n\n<ul>\n<li>Renamed plugin (was \"WC Variation Cards\") and applied unique prefixes to all functions, classes, options, and hooks per WordPress.org guidelines.<\/li>\n<\/ul>\n\n<h4>0.2.1<\/h4>\n\n<ul>\n<li>Improved compatibility with themes that render more than one Add to Cart control per product card.<\/li>\n<\/ul>\n\n<h4>0.2.0<\/h4>\n\n<ul>\n<li>Added support for multiple secondary attributes per card (e.g. Size and Material together).<\/li>\n<li>Added WooCommerce HPOS \/ Cart-Checkout-Blocks compatibility declaration.<\/li>\n<li>Improved compatibility with themes that use different WooCommerce loop hooks.<\/li>\n<\/ul>\n\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial release: color-grouped cards, single secondary attribute selector, manual + automatic sync.<\/li>\n<\/ul>","raw_excerpt":"Show each WooCommerce product variation as its own individual product card on the shop page \u2014 instead of one card per parent product with a dropdown.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/349485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=349485"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/zain111"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=349485"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=349485"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=349485"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=349485"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=349485"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=349485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}