FAIR

Federated and Independent Repositories

Code7x Product Card Design for WooCommerce

Plugin Banner

Code7x Product Card Design for WooCommerce

by Ankit

Download
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"]
  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.
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.
Back to top