Description
If your store sells products with many color, pattern, or fabric variations — hijabs, sarees, cosmetics, fabric rolls, jewelry — 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.
Digitallo Variant Cards for WooCommerce replaces that dropdown with a responsive grid of photo cards. Each variation gets its own image, price, and an independent Add to Cart button — customers see every option at a glance and add exactly the one they want in a single click, with no page reload.
Why use a grid instead of a dropdown?
- Customers see all variations visually before choosing, instead of guessing from a text label
- Each variation adds to cart independently and instantly (AJAX, no page reload)
- Works well for stores with 10, 30, or 50+ variations of a single product
- No page speed hit from unnecessary swatch plugins — this is a lightweight, single-purpose tool
Features
- Displays each variation as a card: image, name, price, and its own Add to Cart button
- AJAX add-to-cart per card, with loading and “Added!” confirmation states
- Automatically lists all variation names as pills above the grid (e.g. “Colors: Red, Blue, Green…”)
- Per-product toggle from the Variations tab — turn the grid on only where it makes sense
- Optional global rule to auto-enable the grid for any variable product with N+ variations
- Configurable grid columns for desktop, tablet, and mobile
- Option to hide the theme’s default dropdown/quantity/Add to Cart form when the grid is active
- Out-of-stock variations can be greyed out or hidden entirely
[dvcw_variant_grid id="123"]shortcode — place the grid anywhere: a custom tab, the product description, or via a page builder- Template override support — copy
templates/variation-grid.phpintoyourtheme/dvcw/to fully customize the markup - Works alongside any WooCommerce-compatible theme; no theme editing required
- Translation-ready
- Compatible with WooCommerce High-Performance Order Storage (HPOS) and Cart/Checkout blocks
Who is this for?
Any WooCommerce store where a single product comes in many visual variations — fashion (hijabs, sarees, scarves), cosmetics (shades), fabrics, jewelry, stationery, and similar catalogs where photos sell better than text labels.
Installation
- Upload the plugin folder to
/wp-content/plugins/, or install the zip via Plugins Add New Upload Plugin. - Activate the plugin through the Plugins menu.
- Go to WooCommerce Variant Cards to set default columns and behavior.
- Edit a variable product, open the Variations tab, and check “Variant Cards” — or turn on the global auto-enable rule instead of doing this per product.
- View the product on the frontend to see the grid in place of the dropdown.
FAQ
-
Does this work with any theme?
-
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 “Hide default variation selector” in the plugin settings — this hides the old form with CSS rather than relying on removing theme-specific code hooks, so it works across setups.
-
Will this slow down my product pages?
-
No extra database queries beyond what WooCommerce already runs to load a variable product’s variations. Images use
loading="lazy", and the plugin’s CSS/JS only load on product pages. -
Can I control which products use the grid?
-
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 — you can still override that per product.
-
Can I put the grid somewhere other than the default position?
-
Yes, use the
[dvcw_variant_grid id="123"]shortcode. Omitidto use the current product when placed inside a product page. -
Does it support variation images?
-
Yes — each card uses the variation’s own image if one is set, and falls back to the parent product’s image otherwise.
-
Can I customize the card design?
-
Yes, for developers: copy
templates/variation-grid.phpfrom the plugin intoyourtheme/dvcw/variation-grid.phpand edit the markup freely — the plugin will use your theme’s copy automatically. Advcw_add_to_cart_button_classfilter is also available if you only need to change the Add to Cart button’s classes to match your theme. -
Does this plugin track or send any data externally?
-
No. All add-to-cart requests are processed locally via your site’s own AJAX endpoint. Nothing is sent to any third-party server.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Digitallo Variant Cards for WooCommerce” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Digitallo Variant Cards for WooCommerce” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
0.3.2
- 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).
0.3.1
- Prefixed local template variables to satisfy Plugin Check’s naming scan.
- 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 — neither is a plugin-declared global/hook).
0.3.0
- Renamed the plugin to Digitallo Variant Cards for WooCommerce (from Variation Grid for WooCommerce) for directory naming compliance.
- Renamed all functions, classes, option/meta keys, AJAX actions, and the shortcode tag to use a distinct
dvcwprefix. - Removed the Plugin URI header.
0.2.1
- Fixed text domain to match the assigned plugin slug (digitallo-variant-cards-for-woocommerce).
- Removed deprecated load_plugin_textdomain() call — WordPress.org auto-loads translations for hosted plugins.
- Added explicit nonce verification in the product meta save handler.
- Explicitly sanitized the quantity input in the AJAX add-to-cart handler.
0.2.0
- Simplified settings screen to layout/behavior essentials.
- Button colors, corner radius, and color-summary label/count now use fixed sane defaults (reserved for a future Pro tier’s expanded settings).
0.1.0
- Initial release.