{"id":376166,"date":"2026-11-01T11:33:31","date_gmt":"2026-11-01T11:33:31","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/productify-product-grids-lists-showcases-for-woocommerce\/"},"modified":"2026-11-01T14:51:09","modified_gmt":"2026-11-01T14:51:09","slug":"shopshelf","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/shopshelf\/","author":21102884,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.1.0","stable_tag":"1.1.0","tested":"7.1.4","requires":"5.7","requires_php":"7.4","requires_plugins":null,"header_name":"ShopShelf \u2013 Product Grid & Carousel for WooCommerce","header_author":"Sakhawat Hossain","header_description":"Showcase WooCommerce products in responsive grids and carousels, with full control over what appears on each product card.","assets_banners_color":"3b1e41","last_updated":"2026-11-01 14:51:09","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/shopshelf\/","header_author_uri":"https:\/\/profiles.wordpress.org\/shshakib2001\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":58,"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":"shshakib2001","date":"2026-11-01 11:33:10","revision":3777923},"1.1.0":{"tag":"1.1.0","author":"shshakib2001","date":"2026-11-01 14:51:09","revision":3778148}},"upgrade_notice":{"1.1.0":"<p>Adds Custom CSS &amp; JS and more product filters. Catalog-hidden products are now left out by default, and the Skip First and shopper sort options are removed \u2014 check layouts that relied on them.<\/p>"},"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3777923,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3777943,"resolution":"772x250","location":"assets","locale":"","width":1544,"height":500}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"The layouts list \u2014 every saved showcase, with its shortcode","2":"Editing a layout: preset, filter settings and card content","3":"The live preview","4":"Settings: colour scheme, scripts and styles, accessibility","5":"Tools: sample layouts, settings backup and the system status report"}},"plugin_section":[],"plugin_tags":[33766,51244,51259,10133,286],"plugin_category":[45],"plugin_contributors":[225182],"plugin_business_model":[],"class_list":["post-376166","plugin","type-plugin","status-publish","hentry","plugin_tags-product-carousel","plugin_tags-product-grid","plugin_tags-product-showcase","plugin_tags-product-slider","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-shshakib2001","plugin_committers-shshakib2001"],"banners":{"banner":"https:\/\/ps.w.org\/shopshelf\/assets\/banner-772x250.png?rev=3777943","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/shopshelf\/assets\/icon-256x256.png?rev=3777923","icon_2x":"https:\/\/ps.w.org\/shopshelf\/assets\/icon-256x256.png?rev=3777923","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>ShopShelf turns any WooCommerce catalogue into a product showcase you can place anywhere with a shortcode.<\/p>\n\n<p>Build a <strong>layout<\/strong> \u2014 one saved product showcase \u2014 by choosing which products it shows, how they are arranged, and which parts of a product appear on each card. Save it, copy its shortcode, and paste it into any post, page, widget or block.<\/p>\n\n<h4>Two layouts<\/h4>\n\n<ul>\n<li><strong>Grid<\/strong> \u2014 products in rows and columns, with a column count for each of five screen sizes<\/li>\n<li><strong>Carousel<\/strong> \u2014 the same cards on a sliding track, in three modes: Standard, Center and Ticker<\/li>\n<\/ul>\n\n<h4>Choose your products<\/h4>\n\n<ul>\n<li>Draw from all products, or only featured, on-sale, best-selling, top-rated or free ones<\/li>\n<li>Limit to simple, variable, grouped or external products<\/li>\n<li>Show a set number of products<\/li>\n<li>Include only specific products, or exclude specific ones<\/li>\n<li>Filter by product category, tag or any product attribute, with IN \/ AND \/ NOT IN operators<\/li>\n<li>Hide out-of-stock, on-sale, free or image-less products, and show or hide catalog-hidden ones<\/li>\n<li>Sort by date, title, price, popularity, rating, modified date, menu order, ID or at random<\/li>\n<\/ul>\n\n<h4>Let shoppers filter<\/h4>\n\n<ul>\n<li>Live taxonomy filters shown as buttons, a dropdown, radio buttons or checkboxes, with optional product counts<\/li>\n<li>A keyword search box<\/li>\n<li>Everything updates without reloading the page<\/li>\n<\/ul>\n\n<h4>Build the card<\/h4>\n\n<p>Drag the parts of a product card into the order you want and switch off the ones you do not need:<\/p>\n\n<ul>\n<li>Product image, at any registered size or a custom cropped size<\/li>\n<li>Title, with your choice of HTML tag and a length limit<\/li>\n<li>Meta fields \u2014 category or tag, SKU, stock status, stock quantity, units sold, weight, dimensions and date<\/li>\n<li>Description \u2014 the short description, a trimmed description or the full one<\/li>\n<li>Price, with a separate colour for the struck-through regular price<\/li>\n<li>Add to Cart, Read More button or Read More text link<\/li>\n<li>Social share links for Facebook, X (Twitter), LinkedIn, Pinterest and email<\/li>\n<\/ul>\n\n<h4>Make it fit your theme<\/h4>\n\n<ul>\n<li>Columns and gap per screen size, and equal card heights<\/li>\n<li>Card border, corner radius, shadow, background and inner padding<\/li>\n<li>Typography for every text element, with separate sizes for desktop, tablet and mobile<\/li>\n<li>A site-wide colour scheme that every layout falls back to<\/li>\n<li>Custom CSS and JavaScript, kept safe from theme and plugin updates<\/li>\n<li>Pagination for grids: Load More button, AJAX numbered pages, infinite scroll or ordinary page links<\/li>\n<\/ul>\n\n<h4>Carousel controls<\/h4>\n\n<ul>\n<li>Autoplay with pause on hover, speed and infinite loop<\/li>\n<li>Slide, fade, coverflow, cube and flip transitions<\/li>\n<li>Multiple rows, and slides-to-scroll per screen size<\/li>\n<li>Navigation arrows in nine positions, with a choice of icons and colours<\/li>\n<li>Dot or numbered pagination, with dynamic bullets<\/li>\n<li>Keyboard navigation, touch swipe, mouse drag and mouse wheel<\/li>\n<li>Editable screen-reader messages<\/li>\n<\/ul>\n\n<h4>Built to stay out of the way<\/h4>\n\n<ul>\n<li>A live preview while you edit \u2014 including before you save<\/li>\n<li>Templates you can override from your theme<\/li>\n<li>Every setting is scoped to its layout, so two showcases on one page can look completely different<\/li>\n<li>All scripts, styles, icons and fonts are served from your own site<\/li>\n<li>Sample layouts, a settings backup and a system status report under Tools<\/li>\n<li>A built-in Help screen documenting every control<\/li>\n<\/ul>\n\n<h4>Source code<\/h4>\n\n<p>The plugin ships the human-readable source of everything it minifies:<\/p>\n\n<ul>\n<li>Front end: <code>src\/Frontend\/assets\/js\/scripts.js<\/code> and <code>src\/Frontend\/assets\/css\/style.css<\/code> \/ <code>shopshelf-grid.css<\/code> sit beside their <code>.min<\/code> versions.<\/li>\n<li>Admin: the React source of <code>src\/Admin\/assets\/app\/shopshelf-admin-app.js<\/code> is in the <code>shopshelf-admin\/<\/code> folder. To rebuild it, run <code>npm install<\/code> and <code>npm run build<\/code> inside that folder (Node.js 20 or newer).<\/li>\n<\/ul>\n\n<p>Bundled third-party libraries:<\/p>\n\n<ul>\n<li><a href=\"https:\/\/github.com\/nolimits4web\/swiper\">Swiper<\/a> 14.3.0 \u2014 MIT License. Both <code>swiper-bundle.js<\/code> and <code>swiper-bundle.min.js<\/code> are the unmodified files from the official package.<\/li>\n<li><a href=\"https:\/\/icofont.com\/\">IcoFont<\/a> \u2014 the font is licensed under the SIL Open Font License 1.1 and its CSS under the MIT License.<\/li>\n<li>The admin bundle includes <a href=\"https:\/\/github.com\/facebook\/react\">React<\/a>, <a href=\"https:\/\/github.com\/remix-run\/react-router\">React Router<\/a>, <a href=\"https:\/\/github.com\/radix-ui\/primitives\">Radix UI<\/a>, <a href=\"https:\/\/github.com\/lucide-icons\/lucide\">Lucide<\/a>, <a href=\"https:\/\/github.com\/tailwindlabs\/tailwindcss\">Tailwind CSS<\/a>, <a href=\"https:\/\/github.com\/date-fns\/date-fns\">date-fns<\/a>, <a href=\"https:\/\/github.com\/gpbl\/react-day-picker\">React Day Picker<\/a>, <a href=\"https:\/\/github.com\/omgovich\/react-colorful\">react-colorful<\/a>, <a href=\"https:\/\/github.com\/joe-bell\/cva\">class-variance-authority<\/a>, <a href=\"https:\/\/github.com\/lukeed\/clsx\">clsx<\/a> and <a href=\"https:\/\/github.com\/dcastil\/tailwind-merge\">tailwind-merge<\/a>, all under the MIT or ISC licenses. The full list with versions is in <code>shopshelf-admin\/package.json<\/code>.<\/li>\n<\/ul>\n\n<h3>External services<\/h3>\n\n<p>This plugin does not connect to any external service by itself. It loads no remote scripts, styles, fonts or images, and it sends no data anywhere.<\/p>\n\n<p>If you switch on <strong>Social Share<\/strong> for a layout, each product card shows ordinary links to the share pages of the networks you chose. No request is made to any of these services when the page loads. A link is opened only when a visitor clicks that share button, and at that moment the product's public URL and its title are passed to the service in the link's address so the service can prefill the post. No other data is sent by the plugin. What the service does after the visitor arrives there is governed by that service's own terms and privacy policy.<\/p>\n\n<h4>Facebook<\/h4>\n\n<p>Facebook's sharing dialog (<code>https:\/\/www.facebook.com\/sharer\/sharer.php<\/code>), provided by Meta Platforms, lets the visitor post the product link to Facebook. Opened only when the visitor clicks the Facebook share button. Data sent: the product URL.\n<a href=\"https:\/\/www.facebook.com\/legal\/terms\">Terms of Service<\/a> \u00b7 <a href=\"https:\/\/www.facebook.com\/privacy\/policy\/\">Privacy Policy<\/a><\/p>\n\n<h4>X (Twitter)<\/h4>\n\n<p>X's post composer (<code>https:\/\/twitter.com\/intent\/tweet<\/code>, which redirects to x.com), provided by X Corp., lets the visitor post the product link to X. Opened only when the visitor clicks the X share button. Data sent: the product URL and the product title.\n<a href=\"https:\/\/x.com\/en\/tos\">Terms of Service<\/a> \u00b7 <a href=\"https:\/\/x.com\/en\/privacy\">Privacy Policy<\/a><\/p>\n\n<h4>LinkedIn<\/h4>\n\n<p>LinkedIn's share page (<code>https:\/\/www.linkedin.com\/sharing\/share-offsite\/<\/code>), provided by LinkedIn Corporation, lets the visitor share the product link on LinkedIn. Opened only when the visitor clicks the LinkedIn share button. Data sent: the product URL.\n<a href=\"https:\/\/www.linkedin.com\/legal\/user-agreement\">User Agreement<\/a> \u00b7 <a href=\"https:\/\/www.linkedin.com\/legal\/privacy-policy\">Privacy Policy<\/a><\/p>\n\n<h4>Pinterest<\/h4>\n\n<p>Pinterest's pin-creation page (<code>https:\/\/www.pinterest.com\/pin\/create\/button\/<\/code>), provided by Pinterest, Inc., lets the visitor save the product as a pin. Opened only when the visitor clicks the Pinterest share button. Data sent: the product URL and the product title.\n<a href=\"https:\/\/policy.pinterest.com\/en\/terms-of-service\">Terms of Service<\/a> \u00b7 <a href=\"https:\/\/policy.pinterest.com\/en\/privacy-policy\">Privacy Policy<\/a><\/p>\n\n<h4>Email<\/h4>\n\n<p>The Email share button is a <code>mailto:<\/code> link. It opens the visitor's own email application with the product title as the subject and the product URL as the message body. Nothing is sent to any service by the plugin.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Install and activate WooCommerce, if you have not already.<\/li>\n<li>Go to <strong>Plugins \u2192 Add New<\/strong>, search for \"ShopShelf\", and click <strong>Install Now<\/strong> \u2014 or upload the plugin zip there.<\/li>\n<li>Activate the plugin.<\/li>\n<li>Go to <strong>ShopShelf \u2192 Add New Layout<\/strong>, build a layout, and publish it.<\/li>\n<li>Copy the layout's shortcode, for example <code>[shopshelf id=\"12\"]<\/code>, and paste it into any post, page or widget.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20require%20woocommerce%3F\"><h3>Does this require WooCommerce?<\/h3><\/dt>\n<dd><p>Yes. ShopShelf displays WooCommerce products and calls WooCommerce directly, so it needs WooCommerce installed and active.<\/p><\/dd>\n<dt id=\"how%20do%20i%20show%20a%20layout%3F\"><h3>How do I show a layout?<\/h3><\/dt>\n<dd><p>Each layout has a shortcode, shown in the layouts list and in the editor: <code>[shopshelf id=\"12\"]<\/code>. Paste it into a Shortcode block, the classic editor, a text widget or a page builder's shortcode element. In a theme template, use <code>&lt;?php echo do_shortcode( '[shopshelf id=\"12\"]' ); ?&gt;<\/code>.<\/p><\/dd>\n<dt id=\"my%20layout%20shows%20no%20products.\"><h3>My layout shows no products.<\/h3><\/dt>\n<dd><p>Check that the layout is published, then look at its filters: almost always they are narrower than the catalogue \u2014 a category with nothing published in it, or a Best Selling or Top Rated source on a shop with no sales or reviews yet. Clear the filters one at a time and preview after each.<\/p><\/dd>\n<dt id=\"can%20i%20put%20several%20layouts%20on%20one%20page%3F\"><h3>Can I put several layouts on one page?<\/h3><\/dt>\n<dd><p>Yes. Each layout is wrapped in its own element and its settings, filters and pagination are scoped to it.<\/p><\/dd>\n<dt id=\"can%20i%20style%20one%20layout%20with%20my%20own%20css%3F\"><h3>Can I style one layout with my own CSS?<\/h3><\/dt>\n<dd><p>Yes. Every layout is wrapped in an element with its own id, so a rule that starts with that id affects only that layout:<\/p>\n\n<pre><code>#shopshelf_wrapper-12 .shopshelf__item--title a { text-transform: uppercase; }\n<\/code><\/pre>\n\n<p>Add it with WordPress's own CSS editor: <strong>Appearance \u2192 Customize \u2192 Additional CSS<\/strong>, or <strong>Styles \u2192 Additional CSS<\/strong> in the Site Editor.<\/p><\/dd>\n<dt id=\"can%20i%20change%20the%20markup%3F\"><h3>Can I change the markup?<\/h3><\/dt>\n<dd><p>Yes. Copy any template from the plugin's <code>src\/Frontend\/templates<\/code> folder into a <code>shopshelf<\/code> folder in your theme, keeping the same path \u2014 for example <code>yourtheme\/shopshelf\/item\/title.php<\/code> \u2014 and edit it there. Your copy is used instead of the plugin's and survives plugin updates. <strong>Tools \u2192 System status<\/strong> lists any overrides it finds, which is worth checking if a setting seems to have no effect.<\/p><\/dd>\n<dt id=\"does%20the%20plugin%20load%20anything%20from%20other%20websites%3F\"><h3>Does the plugin load anything from other websites?<\/h3><\/dt>\n<dd><p>No. Scripts, styles, icons and fonts are all served from your own site. The only outbound links are the optional social share links described under \"External services\" below, and they do nothing until a visitor clicks one.<\/p><\/dd>\n<dt id=\"what%20happens%20to%20my%20layouts%20if%20i%20remove%20the%20plugin%3F\"><h3>What happens to my layouts if I remove the plugin?<\/h3><\/dt>\n<dd><p>Deactivating the plugin keeps everything. Deleting it from the Plugins screen removes its layouts and settings.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>New: Settings \u2192 Custom CSS &amp; JS, with code editors for your own styles and scripts. Custom CSS loads after ShopShelf's styles; custom JavaScript runs only on pages that show a layout. Only users who may add unfiltered HTML can change it.<\/li>\n<li>New: <code>shopshelf:ready<\/code> and <code>shopshelf:products-loaded<\/code> jQuery events, fired when a layout starts and after filters, pagination or Load More bring in new products.<\/li>\n<li>New: Filter Products \u2014 draw from all products, or only featured, on-sale, best-selling, top-rated or free ones.<\/li>\n<li>New: Product Type filter \u2014 simple, variable, grouped or external products.<\/li>\n<li>New: Show Hidden Products, and options to hide out-of-stock, on-sale, free and image-less products.<\/li>\n<li>New: Order By and Order, including price, popularity and average rating.<\/li>\n<li>Changed: \"Product Selection\" is now \"Filter Settings\", reorganised into Products, Visibility &amp; Stock, Order &amp; Limit and Advanced Filtering.<\/li>\n<li>Changed: Clearer titles, descriptions and help text throughout the admin, with consistent terms.<\/li>\n<li>Changed: Defaults for new layouts \u2014 a light card border, a full-width product image, meta fields shown (category and stock status) and rounded carousel arrows. Saved layouts are not changed.<\/li>\n<li>Changed: Products set to Hidden or Search results only in WooCommerce are no longer shown unless Show Hidden Products is on.<\/li>\n<li>Removed: Skip First. Layouts that used it now start from the first matching product.<\/li>\n<li>Removed: The shopper sort-direction filter.<\/li>\n<li>Fixed: The social share Alignment setting showed no option selected by default.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First release.<\/li>\n<li>Grid and Carousel layouts, with Standard, Center and Ticker carousel modes.<\/li>\n<li>Product selection by limit, offset, include\/exclude lists and product taxonomies, with a choice of sort order.<\/li>\n<li>Live filters for shoppers: taxonomy filters (buttons, dropdown, radio, checkbox), keyword search and sort direction.<\/li>\n<li>Sortable card content: image, title, meta fields, description, price, button and social share.<\/li>\n<li>Per-layout card styling and typography, and a site-wide colour scheme.<\/li>\n<li>Grid pagination: Load More, AJAX numbered pages, infinite scroll and ordinary page links.<\/li>\n<li>Carousel navigation, pagination, autoplay, transitions, multiple rows and accessibility messages.<\/li>\n<li>Live preview in the layout editor, including before a layout is saved.<\/li>\n<li>Settings for scripts and styles, and accessibility messages.<\/li>\n<li>Tools: sample layouts, settings backup and restore, and a system status report.<\/li>\n<li>Built-in Help screen.<\/li>\n<li>Theme-overridable templates.<\/li>\n<\/ul>","raw_excerpt":"Show WooCommerce products anywhere in responsive grids and carousels, with full control over what appears on each product card.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/376166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=376166"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/shshakib2001"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=376166"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=376166"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=376166"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=376166"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=376166"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=376166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}