Description
Custom animated product grid plugin for WooCommerce. Includes grid,
masonry and carousel layouts, AJAX filters/pagination, quick-view modal,
animated add-to-cart (mini-cart auto-refresh), wishlist, and compare.
When Elementor is active, a « WC Custom Grid » widget appears in the widget
panel under the « WC Custom Grid » category — search for « wc custom grid »
or « products » to drag and drop it. The shortcode also works (see below);
both options are available.
Features
- Grid / Masonry / Carousel layouts, switchable with a single shortcode attribute
- Category, product-tag, price-range and sort filters — all AJAX (no page reload)
- « Load more » AJAX pagination
- Quick View modal: image, description, price, variations, and Add to Cart
- Animated Add to Cart: hover lift, pulse-glow on success, mini-cart
fragment refresh (compatible with WooCommerce’sadded_to_cartevent) - Wishlist: works for both guest and logged-in users via WooCommerce customer
session; for logged-in users the list is also persisted to user meta so
it survives session changes - Compare: up to 4 products, stored in WooCommerce customer session,
sticky bottom bar + side-by-side table modal - Sale badge, out-of-stock badge, and star rating — all pulled from WooCommerce data
This plugin requires WooCommerce to be installed and active.
Shortcode Options
[wccg_grid
layout="grid" -> grid | masonry | carousel
columns="3" -> number of columns on desktop (auto-responsive on mobile)
per_page="9" -> products shown on first load
category="shoes,bags" -> comma-separated category slugs (leave empty for all)
orderby="popularity" -> popularity | date | price | price-desc | rating
show_filters="yes" -> show category + price + sort filter bar
show_price_filter="yes" -> show price range slider
show_tag_filter="yes" -> show product tag filter
title="Bestsellers"
subtitle="Our top products"
]
Installation
- Upload the
smart-product-gridfolder via WordPress admin > Plugins > Add New > Upload Plugin. - Activate the plugin. WooCommerce must be active — an admin notice will appear if it is not.
Add the shortcode to any page or post:
[wccg_grid title= »Bestsellers » subtitle= »Our top products »]
FAQ
-
Does the plugin load GSAP from a CDN?
-
No. All JavaScript, including the animation layer, is bundled locally in
assets/js/. The animations gracefully degrade — if the script fails to
load, everything else continues to work. -
The wishlist table was not created.
-
The wishlist table (
{prefix}_wccg_wishlist) is created on plugin activation
viadbDelta(). If you updated the plugin while it was already active,
deactivate and re-activate once to run the activation hook. -
How do I change the accent color?
-
Open
assets/css/style.cssand change the--wccg-accentCSS custom
property near the top of the file. If you are using the Elementor widget,
the « Accent color » control in the Card style section handles this without
editing any file.
Avis
Il n’y a aucun avis pour cette extension.
Contributeurs/contributrices & développeurs/développeuses
« Smart Product Grid » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.
ContributeursTraduisez « Smart Product Grid » dans votre langue.
Le développement vous intéresse ?
Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.
Journal des modifications
1.0.0
- Initial release.


