Smart Product Grid

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’s added_to_cart event)
  • 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"
]

Captures d’écrans

Installation

  1. Upload the smart-product-grid folder via WordPress admin > Plugins > Add New > Upload Plugin.
  2. Activate the plugin. WooCommerce must be active — an admin notice will appear if it is not.
  3. 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
via dbDelta(). 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.css and change the --wccg-accent CSS 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.

Contributeurs

Traduisez « 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.