Popis
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.
Instalace
- 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.
Nejčastější dotazy
-
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.
Recenze
Pro tento plugin nejsou žádné recenze.
Autoři
Digitallo Variant Cards for WooCommerce je otevřený software. Následující lidé přispěli k vývoji tohoto pluginu.
Spolupracovníci
Přeložte “Digitallo Variant Cards for WooCommerce” do svého jazyka.
Zajímá vás vývoj?
Prohledejte kód, podívejte se do SVN repozitáře, nebo se přihlaste k odběru protokolu vývoje pomocí RSS.
Přehled změn
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.