Description

SH Product Grid & List Widget is a lightweight, performance-optimized WordPress plugin designed to display WooCommerce products in grid, masonry, or list layouts with seamless backend-driven skeleton loading (no front-end skeleton rendering bloat).

Key Features:
* Backend Skeleton & Spinner Support: Eliminates front-end skeleton rendering overhead by leveraging backend-generated skeletons; fully compatible with spinner loading animation.
* Optimized AJAX Handling: Fixes common AJAX non-triggering issues (e.g., missing nonce validation, disabled AJAX config) and enforces AJAX execution for non-Elementor edit modes.
* Smooth Transitions: Differentiated transition durations for grid (200ms) and list (100ms) layouts to prevent list layout transition lag; skips redundant spinner removal logic for non-spinner loading modes.
* AJAX Pagination: Core pagination logic with page switching, total items/pages display, and seamless product re-rendering without page reloads.
* Layout Alignment: Ensures list layout styling matches backend skeleton styles (left image + right content, compact content layout, button alignment to bottom).
* Elementor Compatibility: Detects Elementor edit mode for style adaptation (no AJAX disabling, only visual layout adjustment).
* Responsive Fixes: Resolves skeleton/ product grid column misalignment on viewport resize; enforces single column for list layout across all devices.
* Quick View Integration: Seamless Quick View modal trigger for product images (with lazy loading support).
* Masonry Layout: Supports responsive masonry product layout with equal height column balancing.

Source Code

All original, unminified, source files are included in the plugin:

JavaScript Source: /assets/src/
SCSS Source: /assets/src/scss/

Minified files in /assets/build/ are generated directly from these source files.
No obfuscated or external closed-source code is used.

Screenshots

Installation

Upload the sh-product-grid-list-widget folder to the /wp-content/plugins/ directory.
Activate the plugin through the ‘Plugins’ menu in WordPress.
No additional configuration is required by default; the widget will auto-initialize on elements with the .shpc-skeleton-grid class.
For Elementor users: Add the widget to your layout (ensure the widget has valid data-settings and data-nonce attributes for AJAX functionality).

FAQ

Q: Why is AJAX not triggering for the product widget?
A: AJAX only fails if: (1) The security nonce is missing (check data-nonce attribute on the widget container); (2) The site is in Elementor edit mode (AJAX is disabled for style preview only). The plugin enforces AJAX enablement by default.

Q: How to fix slow list layout transitions?
A: The plugin automatically shortens list layout transition duration to 100ms (vs 200ms for grid) and skips redundant spinner removal logic for non-spinner loading modes. No manual adjustments are needed.

Q: How to enable pagination for the product widget?
A: Set the enable_pagination config to yes (via data-settings attribute on the widget container). The plugin will render pagination controls (previous/next page, page numbers, total items/pages) adjacent to the loading container.

Q: Does the plugin support custom product layouts?
A: Yes. The plugin supports grid, masonry, and list layouts. To switch layouts, update the layout parameter in the widget’s data-settings (values: grid, masonry, list).

Q: Is the plugin compatible with WooCommerce?
A: Yes. The plugin fully supports WooCommerce product data (product name, price, category, image, short description, and add-to-cart functionality).

Reviews

There are no reviews for this plugin.

Contributors & Developers

“SH Product Grid & List Widget” is open source software. The following people have contributed to this plugin.

shawnhills

“SH Product Grid & List Widget” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “SH Product Grid & List Widget” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0.0

Initial release
Remove front-end skeleton loader rendering (leverage backend-generated skeletons)
Fix AJAX non-triggering issues (enforce nonce validation, auto-enable AJAX)
Resolve skeleton/product grid column misalignment on viewport resize
Add core AJAX pagination logic (page switching, pagination stats, redundant pagination cleanup)
Implement list layout styling alignment with backend skeleton
Optimize smooth transitions (differentiate grid/list durations, skip non-spinner redundant processing)
Add Elementor edit mode detection (style adaptation without AJAX disabling)
Integrate Quick View functionality for product images
Support responsive masonry layout with column balancing
Add detailed debug logging for spinner/skeleton removal and AJAX execution
Fix image stretching in list layout (use object-fit: contain for image rendering)
Reduce redundant DOM operations and nested timeouts for better performance