{"id":289133,"date":"2026-04-17T12:09:01","date_gmt":"2026-04-17T12:09:01","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/sh-product-grid-list-widget\/"},"modified":"2026-04-17T12:11:45","modified_gmt":"2026-04-17T12:11:45","slug":"sh-product-grid-list-widget","status":"publish","type":"plugin","link":"https:\/\/en-za.wordpress.org\/plugins\/sh-product-grid-list-widget\/","author":23464285,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"1.0.0","tested":"6.9.4","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"SH Product Grid & List Widget","header_author":"Shawn Hills","header_description":"High-performance product grid & list widget for WordPress with skeleton loading, AJAX pagination, and Elementor compatibility. Resolves common AJAX and layout issues.","assets_banners_color":"0e5293","last_updated":"2026-04-17 12:11:45","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/profiles.wordpress.org\/shawnhills\/","header_author_uri":"https:\/\/profiles.wordpress.org\/shawnhills","rating":0,"author_block_rating":0,"active_installs":0,"downloads":68,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"shawnhills","date":"2026-04-17 12:11:45"}},"upgrade_notice":{"1.0.0":"<p>Initial release. No upgrade steps required.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3508922,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3508922,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3508853,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3508853,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3508859,"resolution":"1","location":"assets","locale":""}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[5910,76538,51244,606,260450],"plugin_category":[],"plugin_contributors":[],"plugin_business_model":[],"class_list":["post-289133","plugin","type-plugin","status-publish","hentry","plugin_tags-ajax-pagination","plugin_tags-elementor","plugin_tags-product-grid","plugin_tags-responsive","plugin_tags-skeleton-loader","plugin_committers-shawnhills"],"banners":{"banner":"https:\/\/ps.w.org\/sh-product-grid-list-widget\/assets\/banner-772x250.png?rev=3508853","banner_2x":"https:\/\/ps.w.org\/sh-product-grid-list-widget\/assets\/banner-1544x500.png?rev=3508853","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/sh-product-grid-list-widget\/assets\/icon-128x128.png?rev=3508922","icon_2x":"https:\/\/ps.w.org\/sh-product-grid-list-widget\/assets\/icon-256x256.png?rev=3508922","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/sh-product-grid-list-widget\/assets\/screenshot-1.png?rev=3508859","caption":""}],"raw_content":"<!--section=description-->\n<p>SH Product Grid &amp; 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).<\/p>\n\n<p>Key Features:\n* <strong>Backend Skeleton &amp; Spinner Support<\/strong>: Eliminates front-end skeleton rendering overhead by leveraging backend-generated skeletons; fully compatible with spinner loading animation.\n* <strong>Optimized AJAX Handling<\/strong>: Fixes common AJAX non-triggering issues (e.g., missing nonce validation, disabled AJAX config) and enforces AJAX execution for non-Elementor edit modes.\n* <strong>Smooth Transitions<\/strong>: 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.\n* <strong>AJAX Pagination<\/strong>: Core pagination logic with page switching, total items\/pages display, and seamless product re-rendering without page reloads.\n* <strong>Layout Alignment<\/strong>: Ensures list layout styling matches backend skeleton styles (left image + right content, compact content layout, button alignment to bottom).\n* <strong>Elementor Compatibility<\/strong>: Detects Elementor edit mode for style adaptation (no AJAX disabling, only visual layout adjustment).\n* <strong>Responsive Fixes<\/strong>: Resolves skeleton\/ product grid column misalignment on viewport resize; enforces single column for list layout across all devices.\n* <strong>Quick View Integration<\/strong>: Seamless Quick View modal trigger for product images (with lazy loading support).\n* <strong>Masonry Layout<\/strong>: Supports responsive masonry product layout with equal height column balancing.<\/p>\n\n<h3>Source Code<\/h3>\n\n<p>All original, unminified, source files are included in the plugin:<\/p>\n\n<ul>\n<li>JavaScript Source: \/assets\/src\/<\/li>\n<li>SCSS Source: \/assets\/src\/scss\/<\/li>\n<\/ul>\n\n<p>Minified files in <code>\/assets\/build\/<\/code> are generated directly from these source files.\nNo obfuscated or external closed-source code is used.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>sh-product-grid-list-widget<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory. <\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n<li>No additional configuration is required by default; the widget will auto-initialize on elements with the <code>.shpc-skeleton-grid<\/code> class.<\/li>\n<li>For Elementor users: Add the widget to your layout (ensure the widget has valid <code>data-settings<\/code> and <code>data-nonce<\/code> attributes for AJAX functionality).<\/li>\n<\/ol>\n\n<!--section=faq-->\n<p>Q: Why is AJAX not triggering for the product widget?\nA: AJAX only fails if: (1) The security nonce is missing (check <code>data-nonce<\/code> 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.<\/p>\n\n<p>Q: How to fix slow list layout transitions?\nA: 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.<\/p>\n\n<p>Q: How to enable pagination for the product widget?\nA: Set the <code>enable_pagination<\/code> config to <code>yes<\/code> (via <code>data-settings<\/code> attribute on the widget container). The plugin will render pagination controls (previous\/next page, page numbers, total items\/pages) adjacent to the loading container.<\/p>\n\n<p>Q: Does the plugin support custom product layouts?\nA: Yes. The plugin supports grid, masonry, and list layouts. To switch layouts, update the <code>layout<\/code> parameter in the widget's <code>data-settings<\/code> (values: <code>grid<\/code>, <code>masonry<\/code>, <code>list<\/code>).<\/p>\n\n<p>Q: Is the plugin compatible with WooCommerce?\nA: Yes. The plugin fully supports WooCommerce product data (product name, price, category, image, short description, and add-to-cart functionality).<\/p>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<li>Remove front-end skeleton loader rendering (leverage backend-generated skeletons)<\/li>\n<li>Fix AJAX non-triggering issues (enforce nonce validation, auto-enable AJAX)<\/li>\n<li>Resolve skeleton\/product grid column misalignment on viewport resize<\/li>\n<li>Add core AJAX pagination logic (page switching, pagination stats, redundant pagination cleanup)<\/li>\n<li>Implement list layout styling alignment with backend skeleton<\/li>\n<li>Optimize smooth transitions (differentiate grid\/list durations, skip non-spinner redundant processing)<\/li>\n<li>Add Elementor edit mode detection (style adaptation without AJAX disabling)<\/li>\n<li>Integrate Quick View functionality for product images<\/li>\n<li>Support responsive masonry layout with column balancing<\/li>\n<li>Add detailed debug logging for spinner\/skeleton removal and AJAX execution<\/li>\n<li>Fix image stretching in list layout (use <code>object-fit: contain<\/code> for image rendering)<\/li>\n<li>Reduce redundant DOM operations and nested timeouts for better performance<\/li>\n<\/ul>","raw_excerpt":"Short Description: High-performance product grid &amp; list widget with AJAX pagination, backend skeleton loading, and full Elementor integration.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/289133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=289133"}],"author":[{"embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/shawnhills"}],"wp:attachment":[{"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=289133"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=289133"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=289133"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=289133"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=289133"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/en-za.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=289133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}