
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"]