ShopShelf – Product Grid & Carousel for WooCommerce

ShopShelf turns any WooCommerce catalogue into a product showcase you can place anywhere with a shortcode.

Build a layout — one saved product showcase — 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.

Two layouts

• Grid — products in rows and columns, with a column count for each of five screen sizes
• Carousel — the same cards on a sliding track, in three modes: Standard, Center and Ticker

Choose your products

• Draw from all products, or only featured, on-sale, best-selling, top-rated or free ones
• Limit to simple, variable, grouped or external products
• Show a set number of products
• Include only specific products, or exclude specific ones
• Filter by product category, tag or any product attribute, with IN / AND / NOT IN operators
• Hide out-of-stock, on-sale, free or image-less products, and show or hide catalog-hidden ones
• Sort by date, title, price, popularity, rating, modified date, menu order, ID or at random

Let shoppers filter

• Live taxonomy filters shown as buttons, a dropdown, radio buttons or checkboxes, with optional product counts
• A keyword search box
• Everything updates without reloading the page

Build the card

Drag the parts of a product card into the order you want and switch off the ones you do not need:

• Product image, at any registered size or a custom cropped size
• Title, with your choice of HTML tag and a length limit
• Meta fields — category or tag, SKU, stock status, stock quantity, units sold, weight, dimensions and date
• Description — the short description, a trimmed description or the full one
• Price, with a separate colour for the struck-through regular price
• Add to Cart, Read More button or Read More text link
• Social share links for Facebook, X (Twitter), LinkedIn, Pinterest and email

Make it fit your theme

• Columns and gap per screen size, and equal card heights
• Card border, corner radius, shadow, background and inner padding
• Typography for every text element, with separate sizes for desktop, tablet and mobile
• A site-wide colour scheme that every layout falls back to
• Custom CSS and JavaScript, kept safe from theme and plugin updates
• Pagination for grids: Load More button, AJAX numbered pages, infinite scroll or ordinary page links

Carousel controls

• Autoplay with pause on hover, speed and infinite loop
• Slide, fade, coverflow, cube and flip transitions
• Multiple rows, and slides-to-scroll per screen size
• Navigation arrows in nine positions, with a choice of icons and colours
• Dot or numbered pagination, with dynamic bullets
• Keyboard navigation, touch swipe, mouse drag and mouse wheel
• Editable screen-reader messages

Built to stay out of the way

• A live preview while you edit — including before you save
• Templates you can override from your theme
• Every setting is scoped to its layout, so two showcases on one page can look completely different
• All scripts, styles, icons and fonts are served from your own site
• Sample layouts, a settings backup and a system status report under Tools
• A built-in Help screen documenting every control

Source code

The plugin ships the human-readable source of everything it minifies:

• Front end: src/Frontend/assets/js/scripts.js and src/Frontend/assets/css/style.css / shopshelf-grid.css sit beside their .min versions.
• Admin: the React source of src/Admin/assets/app/shopshelf-admin-app.js is in the shopshelf-admin/ folder. To rebuild it, run npm install and npm run build inside that folder (Node.js 20 or newer).

Bundled third-party libraries:

• Swiper 14.3.0 — MIT License. Both swiper-bundle.js and swiper-bundle.min.js are the unmodified files from the official package.
• IcoFont — the font is licensed under the SIL Open Font License 1.1 and its CSS under the MIT License.
• The admin bundle includes React, React Router, Radix UI, Lucide, Tailwind CSS, date-fns, React Day Picker, react-colorful, class-variance-authority, clsx and tailwind-merge, all under the MIT or ISC licenses. The full list with versions is in shopshelf-admin/package.json.

External services

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.

If you switch on Social Share 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.

Facebook

Facebook’s sharing dialog (https://www.facebook.com/sharer/sharer.php), 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.
Terms of Service · Privacy Policy

X (Twitter)

X’s post composer (https://twitter.com/intent/tweet, 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.
Terms of Service · Privacy Policy

LinkedIn

LinkedIn’s share page (https://www.linkedin.com/sharing/share-offsite/), 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.
User Agreement · Privacy Policy

Pinterest

Pinterest’s pin-creation page (https://www.pinterest.com/pin/create/button/), 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.
Terms of Service · Privacy Policy

Email

The Email share button is a mailto: 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.