{"id":308951,"date":"2026-05-13T10:32:55","date_gmt":"2026-05-13T10:32:55","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/variation-cards-for-woocommerce\/"},"modified":"2026-05-13T13:08:13","modified_gmt":"2026-05-13T13:08:13","slug":"cardgrid-for-woocommerce","status":"publish","type":"plugin","link":"https:\/\/es.wordpress.org\/plugins\/cardgrid-for-woocommerce\/","author":23493870,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.9.3","stable_tag":"1.9.3","tested":"6.9.4","requires":"5.9","requires_php":"7.4","requires_plugins":null,"header_name":"CardGrid for WooCommerce","header_author":"wpthemeprime","header_description":"A professional WooCommerce product page engine by WPThemePrime. Replaces the default variation dropdowns with an interactive card-based grid, live order summary, per-product feature icons, and a modern dark-theme UI. PPOM compatible.","assets_banners_color":"","last_updated":"2026-05-13 13:08:13","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wpthemeprime.com\/variation-cards-for-woocommerce\/","header_author_uri":"https:\/\/wpthemeprime.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":14,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.9.3":{"tag":"1.9.3","author":"wpthemeprime","date":"2026-05-13 13:08:13"}},"upgrade_notice":{"1.9.3":"<p>Renamed to WPThemePrime Variation Cards for WooCommerce. All inline CSS converted to wp_add_inline_style(). PHP syntax fix. WP.org reviewer issues resolved.<\/p>","1.9.2":"<p>SVG output sanitized with wp_kses(). Stylesheet enqueue fixed. Tested up to WP 6.9.<\/p>","1.9.1":"<p>Plugin Check errors fixed: translators comments, escaping, upgrade notice lengths.<\/p>","1.9.0":"<p>Complete code rebrand: vcfw- prefix throughout. Full WP.org audit passed. Recommended update.<\/p>","1.8.2":"<p>New button controls: height, font size, border radius, border style. Live preview in admin.<\/p>","1.8.1":"<p>AJAX save added (no reload). Active tab contrast fix. Mode switcher redesign.<\/p>","1.8.0":"<p>Major UI overhaul front and admin. Renamed to Variation Cards for WooCommerce.<\/p>"},"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.9.3"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Card-based variation grid with note badge, card icons, and selected state.","2":"Live order summary table with Grand Total and Clear All button.","3":"Payment panel with icons.","4":"Admin settings page -- Colors and Theme tab.","5":"Admin settings page -- Badge Manager tab.","6":"Admin settings page -- Payment Icons tab.","7":"Admin settings page -- Layout tab with column width slider.","8":"Product edit screen -- Feature Badges meta box.","9":"Product edit screen -- Variation Card Icon field.","10":"Mobile view -- stacked single-column layout."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[262764,24155,24101,18228,286],"plugin_category":[45],"plugin_contributors":[262765],"plugin_business_model":[],"class_list":["post-308951","plugin","type-plugin","status-publish","hentry","plugin_tags-card-grid","plugin_tags-dark-theme","plugin_tags-product-page","plugin_tags-variation","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-wpthemeprime","plugin_committers-wpthemeprime"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/cardgrid-for-woocommerce.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p><strong>CardGrid for WooCommerce<\/strong> transforms the standard WooCommerce single-product page into a high-converting, card-based experience.<\/p>\n\n<p>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 \u2014 all without a page reload.<\/p>\n\n<h4>Key Features<\/h4>\n\n<p><strong>Card-Based Variation Grid<\/strong><\/p>\n\n<ul>\n<li>Every variation is a clickable card \u2014 no more dropdowns.<\/li>\n<li>Custom icon \/ logo displayed inside each card (e.g. ChatGPT, Adobe logo).<\/li>\n<li>Note badge (pill-shaped) displayed in the top-left of each card.<\/li>\n<li>Cards show a selected state (border glow + checkmark animation).<\/li>\n<li>Sale ribbons for discounted variations.<\/li>\n<li>Out-of-stock cards are visually dimmed and non-clickable.<\/li>\n<\/ul>\n\n<p><strong>Smart Quantity Logic<\/strong><\/p>\n\n<ul>\n<li>When quantity = 1: a trash icon is shown. Clicking it deselects the card and removes it from the summary.<\/li>\n<li>When quantity &gt; 1: the trash icon automatically becomes a minus button for decreasing quantity.<\/li>\n<\/ul>\n\n<p><strong>Live Order Summary<\/strong><\/p>\n\n<ul>\n<li>Real-time table showing Package, Rate x Qty, and Line Total.<\/li>\n<li>Grand Total updates instantly.<\/li>\n<li>\"Clear All\" button with configurable colour and hover state.<\/li>\n<\/ul>\n\n<p><strong>Per-Product Feature Badges<\/strong><\/p>\n\n<ul>\n<li>Up to 5 customisable feature badges per product (icon + text).<\/li>\n<li>Drag-to-reorder via the product edit screen.<\/li>\n<li>Empty slots are automatically hidden on the front end.<\/li>\n<\/ul>\n\n<p><strong>5 Layout Templates<\/strong><\/p>\n\n<ul>\n<li>Subscription \/ Digital -- hero image, identity bar, feature pills.<\/li>\n<li>Service Package -- service banner, what's included checklist, portfolio gallery.<\/li>\n<li>Software \/ License -- big product icon, version badges, feature grid, screenshots.<\/li>\n<li>Wholesale \/ Bulk -- multi-image gallery with thumbnails, specs table.<\/li>\n<li>Event \/ Course -- event banner, date\/location badges, curriculum list, seats progress bar.<\/li>\n<li>Per-product layout override from the product edit sidebar.<\/li>\n<\/ul>\n\n<p><strong>Column Width Control<\/strong><\/p>\n\n<ul>\n<li>Admin slider (30-60%) to set the left column width.<\/li>\n<li>Right column (packages + payment) takes the remaining width.<\/li>\n<\/ul>\n\n<p><strong>UI Label Overrides<\/strong><\/p>\n\n<ul>\n<li>7 front-end text labels are overridable from the settings page without editing code.<\/li>\n<\/ul>\n\n<p><strong>PPOM &amp; Third-Party Plugin Compatibility<\/strong><\/p>\n\n<ul>\n<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>\n<li>Default WooCommerce variation dropdowns and add-to-cart button are hidden to avoid duplication.<\/li>\n<\/ul>\n\n<p><strong>AJAX Multi-Item Add to Cart<\/strong><\/p>\n\n<ul>\n<li>Adds multiple variation packages in a single AJAX request.<\/li>\n<li>No page reload.<\/li>\n<li>Configurable post-purchase redirect: Cart, Checkout, or Stay on Page.<\/li>\n<\/ul>\n\n<p><strong>Fully Responsive<\/strong><\/p>\n\n<ul>\n<li>Two-column layout on desktop.<\/li>\n<li>Single-column stacked layout on mobile.<\/li>\n<\/ul>\n\n<p><strong>Translation Ready<\/strong><\/p>\n\n<ul>\n<li>All strings use __() \/ _e() with the cardgrid-for-woocommerce text domain.<\/li>\n<li>.pot template included.<\/li>\n<\/ul>\n\n<h4>Use Cases<\/h4>\n\n<ul>\n<li>Digital product subscriptions (ChatGPT, Adobe, streaming services)<\/li>\n<li>SaaS licence packages<\/li>\n<li>Service bundles (1 Month \/ 3 Month \/ 12 Month)<\/li>\n<li>Any WooCommerce store selling variable products in Bangladesh or globally<\/li>\n<\/ul>\n\n<h3>Privacy Policy<\/h3>\n\n<p>This plugin does not collect or transmit any personal data. It does not use cookies. No third-party services are contacted.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Download the plugin ZIP.<\/li>\n<li>In your WordPress dashboard go to Plugins &gt; Add New &gt; Upload Plugin.<\/li>\n<li>Choose the ZIP file and click Install Now.<\/li>\n<li>Click Activate Plugin.<\/li>\n<li>Go to Variation Engine in the WordPress sidebar.<\/li>\n<li>Configure your colours, badge, payment icons, and checkout behaviour.<\/li>\n<li>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.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20it%20work%20with%20simple%20products%3F\"><h3>Does it work with simple products?<\/h3><\/dt>\n<dd><p>Yes. Simple products show a single card.<\/p><\/dd>\n<dt id=\"will%20my%20ppom%20%2F%20wc%20add-ons%20fields%20still%20appear%3F\"><h3>Will my PPOM \/ WC Add-ons fields still appear?<\/h3><\/dt>\n<dd><p>Yes. The plugin outputs all fields registered on woocommerce_before_add_to_cart_button inside a dedicated wrapper above the Order Now button.<\/p><\/dd>\n<dt id=\"is%20the%20plugin%20translation%20ready%3F\"><h3>Is the plugin translation ready?<\/h3><\/dt>\n<dd><p>Yes. All strings use the cardgrid-for-woocommerce text domain. A .pot file is included in the languages\/ directory.<\/p><\/dd>\n<dt id=\"can%20i%20customise%20the%20colours%3F\"><h3>Can I customise the colours?<\/h3><\/dt>\n<dd><p>Yes. The settings page (Variation Engine &gt; 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.<\/p><\/dd>\n<dt id=\"can%20i%20change%20the%20layout%20for%20one%20specific%20product%3F\"><h3>Can I change the layout for one specific product?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt id=\"does%20it%20conflict%20with%20page%20builders%20like%20elementor%3F\"><h3>Does it conflict with page builders like Elementor?<\/h3><\/dt>\n<dd><p>All CSS classes use the vcfw- prefix to avoid conflicts. Known Elementor font CORS issues are automatically resolved on product pages.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.9.3<\/h4>\n\n<p>Renamed to WPThemePrime Variation Cards for WooCommerce. All inline CSS converted to wp_add_inline_style(). PHP syntax fix. WP.org reviewer issues resolved.<\/p>\n\n<h4>1.9.2<\/h4>\n\n<p>SVG output sanitized with wp_kses(). Stylesheet enqueue fixed. Tested up to WP 6.9.<\/p>\n\n<h4>1.9.1<\/h4>\n\n<p>Plugin Check errors fixed: translators comments, escaping, upgrade notice lengths.<\/p>\n\n<h4>1.9.0<\/h4>\n\n<ul>\n<li>Major: Complete prefix rebrand \u2014 all internal code migrated from aiwbd- to vcfw- (Variation Cards For WooCommerce).<\/li>\n<li>Changed: All PHP classes renamed VCFW_* (was AIWbd_VE_*).<\/li>\n<li>Changed: All PHP constants renamed VCFW_* (was AIWBD_VE_*).<\/li>\n<li>Changed: All CSS classes renamed vcfw-* (was aiwbd-*).<\/li>\n<li>Changed: All CSS variables renamed --vcfw-* (was --aiwbd-*).<\/li>\n<li>Changed: All JS selectors and references updated to vcfw-.<\/li>\n<li>Changed: All file names renamed from aiwbd-ve-* to vcfw-*.<\/li>\n<li>Audit: 0 deprecated functions, 0 hardcoded paths, 0 dangerous code, 315+ escaping calls verified.<\/li>\n<\/ul>\n\n<h4>1.8.2<\/h4>\n\n<ul>\n<li>New: Button height control (40\u201380px range slider).<\/li>\n<li>New: Button font size control (12\u201324px range slider).<\/li>\n<li>New: Button border radius control (0\u201340px range slider).<\/li>\n<li>New: Button border width, style (solid\/dashed\/dotted\/double), and color controls.<\/li>\n<li>New: Live preview panel for the order button \u2014 shows changes instantly before saving.<\/li>\n<\/ul>\n\n<h4>1.8.1<\/h4>\n\n<ul>\n<li>New: AJAX save \u2014 settings now save instantly without page reload, with toast notification.<\/li>\n<li>Fix: Active sub-tab (Global\/Cards\/etc) text visibility \u2014 stronger gradient contrast, white text now readable.<\/li>\n<li>Fix: Mode switcher (Light\/Auto\/Dark) redesigned with proper card layout, icons, and active state.<\/li>\n<li>Improved: Save button centered with better spacing and loading spinner animation.<\/li>\n<li>Improved: Admin color groups now have card-style presentation with hover effects.<\/li>\n<\/ul>\n\n<h4>1.8.0<\/h4>\n\n<ul>\n<li>Renamed: Plugin renamed to \"Variation Cards for WooCommerce\" for WordPress.org SEO.<\/li>\n<li>Major: Front-end visual overhaul \u2014 modern card design with top accent bar, stronger price hierarchy (1.4rem), gradient selected state, polished summary box.<\/li>\n<li>Major: Admin redesigned \u2014 cleaner color groups, better tab navigation, fixed empty-space tabs with helper info cards, payment row UX cleanup.<\/li>\n<li>New: Default theme switched from red to indigo to match shipped CSS (no more new-install color mismatch).<\/li>\n<li>Fix: Layout card icons now render as SVG (was rendering \"subscription\"\/\"service\"\/\"wholesale\" as text).<\/li>\n<li>Fix: Settings save bug for column width and 7 UI label override fields.<\/li>\n<li>Fix: JSON corruption bug in AJAX add-to-cart handler.<\/li>\n<li>Fix: Order button \"red\" hover override removed \u2014 now consistently uses indigo accent.<\/li>\n<li>Fix: Missing _vcfw_left_layout cleanup on uninstall.<\/li>\n<li>Improved: PPOM third-party fields styled to match plugin theme (was raw browser default).<\/li>\n<li>Improved: SSL note green color for trust signal (color psychology).<\/li>\n<li>Improved: Mobile layout \u2014 2-col card grid, tighter spacing.<\/li>\n<\/ul>\n\n<h4>1.7.1<\/h4>\n\n<ul>\n<li>New: Column width admin slider (30-60%) to control the left\/right column split.<\/li>\n<li>New: 7 UI label overrides -- translate or rename any front-end text label without editing code.<\/li>\n<li>Changed: All admin emoji icons replaced with inline SVGs for better cross-platform rendering.<\/li>\n<\/ul>\n\n<h4>1.7.0<\/h4>\n\n<ul>\n<li>New: Meta box CSS improvements.<\/li>\n<li>Changed: Admin emoji icons replaced with SVG in key areas.<\/li>\n<\/ul>\n\n<h4>1.6.9<\/h4>\n\n<ul>\n<li>Improved: Summary box visual polish and spacing.<\/li>\n<li>Changed: Default desktop grid ratio set to 37\/62 split.<\/li>\n<\/ul>\n\n<h4>1.6.8<\/h4>\n\n<ul>\n<li>Fix: Permanent fix for sanitize_key() corrupting variation attribute keys causing \"X is a required field\" error.<\/li>\n<li>Fix: Nonce verification now accepts previous-tick nonce for cached pages.<\/li>\n<\/ul>\n\n<h4>1.6.7<\/h4>\n\n<ul>\n<li>Fix: Bug in variation attribute key sanitization that prevented add-to-cart.<\/li>\n<\/ul>\n\n<h4>1.6.6<\/h4>\n\n<ul>\n<li>Fix: Toast notification CSS was missing -- success\/error messages now display correctly.<\/li>\n<\/ul>\n\n<h4>1.6.5<\/h4>\n\n<ul>\n<li>Fix: WooCommerce stale error notices cleared before AJAX add-to-cart.<\/li>\n<li>Improved: Product image section made more compact.<\/li>\n<\/ul>\n\n<h4>1.6.4<\/h4>\n\n<ul>\n<li>New: AJAX response now carries live cart and checkout URLs from the WC session.<\/li>\n<\/ul>\n\n<h4>1.6.3<\/h4>\n\n<ul>\n<li>New: Configurable post-add-to-cart redirect -- Cart, Checkout, or Stay on Page.<\/li>\n<\/ul>\n\n<h4>1.6.2<\/h4>\n\n<ul>\n<li>Fix: Astra theme button CSS specificity override.<\/li>\n<\/ul>\n\n<h4>1.6.0<\/h4>\n\n<ul>\n<li>New: Modern UI refresh with Indigo accent colour as new default.<\/li>\n<li>New: Dequeue conflicting assets -- Elementor CORS font issues and sticky-add-to-cart JS crashes resolved automatically.<\/li>\n<\/ul>\n\n<h4>1.5.2<\/h4>\n\n<ul>\n<li>Fix: Admin CSS 22 missing style rules added.<\/li>\n<li>Fix: Simple product add-to-cart via AJAX now works correctly.<\/li>\n<\/ul>\n\n<h4>1.4.9<\/h4>\n\n<ul>\n<li>New: Lightbox for product images.<\/li>\n<li>Fix: Admin light mode visual corrections.<\/li>\n<li>Fix: Empty section guard prevents blank divs from rendering.<\/li>\n<\/ul>\n\n<h4>1.3.9<\/h4>\n\n<ul>\n<li>New: 5 layout templates -- Subscription, Service, Software, Wholesale, Event.<\/li>\n<li>New: 3-section DOM structure with mobile-first reorder.<\/li>\n<\/ul>\n\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>New: Dark \/ Light \/ Auto page mode.<\/li>\n<li>New: 21 CSS custom properties for full theme control.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Card-based variation grid with per-card icons.<\/li>\n<li>Smart trash\/minus quantity logic.<\/li>\n<li>Pill-shaped note badge inside each variation card.<\/li>\n<li>Per-product feature badge meta box.<\/li>\n<li>PPOM and third-party field compatibility.<\/li>\n<li>AJAX multi-item add-to-cart with nonce security.<\/li>\n<li>Tabbed admin settings panel.<\/li>\n<li>Keyboard accessibility on variation cards.<\/li>\n<li>HPOS compatibility declaration.<\/li>\n<\/ul>","raw_excerpt":"Replace the default WooCommerce product page with a professional card-based variation grid, live order summary, and a modern payment panel.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/308951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=308951"}],"author":[{"embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpthemeprime"}],"wp:attachment":[{"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=308951"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=308951"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=308951"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=308951"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=308951"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=308951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}