Code7x Product Card Design for WooCommerce
| 开发者 | Code7x |
|---|---|
| 更新时间 | 2026年8月14日 02:01 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.0 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
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).
[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.
- 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.