描述
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"]
安装
- Upload the
code7x-product-card-design-for-woocommercefolder to/wp-content/plugins/. - Activate the plugin through the ‘Plugins’ menu in WordPress.
- Make sure WooCommerce is installed and active.
- 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.
常见问题
-
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.
评价
此插件暂无评价。
贡献者及开发者
更新日志
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.