Description

CardGrid for WooCommerce transforms the standard WooCommerce single-product page into a high-converting, card-based experience.

Instead of traditional dropdowns, every product variation is displayed as a visual, interactive card. Customers see prices at a glance, select multiple packages, adjust quantities, and place multi-item orders — all without a page reload.

Key Features

Card-Based Variation Grid

Every variation is a clickable card — no more dropdowns.
Custom icon / logo displayed inside each card (e.g. ChatGPT, Adobe logo).
Note badge (pill-shaped) displayed in the top-left of each card.
Cards show a selected state (border glow + checkmark animation).
Sale ribbons for discounted variations.
Out-of-stock cards are visually dimmed and non-clickable.

Smart Quantity Logic

When quantity = 1: a trash icon is shown. Clicking it deselects the card and removes it from the summary.
When quantity > 1: the trash icon automatically becomes a minus button for decreasing quantity.

Live Order Summary

Real-time table showing Package, Rate x Qty, and Line Total.
Grand Total updates instantly.
“Clear All” button with configurable colour and hover state.

Per-Product Feature Badges

Up to 5 customisable feature badges per product (icon + text).
Drag-to-reorder via the product edit screen.
Empty slots are automatically hidden on the front end.

5 Layout Templates

Subscription / Digital — hero image, identity bar, feature pills.
Service Package — service banner, what’s included checklist, portfolio gallery.
Software / License — big product icon, version badges, feature grid, screenshots.
Wholesale / Bulk — multi-image gallery with thumbnails, specs table.
Event / Course — event banner, date/location badges, curriculum list, seats progress bar.
Per-product layout override from the product edit sidebar.

Column Width Control

Admin slider (30-60%) to set the left column width.
Right column (packages + payment) takes the remaining width.

UI Label Overrides

7 front-end text labels are overridable from the settings page without editing code.

PPOM & Third-Party Plugin Compatibility

Fields added by PPOM (e.g. WhatsApp number), WC Product Add-ons, and similar plugins are preserved and rendered above the Order Now button.
Default WooCommerce variation dropdowns and add-to-cart button are hidden to avoid duplication.

AJAX Multi-Item Add to Cart

Adds multiple variation packages in a single AJAX request.
No page reload.
Configurable post-purchase redirect: Cart, Checkout, or Stay on Page.

Fully Responsive

Two-column layout on desktop.
Single-column stacked layout on mobile.

Translation Ready

All strings use __() / _e() with the cardgrid-for-woocommerce text domain.
.pot template included.

Use Cases

Digital product subscriptions (ChatGPT, Adobe, streaming services)
SaaS licence packages
Service bundles (1 Month / 3 Month / 12 Month)
Any WooCommerce store selling variable products in Bangladesh or globally

Privacy Policy

This plugin does not collect or transmit any personal data. It does not use cookies. No third-party services are contacted.

Installation

Download the plugin ZIP.
In your WordPress dashboard go to Plugins > Add New > Upload Plugin.
Choose the ZIP file and click Install Now.
Click Activate Plugin.
Go to Variation Engine in the WordPress sidebar.
Configure your colours, badge, payment icons, and checkout behaviour.
Edit any product: set the type to Variable Product, create attributes and add variations, upload a Variation Card Icon per variation, and use the Product Feature Badges meta box to add feature pills.

FAQ

Does it work with simple products?: Yes. Simple products show a single card.
Will my PPOM / WC Add-ons fields still appear?: Yes. The plugin outputs all fields registered on woocommerce_before_add_to_cart_button inside a dedicated wrapper above the Order Now button.
Is the plugin translation ready?: Yes. All strings use the cardgrid-for-woocommerce text domain. A .pot file is included in the languages/ directory.
Can I customise the colours?: Yes. The settings page (Variation Engine > Settings) includes colour pickers for accent colour, card background, header background, grid background, border, text, grand total, clear-all button, order button, and badge colours.
Can I change the layout for one specific product?: Yes. On any product’s edit page, use the “Layout Template (Variation Engine)” dropdown in the sidebar to override the global layout for that product only.
Does it conflict with page builders like Elementor?: All CSS classes use the vcfw- prefix to avoid conflicts. Known Elementor font CORS issues are automatically resolved on product pages.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“CardGrid for WooCommerce” is open source software. The following people have contributed to this plugin.

wpthemeprime

Translate “CardGrid 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

1.9.3

Renamed to WPThemePrime Variation Cards for WooCommerce. All inline CSS converted to wp_add_inline_style(). PHP syntax fix. WP.org reviewer issues resolved.

1.9.2

SVG output sanitized with wp_kses(). Stylesheet enqueue fixed. Tested up to WP 6.9.

1.9.1

Plugin Check errors fixed: translators comments, escaping, upgrade notice lengths.

1.9.0

