Title: Code7x Product Card Design for WooCommerce Author: Ankit Published: 11 August 2026 Last modified: 13 August 2026 --- Search plugins ![](https://ps.w.org/code7x-product-card-design-for-woocommerce/assets/banner-772x250. png?rev=3645975) ![](https://ps.w.org/code7x-product-card-design-for-woocommerce/assets/icon-256x256. png?rev=3642478) # Code7x Product Card Design for WooCommerce By [Ankit](https://profiles.wordpress.org/code7x/) [Download](https://downloads.wordpress.org/plugin/code7x-product-card-design-for-woocommerce.1.0.2.zip) * [Details](https://en-gb.wordpress.org/plugins/code7x-product-card-design-for-woocommerce/#description) * [Reviews](https://en-gb.wordpress.org/plugins/code7x-product-card-design-for-woocommerce/#reviews) * [Installation](https://en-gb.wordpress.org/plugins/code7x-product-card-design-for-woocommerce/#installation) * [Development](https://en-gb.wordpress.org/plugins/code7x-product-card-design-for-woocommerce/#developers) [Support](https://wordpress.org/support/plugin/code7x-product-card-design-for-woocommerce/) ## Description Code7x Product Card Design for WooCommerce lets you display products as fully styleable card grids or touch-friendly carousels, using a shortcode or a dedicated Elementor widget. **Product sources (queries):** * Recent products * Featured products * Popular / best selling * Top rated * On sale * Random * Specific category * Manual product ID selection **Layouts:** * Responsive grid (independent column counts for desktop / tablet / mobile) * Touch-swipe carousel with autoplay, arrows, and dots **Card designs:** * Standard * Image overlay * Minimal / borderless * Modern * Modern 2 Minimal (Ultra-clean rounded container with 1:1 image, translucent glassmorphic wishlist heart, gold accent pricing, and circular plus action button) **Widgets & Integration:** * **Woo Cards Widget**: Full product grid & carousel widget. * **Wishlist Listing Widget**: Display shopper browser-saved wishlist items.*** Category Showcase Widget**: Drag-and-drop Elementor widget to display custom WooCommerce category cards with background images, custom links, and responsive grid controls. **Key Features:** * **Zero Layout Shift AJAX Add to Cart**: Suppresses default DOM link shifts for instant, smooth add-to-cart clicks across all card designs. *** Top-Left Floating “View Cart ” Pill**: Displays a slick floating dark badge in the upper corner immediately after adding a product to cart. * **Per-field toggles:** image, sale badge, category, title, rating, price, short description, add-to-cart button. * **Style controls:** card background, border, radius, shadow, title/price/ category/rating colors, button colors (including hover), and typography (via Elementor). #### Shortcode ``` [code7x_product_cards query_type="featured" layout="carousel" per_page="8" columns="4" design="overlay"] ``` ## Installation 1. Upload the `code7x-product-card-design-for-woocommerce` folder to `/wp-content/ plugins/`. 2. Activate the plugin through the ‘Plugins’ menu in WordPress. 3. Make sure WooCommerce is installed and active. 4. Go to **Code7x Product Cards** in the admin menu to set global defaults, or drag the **Woo Cards** or **Category Showcase** widgets onto any Elementor page. ## FAQ ### Does this work without Elementor? Yes. The `[code7x_product_cards]` shortcode works anywhere shortcodes are supported. The Elementor widgets are an additional, optional way to configure options visually. ### Is it mobile friendly? Yes, grid and carousel column counts are independently configurable for desktop, tablet, and mobile, and the carousel supports touch swipe. ## Reviews There are no reviews for this plugin. ## Contributors and Developers “Code7x Product Card Design for WooCommerce” is open source software. The following people have contributed to this plugin. Contributors * [ Ankit ](https://profiles.wordpress.org/code7x/) [Translate “Code7x Product Card Design for WooCommerce” into your language.](https://translate.wordpress.org/projects/wp-plugins/code7x-product-card-design-for-woocommerce) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/code7x-product-card-design-for-woocommerce/), check out the [SVN repository](https://plugins.svn.wordpress.org/code7x-product-card-design-for-woocommerce/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/code7x-product-card-design-for-woocommerce/) by [RSS](https://plugins.trac.wordpress.org/log/code7x-product-card-design-for-woocommerce/?limit=100&mode=stop_on_copy&format=rss). ## Change Log #### 1.0.2 * Feature: Added new “Modern 2 Minimal” card preset with 1:1 rounded image ratio, glassmorphic wishlist heart, and circular plus button. * Feature: Added new Elementor Category Showcase Card Widget with static images, custom links, and responsive grid controls. * Feature: Added top-left floating “View Cart ” pill badge notification on AJAX add-to-cart. * Improvement: Implemented Zero Layout Shift AJAX add-to-cart system for seamless, jump-free button clicks. * Integration: Added full Elementor editor and global settings support for Modern 2 Minimal preset. #### 1.0.1 * Initial release of Code7x Product Card Design for WooCommerce. * Added custom product card grids and touch carousels. * Added variation swatches and browser-based wishlist support. * Added native Elementor widget integration. ## Meta * Version **1.0.2** * Last updated **2 months ago** * Active installations **10+** * WordPress version ** 5.8 or higher ** * Tested up to **7.0.7** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/code7x-product-card-design-for-woocommerce/) * Tags * [elementor](https://en-gb.wordpress.org/plugins/tags/elementor/)[product cards](https://en-gb.wordpress.org/plugins/tags/product-cards/) [product carousel](https://en-gb.wordpress.org/plugins/tags/product-carousel/) [Product Grid](https://en-gb.wordpress.org/plugins/tags/product-grid/)[woocommerce](https://en-gb.wordpress.org/plugins/tags/woocommerce/) * [Advanced View](https://en-gb.wordpress.org/plugins/code7x-product-card-design-for-woocommerce/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/code7x-product-card-design-for-woocommerce/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/code7x-product-card-design-for-woocommerce/reviews/) ## Contributors * [ Ankit ](https://profiles.wordpress.org/code7x/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/code7x-product-card-design-for-woocommerce/)