Shopnook – Shoppable Images for WooCommerce, EDD & SureCart
| 开发者 | sanju-shankar |
|---|---|
| 更新时间 | 2026年11月1日 20:16 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- WooCommerce: physical and digital products. Simple products add to the cart right from the card; variable, grouped and external products link to their page. Sales are credited when the order is paid.
- Easy Digital Downloads (EDD): ebooks, courses, software, templates, music and other downloads. Single-price downloads add to the cart right from the card; downloads with price options link to their page. Sales are credited when the order is complete.
- SureCart: physical products, digital products and subscriptions. The card's Buy now button opens SureCart's instant checkout (or the product page), and sales are credited when SureCart confirms the checkout.
- Fashion and apparel stores: turn outfit photos and lookbooks into "shop the look" pages, one pin per piece.
- Home, furniture and decor shops: tag every item in a styled room, from the sofa to the vase on the shelf.
- Beauty and skincare brands: tag the products in a routine, a flat lay or a "what's in my bag" photo.
- Food, kitchen and recipe sites: tag the cookware, ingredients and tableware in a recipe photo.
- Gift guides and seasonal campaigns: one photo per guide with every gift tagged, plus a "Shop this look" list underneath.
- Brand merch and company stores: show tees, hoodies, mugs and stickers styled together on a desk or in the wild.
- Blogs that sell: keep writing as you do now and make the photos in your posts shop for you.
- Instagram-style feeds: turn a gallery into a shoppable grid or a stories carousel that feels familiar to social shoppers.
- Creators and influencers with their own shop: tag your products in the photos you already post on your blog.
- Agencies and freelancers: give clients shoppable lookbooks and campaign pages without custom code or a page builder.
- Digital product sellers (EDD): course creators, designers, photographers, musicians and software makers who sell downloads. Tag the ebook cover, the template preview or the preset in a photo.
- SureCart stores: creators and small brands selling products and subscriptions with SureCart's fast checkout.
- Lookbooks and collections: a seasonal lookbook post where every outfit or room is shoppable.
- Shop the look pages: one hero photo with a "Shop this look" list of every product under it.
- Blog posts and tutorials: "how to style", "my morning routine" or "what I cook with" posts that sell the products in them.
- Gift guides: "gifts under $50" or holiday guides with every gift tagged.
- Product launches and campaigns: a launch photo with the new range tagged, linked from your newsletter or social posts.
- Home page and landing pages: a shoppable hero image or a stories carousel at the top of the page.
- Customer and community photos: real photos of your products in use, tagged and ready to buy.
- Digital product showcases: a desk setup with the Notion template, Lightroom presets or icon pack you sell, each one tagged.
- Course and ebook promotions: a photo of your workspace or a book mockup with the course or ebook tagged, sold through EDD or SureCart.
- A shoppable feed on your own site: upload your social photos to a gallery and show them as an Instagram grid or stories, with products tagged.
- Select an Image block in any post or page and switch on Shoppable image in the Shopnook panel.
- Click Tag products, click the photo where each product is, and search for the product by name or SKU.
- Publish. Pins appear on the photo, and the dashboard starts counting.
- "Shoppable image" switch on the core Image block, and "Shoppable gallery" on the core Gallery block. No new blocks.
- Pin editor right in the block editor: click to place, drag to move, arrow keys to nudge, Delete to remove.
- Product search by name or SKU, with image, price and stock shown as you pick.
- Optional label per pin, shown on hover.
- Unlimited pins per image.
- Tag images in the Media Library and reuse the pins everywhere, or give one post its own pins.
- A "Products" column in the Media Library list shows how many products each image has.
- Seven styles: dot, pulsing dot, plus, number, shopping bag, price tag, or your own image (your logo works well).
- Three sizes, your own pin and icon colours, and pins always visible or only on hover.
- Hover labels with the product name.
- Tooltip card: a small card next to the pin.
- Panel below the image: the product opens under the photo, and the next pin swaps it.
- Side drawer: a panel slides in from the edge of the screen.
- "Shop this look" list: every product listed under the photo with numbered pins that highlight their product.
- On phones: a bottom sheet that is easy to use with one thumb, the desktop view, or a panel below the image.
- Choose what the card shows: product image, name, price, sale badge, star rating, short description, Add to cart and View product.
- Your own button text and button colour.
- Add to cart in place for simple products, with your theme's mini cart updated and a "View cart" link.
- Variable and grouped products show "Select options" and link to the product page. External products link to their own site.
- Out of stock products are labelled, and pins for deleted or unpublished products hide themselves.
- Instagram grid: square tiles with a product count badge. A photo opens in a popup with its pins on one side and its products on the other, like an Instagram post. Arrow keys move between photos.
- Masonry: Pinterest-style columns that keep each photo's shape, with the same popup.
- Stories carousel: tall slides visitors swipe through, with pins on every slide. Each slide crops around its pins so they stay in view.
- Set the number of columns per gallery, and the default layout, columns, spacing and product count badge for the whole site.
- Revenue from shoppable images, front and centre.
- Views, pin opens, product clicks, add to carts, orders and items sold.
- A trend chart for each measure, with a table view.
- A view-to-sale funnel with the conversion rate at every step.
- Top images, top products and top posts and galleries, ranked by revenue.
- Orders that came from an image are marked on the WooCommerce and EDD order screens.
- Counts are anonymous daily totals. No personal data or IP addresses are stored.
- One first-party cookie,
shopnook_ref, remembers which image led to a product, for the credit window only. It holds product and image IDs and nothing else. - Works with cookie consent plugins that support the WP Consent API: nothing is counted and no cookie is set until visitors allow statistics cookies.
- Visits by logged-in editors and admins are not counted (you can change this), and neither are bots.
- Suggested text is added to your privacy policy page.
- Choose how long stats are kept: 3 months to forever.
- No third-party tracking scripts. Shoppable image stats stay in your WordPress database. The only outside services are the optional, admin-only newsletter sign-up and deactivation survey described under External services.
- Scripts and styles load only on pages with a shoppable image or gallery.
- The front-end script has no dependencies: no jQuery, no frameworks.
- Pins are added when the page renders, so they work with page caching.
- Stats are stored as small daily totals, so the table stays small even on busy shops.
- Pins are real buttons with product names for screen readers.
- Full keyboard support: Tab to a pin, Enter to open, Escape to close, and focus returns to the pin.
- The drawer, bottom sheet and gallery popup trap focus while open.
- Respects "reduce motion" settings.
- Uses the core Image and Gallery blocks. Deactivate Shopnook and you have ordinary images and galleries again; nothing in your content breaks.
- Works with block themes and classic themes.
- Compatible with WooCommerce High-Performance Order Storage (HPOS) and the Cart and Checkout blocks.
- Translation ready.
shopnook_product_cardfilter: change the data a product card shows. The card'sstorekey says which store it came from.shopnook_storesfilter: add your own store integration by extendingShopnook_Store.- Pins on an image are stored in the
_shopnook_imageattachment meta; per-post pins live in the block'sshopnookattribute. - REST routes under
shopnook/v1. - Development happens on GitHub. Bug reports and pull requests are welcome.
- Newsletter (Brevo): when an admin clicks Subscribe, their email, first name and the plugin name are sent to Brevo. Terms, Privacy
- Deactivation survey (Google Apps Script): when an admin clicks Send & deactivate, the reason, comment, plugin, WordPress, WooCommerce and PHP versions, admin language and, if the contact box is ticked, their name and email are sent to the author's Google Sheet. Terms, Privacy
- ☕ Buy me a coffee to support development.
- ⭐ Leave a review so other store owners can find it.
- 💬 Questions or problems: the support forum.
- 🛠 Code, bug reports and pull requests: GitHub.
- Website: sanjayshankar.me
- Contact: sanjayshankar.me/contact
- LinkedIn: Sanjay Shankar
- X (Twitter): @sanjayshankarr
- GitHub: sanjuacodez
- All my WordPress plugins: profiles.wordpress.org/sanju-shankar
- Likenook – Like Dislike Buttons: like and dislike buttons for posts, pages, products and comments, with "Was this helpful?" feedback and analytics.
- Anchormap – AI Internal Linking & Link Map: a visual link map, orphan page finder and one-click internal link suggestions.
- Seasonal Effects & Notice Bar: festive animations, countdown timers and notice bars for Black Friday, Christmas and every season.
- Advanced Preloader: beautiful loading animations while your site loads.
安装:
- Install and activate your store plugin: WooCommerce, Easy Digital Downloads or SureCart.
- Go to Plugins → Add New, search for Shopnook and click Install Now, then Activate.
- Edit a post or page, select an Image block, and switch on Shoppable image in the Shopnook panel. In WordPress 7.0 and later the panel is in the block sidebar's Content tab.
- Click Tag products, click the photo to drop pins and pick a product for each.
- Optional: choose your default pin, card and gallery styles under Shopnook → Settings.
屏幕截图:
常见问题:
What is a shoppable image?
A photo with small pins (hotspots) on the products in it. Visitors tap a pin to see the product's name, price and an Add to cart button, so they can buy what they see without searching your shop. Shopnook adds this to any image or gallery on your WooCommerce site.
Can I create a "shop the look" page or a lookbook?
Yes. Add your photos to a post or page, switch on Shoppable image and tag the products. Choose the Shop this look display to list every product under the photo, or turn a gallery into an Instagram grid, masonry or stories layout for a full lookbook.
Can I make my Instagram photos shoppable on my website?
Shopnook does not connect to your Instagram account. Upload the photos to a Gallery block, switch on Shoppable gallery and choose the Instagram grid or stories layout. Your visitors get the same tap-to-shop feel, with products from your own store.
Do I need a special block or shortcode?
No. Shopnook adds a switch to the core Image and Gallery blocks. Your content stays ordinary blocks.
Where is the Shopnook panel in the block editor?
Select an Image or Gallery block and open the block sidebar. In WordPress 7.0 and later it is in the Content tab; in earlier versions it is in the block Settings.
I tagged products in the Media Library but the pins do not show. Why?
Media Library pins show wherever the image is shoppable. Select the Image block in your post and switch on Shoppable image, then update the post. Featured images printed by your theme are not Image blocks, so they do not get pins.
What is the difference between Media Library pins and pins in a post?
Media Library pins are saved on the image itself and show in every post where that image is shoppable. If one post needs different products, click Customize for this post in the block settings. That post keeps its own pins and the others are not affected. Use Media Library pins switches it back.
What happens if I deactivate the plugin?
Your images and galleries show as normal images and galleries. Shopnook only adds pins when the page renders, so nothing in your saved content breaks.
Which products can I tag?
Any published product from WooCommerce, Easy Digital Downloads or SureCart, and you can mix them in one photo.
- WooCommerce: simple products add to the cart from the card. Variable and grouped products show "Select options" and link to the product page. External products link to their own site.
- Easy Digital Downloads: single-price downloads add to the cart from the card, with a Checkout link. Downloads with price options link to their page.
- SureCart: Buy now opens SureCart's instant checkout when the product's buy link is on, otherwise the product page. Products with variants or several prices link to their page.
Which e-commerce plugins does Shopnook work with?
WooCommerce, Easy Digital Downloads (EDD) and SureCart. You need at least one of them, and you can use more than one on the same site. Support for more store plugins is planned. If you use another one, tell us which in the support forum so we know what to build first.
Does it work without WooCommerce?
Yes. Since version 1.1, WooCommerce is optional. Shopnook works with Easy Digital Downloads or SureCart on their own.
Can I sell digital products with shoppable images?
Yes. With Easy Digital Downloads, tag ebooks, courses, templates, presets or software in your photos, and shoppers add them to the cart from the card. WooCommerce digital products and SureCart products work too.
How are SureCart sales credited?
When a shopper clicks a SureCart product on a shoppable image and then pays, SureCart confirms the checkout in the shopper's browser and Shopnook credits the sale to the image. Refunded (revoked) purchases are taken back out.
Can I tag products from other stores, like Amazon?
Not in this version. Shopnook tags products from your own WooCommerce, Easy Digital Downloads or SureCart store.
Can you add a feature I need?
Very likely. Post it in the support forum, or contact me if you need a custom feature or integration for your store.
Does it work with my theme?
Shopnook works with block themes and classic themes. Pins and cards use your theme's fonts, and you set the colours. If a theme or another plugin puts a full-screen overlay or a floating button on top of the page, it can sit above the pins; tell us in the support forum and we will help.
Does it work with page builders or the Classic Editor?
Version 1.0 works in the block editor. Support for more editors is planned.
Does it slow down my site?
No. Shopnook loads its small script and stylesheet only on pages that have a shoppable image or gallery, and the script has no dependencies. Pins are part of the page HTML, so they work with page caching.
How are sales credited to an image?
When a visitor clicks a product on a shoppable image (or adds it to the cart from the card), Shopnook remembers the product and the image in a cookie. If that product is bought within the credit window, the order line is credited to the image. The most recent click wins. The sale is counted when the order is paid and removed if the order is cancelled, refunded or fails.
Will my own testing inflate the numbers?
No. Visits by logged-in users who can edit posts are not counted by default. You can change this under Shopnook → Settings → Tracking.
Is it GDPR friendly?
Shopnook stores only anonymous daily totals, never IP addresses or personal data. Its one cookie holds product and image IDs. With a consent plugin that supports the WP Consent API, nothing is tracked until visitors allow statistics cookies. Shopnook also adds suggested text to your privacy policy page.
Can I turn tracking off?
Yes. Switch off Count views, clicks and sales under Shopnook → Settings → Tracking. Pins and cards keep working.
What does uninstalling remove?
By default, deleting the plugin keeps your data in case you reinstall. Switch on Delete all Shopnook data under Settings → Tracking to remove settings, stats and the pins saved on images when the plugin is deleted.
更新日志:
- New: Easy Digital Downloads support. Tag downloads on images and galleries, add them to the cart from the card, and see their sales in the dashboard. Refunds are taken back out.
- New: SureCart support. Tag SureCart products, open SureCart's instant checkout from the card, and credit confirmed checkouts to the image. Revoked purchases are taken back out.
- New: WooCommerce is no longer required. Shopnook works with any one of WooCommerce, Easy Digital Downloads or SureCart, or several together.
- New: the product picker shows which store each product comes from when more than one store is active.
- New:
shopnook_storesfilter for custom store integrations. - Fix: a product name or price with a "$" followed by digits (like "Gift card $50") could lose that text on the page.
- First release: shoppable Image and Gallery blocks, Media Library tagging, seven pin styles, four display modes plus a phone bottom sheet, Instagram, masonry and stories gallery layouts, sales attribution and the analytics dashboard.