Major: Complete prefix rebrand — all internal code migrated from aiwbd- to vcfw- (Variation Cards For WooCommerce).
Changed: All PHP classes renamed VCFW_* (was AIWbd_VE_*).
Changed: All PHP constants renamed VCFW_* (was AIWBD_VE_*).
Changed: All CSS classes renamed vcfw-* (was aiwbd-*).
Changed: All CSS variables renamed –vcfw-* (was –aiwbd-*).
Changed: All JS selectors and references updated to vcfw-.
Changed: All file names renamed from aiwbd-ve-* to vcfw-*.
Audit: 0 deprecated functions, 0 hardcoded paths, 0 dangerous code, 315+ escaping calls verified.

1.8.2

New: Button height control (40–80px range slider).
New: Button font size control (12–24px range slider).
New: Button border radius control (0–40px range slider).
New: Button border width, style (solid/dashed/dotted/double), and color controls.
New: Live preview panel for the order button — shows changes instantly before saving.

1.8.1

New: AJAX save — settings now save instantly without page reload, with toast notification.
Fix: Active sub-tab (Global/Cards/etc) text visibility — stronger gradient contrast, white text now readable.
Fix: Mode switcher (Light/Auto/Dark) redesigned with proper card layout, icons, and active state.
Improved: Save button centered with better spacing and loading spinner animation.
Improved: Admin color groups now have card-style presentation with hover effects.

1.8.0

Renamed: Plugin renamed to “Variation Cards for WooCommerce” for WordPress.org SEO.
Major: Front-end visual overhaul — modern card design with top accent bar, stronger price hierarchy (1.4rem), gradient selected state, polished summary box.
Major: Admin redesigned — cleaner color groups, better tab navigation, fixed empty-space tabs with helper info cards, payment row UX cleanup.
New: Default theme switched from red to indigo to match shipped CSS (no more new-install color mismatch).
Fix: Layout card icons now render as SVG (was rendering “subscription”/”service”/”wholesale” as text).
Fix: Settings save bug for column width and 7 UI label override fields.
Fix: JSON corruption bug in AJAX add-to-cart handler.
Fix: Order button “red” hover override removed — now consistently uses indigo accent.
Fix: Missing _vcfw_left_layout cleanup on uninstall.
Improved: PPOM third-party fields styled to match plugin theme (was raw browser default).
Improved: SSL note green color for trust signal (color psychology).
Improved: Mobile layout — 2-col card grid, tighter spacing.

1.7.1

New: Column width admin slider (30-60%) to control the left/right column split.
New: 7 UI label overrides — translate or rename any front-end text label without editing code.
Changed: All admin emoji icons replaced with inline SVGs for better cross-platform rendering.

1.7.0

New: Meta box CSS improvements.
Changed: Admin emoji icons replaced with SVG in key areas.

1.6.9

Improved: Summary box visual polish and spacing.
Changed: Default desktop grid ratio set to 37/62 split.

1.6.8

Fix: Permanent fix for sanitize_key() corrupting variation attribute keys causing “X is a required field” error.
Fix: Nonce verification now accepts previous-tick nonce for cached pages.

1.6.7

Fix: Bug in variation attribute key sanitization that prevented add-to-cart.

1.6.6

Fix: Toast notification CSS was missing — success/error messages now display correctly.

1.6.5

Fix: WooCommerce stale error notices cleared before AJAX add-to-cart.
Improved: Product image section made more compact.

1.6.4

New: AJAX response now carries live cart and checkout URLs from the WC session.

1.6.3

New: Configurable post-add-to-cart redirect — Cart, Checkout, or Stay on Page.

1.6.2

Fix: Astra theme button CSS specificity override.

1.6.0

New: Modern UI refresh with Indigo accent colour as new default.
New: Dequeue conflicting assets — Elementor CORS font issues and sticky-add-to-cart JS crashes resolved automatically.

1.5.2

Fix: Admin CSS 22 missing style rules added.
Fix: Simple product add-to-cart via AJAX now works correctly.

1.4.9

New: Lightbox for product images.
Fix: Admin light mode visual corrections.
Fix: Empty section guard prevents blank divs from rendering.

1.3.9

New: 5 layout templates — Subscription, Service, Software, Wholesale, Event.
New: 3-section DOM structure with mobile-first reorder.

1.2.0

New: Dark / Light / Auto page mode.
New: 21 CSS custom properties for full theme control.

1.0.0

Initial release.
Card-based variation grid with per-card icons.
Smart trash/minus quantity logic.
Pill-shaped note badge inside each variation card.
Per-product feature badge meta box.
PPOM and third-party field compatibility.
AJAX multi-item add-to-cart with nonce security.
Tabbed admin settings panel.
Keyboard accessibility on variation cards.
HPOS compatibility declaration.