Replace the default WooCommerce product page with a professional card-based variation grid, live order summary, and a modern payment panel.

wpthemeprime

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.
<h4>Key Features</h4>
Card-Based Variation Grid
<ul>
<li>Every variation is a clickable card — no more dropdowns.</li>
<li>Custom icon / logo displayed inside each card (e.g. ChatGPT, Adobe logo).</li>
<li>Note badge (pill-shaped) displayed in the top-left of each card.</li>
<li>Cards show a selected state (border glow + checkmark animation).</li>
<li>Sale ribbons for discounted variations.</li>
<li>Out-of-stock cards are visually dimmed and non-clickable.</li>
</ul>
Smart Quantity Logic
<ul>
<li>When quantity = 1: a trash icon is shown. Clicking it deselects the card and removes it from the summary.</li>
<li>When quantity > 1: the trash icon automatically becomes a minus button for decreasing quantity.</li>
</ul>
Live Order Summary
<ul>
<li>Real-time table showing Package, Rate x Qty, and Line Total.</li>
<li>Grand Total updates instantly.</li>
<li>“Clear All” button with configurable colour and hover state.</li>
</ul>
Per-Product Feature Badges
<ul>
<li>Up to 5 customisable feature badges per product (icon + text).</li>
<li>Drag-to-reorder via the product edit screen.</li>
<li>Empty slots are automatically hidden on the front end.</li>
</ul>
5 Layout Templates
<ul>
<li>Subscription / Digital — hero image, identity bar, feature pills.</li>
<li>Service Package — service banner, what’s included checklist, portfolio gallery.</li>
<li>Software / License — big product icon, version badges, feature grid, screenshots.</li>
<li>Wholesale / Bulk — multi-image gallery with thumbnails, specs table.</li>
<li>Event / Course — event banner, date/location badges, curriculum list, seats progress bar.</li>
<li>Per-product layout override from the product edit sidebar.</li>
</ul>
Column Width Control
<ul>
<li>Admin slider (30-60%) to set the left column width.</li>
<li>Right column (packages + payment) takes the remaining width.</li>
</ul>
UI Label Overrides
<ul>
<li>7 front-end text labels are overridable from the settings page without editing code.</li>
</ul>
PPOM & Third-Party Plugin Compatibility
<ul>
<li>Fields added by PPOM (e.g. WhatsApp number), WC Product Add-ons, and similar plugins are preserved and rendered above the Order Now button.</li>
<li>Default WooCommerce variation dropdowns and add-to-cart button are hidden to avoid duplication.</li>
</ul>
AJAX Multi-Item Add to Cart
<ul>
<li>Adds multiple variation packages in a single AJAX request.</li>
<li>No page reload.</li>
<li>Configurable post-purchase redirect: Cart, Checkout, or Stay on Page.</li>
</ul>
Fully Responsive
<ul>
<li>Two-column layout on desktop.</li>
<li>Single-column stacked layout on mobile.</li>
</ul>
Translation Ready
<ul>
<li>All strings use __() / _e() with the cardgrid-for-woocommerce text domain.</li>
<li>.pot template included.</li>
</ul>
<h4>Use Cases</h4>
<ul>
<li>Digital product subscriptions (ChatGPT, Adobe, streaming services)</li>
<li>SaaS licence packages</li>
<li>Service bundles (1 Month / 3 Month / 12 Month)</li>
<li>Any WooCommerce store selling variable products in Bangladesh or globally</li>
</ul>
<h3>Privacy Policy</h3>
This plugin does not collect or transmit any personal data. It does not use cookies. No third-party services are contacted.

Alternatives to CardGrid for WooCommerce

Top alternatives