{"id":368543,"date":"2026-09-21T16:18:48","date_gmt":"2026-09-21T16:18:48","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/variation-grid-for-woocommerce\/"},"modified":"2026-09-21T16:18:13","modified_gmt":"2026-09-21T16:18:13","slug":"digitallo-variant-cards-for-woocommerce","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/digitallo-variant-cards-for-woocommerce\/","author":23565729,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"0.3.2","stable_tag":"0.3.2","tested":"7.1.2","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Digitallo Variant Cards for WooCommerce","header_author":"Digitallo","header_description":"Display WooCommerce variable product variations as a photo-card grid (image, SKU, price, per-variation Add to Cart button) instead of the default attribute dropdowns.","assets_banners_color":"322e60","last_updated":"2026-09-21 16:18:13","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/digitallo.net","rating":0,"author_block_rating":0,"active_installs":0,"downloads":51,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.3.2":{"tag":"0.3.2","author":"digitallonz","date":"2026-09-21 16:18:13","revision":3705934}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3705942,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3705942,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3705945,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3705945,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.3.2"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Variant Cards settings page under WooCommerce.","2":"Product page showing the variation grid in place of the default dropdown.","3":"The auto-generated color summary pills above the grid."}},"plugin_section":[],"plugin_tags":[37395,6040,51677,6602,286],"plugin_category":[45],"plugin_contributors":[281876],"plugin_business_model":[],"class_list":["post-368543","plugin","type-plugin","status-publish","hentry","plugin_tags-color-swatches","plugin_tags-grid","plugin_tags-product-variations","plugin_tags-variations","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-digitallonz","plugin_committers-digitallonz"],"banners":{"banner":"https:\/\/ps.w.org\/digitallo-variant-cards-for-woocommerce\/assets\/banner-772x250.png?rev=3705945","banner_2x":"https:\/\/ps.w.org\/digitallo-variant-cards-for-woocommerce\/assets\/banner-1544x500.png?rev=3705945","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/digitallo-variant-cards-for-woocommerce\/assets\/icon-128x128.png?rev=3705942","icon_2x":"https:\/\/ps.w.org\/digitallo-variant-cards-for-woocommerce\/assets\/icon-256x256.png?rev=3705942","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>If your store sells products with many color, pattern, or fabric variations \u2014 hijabs, sarees, cosmetics, fabric rolls, jewelry \u2014 WooCommerce's default variation dropdown is a poor way to shop. Customers can't see what they're choosing until they click through each option one at a time.<\/p>\n\n<p><strong>Digitallo Variant Cards for WooCommerce<\/strong> replaces that dropdown with a responsive grid of photo cards. Each variation gets its own image, price, and an independent <strong>Add to Cart<\/strong> button \u2014 customers see every option at a glance and add exactly the one they want in a single click, with no page reload.<\/p>\n\n<h4>Why use a grid instead of a dropdown?<\/h4>\n\n<ul>\n<li>Customers see all variations visually before choosing, instead of guessing from a text label<\/li>\n<li>Each variation adds to cart independently and instantly (AJAX, no page reload)<\/li>\n<li>Works well for stores with 10, 30, or 50+ variations of a single product<\/li>\n<li>No page speed hit from unnecessary swatch plugins \u2014 this is a lightweight, single-purpose tool<\/li>\n<\/ul>\n\n<h4>Features<\/h4>\n\n<ul>\n<li>Displays each variation as a card: image, name, price, and its own Add to Cart button<\/li>\n<li>AJAX add-to-cart per card, with loading and \"Added!\" confirmation states<\/li>\n<li>Automatically lists all variation names as pills above the grid (e.g. \"Colors: Red, Blue, Green\u2026\")<\/li>\n<li>Per-product toggle from the Variations tab \u2014 turn the grid on only where it makes sense<\/li>\n<li>Optional global rule to auto-enable the grid for any variable product with N+ variations<\/li>\n<li>Configurable grid columns for desktop, tablet, and mobile<\/li>\n<li>Option to hide the theme's default dropdown\/quantity\/Add to Cart form when the grid is active<\/li>\n<li>Out-of-stock variations can be greyed out or hidden entirely<\/li>\n<li><code>[dvcw_variant_grid id=\"123\"]<\/code> shortcode \u2014 place the grid anywhere: a custom tab, the product description, or via a page builder<\/li>\n<li>Template override support \u2014 copy <code>templates\/variation-grid.php<\/code> into <code>yourtheme\/dvcw\/<\/code> to fully customize the markup<\/li>\n<li>Works alongside any WooCommerce-compatible theme; no theme editing required<\/li>\n<li>Translation-ready<\/li>\n<li>Compatible with WooCommerce High-Performance Order Storage (HPOS) and Cart\/Checkout blocks<\/li>\n<\/ul>\n\n<h4>Who is this for?<\/h4>\n\n<p>Any WooCommerce store where a single product comes in many visual variations \u2014 fashion (hijabs, sarees, scarves), cosmetics (shades), fabrics, jewelry, stationery, and similar catalogs where photos sell better than text labels.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to <code>\/wp-content\/plugins\/<\/code>, or install the zip via <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>.<\/li>\n<li>Activate the plugin through the <strong>Plugins<\/strong> menu.<\/li>\n<li>Go to <strong>WooCommerce \u2192 Variant Cards<\/strong> to set default columns and behavior.<\/li>\n<li>Edit a variable product, open the <strong>Variations<\/strong> tab, and check <strong>\"Variant Cards\"<\/strong> \u2014 or turn on the global auto-enable rule instead of doing this per product.<\/li>\n<li>View the product on the frontend to see the grid in place of the dropdown.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20work%20with%20any%20theme%3F\"><h3>Does this work with any theme?<\/h3><\/dt>\n<dd><p>Yes. The plugin does not require theme edits. If your theme renders the default variation form in an unusual way (a swatch plugin, or a block-based product template), enable <strong>\"Hide default variation selector\"<\/strong> in the plugin settings \u2014 this hides the old form with CSS rather than relying on removing theme-specific code hooks, so it works across setups.<\/p><\/dd>\n<dt id=\"will%20this%20slow%20down%20my%20product%20pages%3F\"><h3>Will this slow down my product pages?<\/h3><\/dt>\n<dd><p>No extra database queries beyond what WooCommerce already runs to load a variable product's variations. Images use <code>loading=\"lazy\"<\/code>, and the plugin's CSS\/JS only load on product pages.<\/p><\/dd>\n<dt id=\"can%20i%20control%20which%20products%20use%20the%20grid%3F\"><h3>Can I control which products use the grid?<\/h3><\/dt>\n<dd><p>Yes. Enable it per product from the Variations tab, or turn on the global setting to auto-enable it for any variable product with a minimum number of variations \u2014 you can still override that per product.<\/p><\/dd>\n<dt id=\"can%20i%20put%20the%20grid%20somewhere%20other%20than%20the%20default%20position%3F\"><h3>Can I put the grid somewhere other than the default position?<\/h3><\/dt>\n<dd><p>Yes, use the <code>[dvcw_variant_grid id=\"123\"]<\/code> shortcode. Omit <code>id<\/code> to use the current product when placed inside a product page.<\/p><\/dd>\n<dt id=\"does%20it%20support%20variation%20images%3F\"><h3>Does it support variation images?<\/h3><\/dt>\n<dd><p>Yes \u2014 each card uses the variation's own image if one is set, and falls back to the parent product's image otherwise.<\/p><\/dd>\n<dt id=\"can%20i%20customize%20the%20card%20design%3F\"><h3>Can I customize the card design?<\/h3><\/dt>\n<dd><p>Yes, for developers: copy <code>templates\/variation-grid.php<\/code> from the plugin into <code>yourtheme\/dvcw\/variation-grid.php<\/code> and edit the markup freely \u2014 the plugin will use your theme's copy automatically. A <code>dvcw_add_to_cart_button_class<\/code> filter is also available if you only need to change the Add to Cart button's classes to match your theme.<\/p><\/dd>\n<dt id=\"does%20this%20plugin%20track%20or%20send%20any%20data%20externally%3F\"><h3>Does this plugin track or send any data externally?<\/h3><\/dt>\n<dd><p>No. All add-to-cart requests are processed locally via your site's own AJAX endpoint. Nothing is sent to any third-party server.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.3.2<\/h4>\n\n<ul>\n<li>Added the missing phpcs:ignore on the $product re-assignment line inside maybe_swap_template() (the global declaration was already covered; the reassignment right after it needed its own inline note).<\/li>\n<\/ul>\n\n<h4>0.3.1<\/h4>\n\n<ul>\n<li>Prefixed local template variables to satisfy Plugin Check's naming scan.<\/li>\n<li>Added inline documentation for two accepted false-positive flags (accessing WooCommerce's own $product global, and calling WooCommerce's own woocommerce_add_to_cart_validation filter \u2014 neither is a plugin-declared global\/hook).<\/li>\n<\/ul>\n\n<h4>0.3.0<\/h4>\n\n<ul>\n<li>Renamed the plugin to Digitallo Variant Cards for WooCommerce (from Variation Grid for WooCommerce) for directory naming compliance.<\/li>\n<li>Renamed all functions, classes, option\/meta keys, AJAX actions, and the shortcode tag to use a distinct <code>dvcw<\/code> prefix.<\/li>\n<li>Removed the Plugin URI header.<\/li>\n<\/ul>\n\n<h4>0.2.1<\/h4>\n\n<ul>\n<li>Fixed text domain to match the assigned plugin slug (digitallo-variant-cards-for-woocommerce).<\/li>\n<li>Removed deprecated load_plugin_textdomain() call \u2014 WordPress.org auto-loads translations for hosted plugins.<\/li>\n<li>Added explicit nonce verification in the product meta save handler.<\/li>\n<li>Explicitly sanitized the quantity input in the AJAX add-to-cart handler.<\/li>\n<\/ul>\n\n<h4>0.2.0<\/h4>\n\n<ul>\n<li>Simplified settings screen to layout\/behavior essentials.<\/li>\n<li>Button colors, corner radius, and color-summary label\/count now use fixed sane defaults (reserved for a future Pro tier's expanded settings).<\/li>\n<\/ul>\n\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Turn WooCommerce&#039;s dropdown variation selector into a photo-card grid \u2014 every color or pattern gets its own image, price, and Add to Cart button.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/368543","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=368543"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/digitallonz"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=368543"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=368543"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=368543"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=368543"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=368543"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=368543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}