
內容簡介
總結:Product Display 是一個強大的 WooCommerce 外掛,提供多種產品佈局選項,包括格狀、表格和磚塊佈局。使用直覺式界面和可自定義的設置,輕鬆創建時尚的產品櫥窗,無論您需要結構化的格狀還是動態的磚塊設計,該外掛都提供您所需的彈性。
問題與答案:
1. Product Display 這個外掛的關鍵特點有哪些?
- 提供多種佈局:以格狀、磚塊或表格形式展示產品。
- 快速查看:讓客戶在不離開頁面的情況下預覽產品詳細資訊。
- 比較與願望清單:啟用產品比較和願望清單功能。
- 添加到購物車:客戶可以直接從櫥窗中新增產品。
- 可自定義樣式:輕鬆調整外觀、顏色和佈局設置。
- 短代碼支援:使用簡單的短代碼在任何地方嵌入產品展示。
- 響應式和適用於行動設備:確保跨設備具有無縫的購物體驗。
2. 這個外掛使用了哪些外部庫?它們各自的用途是什麼?
- Masonry.js:用於產品展示的 JavaScript 格狀佈局庫。
- 目的:用於創建產品展示的響應式、基於格狀的佈局。
- 來源:Masonry 的全版本未壓縮源碼可在 https://github.com/desandro/masonry 取得。
- 許可證:MIT 許可證。
- Slick.js:一個響應式的輪播 jQuery 外掛。
- 目的:用於創建響應式的產品輪播和滑塊。
- 來源:完整未壓縮源碼可在 https://github.com/kenwheeler/slick 取得。
- 許可證:MIT 許可證。
3. 如果想要修改這些庫或使用未壓縮版本,應該如何進行?
- 從上面連結的 GitHub 存儲庫中下載原始碼。
- 將未壓縮文件替換在外掛的 /assets/library/ 目錄中的壓縮文件。
- 清除瀏覽器緩存以確保更改生效。
4. 如何使用這個外掛?
- 啟用外掛:前往 WordPress 控制台中的 Product Display。
- 選擇佈局:選擇格狀、磚塊或表格。
- 自定義:調整設置以匹配您商店的設計。
- 使用短代碼:在文章或頁面中插入 [product_display layout="grid"](或 masonry/table)。
外掛標籤
開發者團隊
② 後台搜尋「StoreDisplay – Product Display Layouts for WooCommerce」→ 直接安裝(推薦)
原文外掛簡介
Store Display gives WooCommerce stores 12+ professional product layouts plus built-in wishlist analytics, product compare, quick view, direct shop page integration, layout cloning, and JSON export/import. One plugin instead of four or five.
Most store owners end up installing separate plugins for product grids, wishlists, comparison tables, and quick view popups. Store Display replaces all of them. Build WooCommerce product grids, sliders, masonry galleries, flip cards, product tables, and animated showcase layouts, then assign them directly to your shop, category, and tag pages. No coding required.
Website | Documentation | Pro Support
The only free WooCommerce layout plugin with built-in wishlist analytics, shop page integration, layout clone, and JSON export/import.
What is included in the free version
12+ professional layouts: Product Grid, Card, Slider, Masonry, Product Gallery, Flip, Product Table, Product Showcase, Category Tabs, List, CTA, and Caption with 18+ hover effects
Shop Page Integration: assign any layout to your shop, category, or tag pages using 8 position options, including replacing the default WooCommerce product grid entirely
Layout Clone: duplicate any saved layout with one click
Export and Import (JSON): move layouts between sites, ideal for agencies and developers
Built-in Wishlist: floating button, modal, guest support, session persistence, and social sharing
Wishlist Analytics Dashboard: activity trend chart, top wishlisted products, restock opportunities, top user insights, live feed, and retention rate tracking
Product Compare: side-by-side table with attributes, ratings, and direct Add to Cart
Quick View Popup: product details, image gallery, variation selection, and Add to Cart without leaving the page
AJAX Filtering: filter by category, price, tag, attribute, stock, and custom taxonomy without page reload
Elementor Widget with live preview
Gutenberg Block with settings panel
WooCommerce HPOS compatible
Mobile-first responsive with independent column counts for desktop, tablet, and mobile
Shop Page Integration
Take full control of how products appear across your store without touching any code.
Assign any saved layout to your store pages using 8 position options:
Before Shop Content
After Shop Header
Before Product Grid
Between Products (Top)
Between Products (Middle)
After Product Grid
After Shop Content
Replace Product Grid (completely replaces the default WooCommerce product grid with your custom layout)
Page conditions let you target the shop page, category pages, or tag pages independently. Select your layout, pick a position, choose your pages, and save.
Layout Clone, Export and Import
Build your layout once, then reuse it across your site or share it with any store.
Clone Layout: duplicate any existing layout with one click; the copy is fully independent from the original
Export as JSON: download any layout as a JSON file
Import from JSON: bring that layout into any WordPress site running Store Display, ideal for agencies and multi-site setups
Wishlist Analytics Dashboard
No other free WooCommerce product layout plugin includes a built-in wishlist analytics dashboard. The dashboard shows:
Activity Trend Chart: daily wishlist adds and removes so you can spot demand patterns over time
Top Wishlisted Products: know which items customers want most before you restock
Restock Opportunities: out-of-stock products with high wishlist demand, flagged automatically
Top User Insights: your most engaged customers and how they interact with your store
Live Activity Feed: real-time stream of wishlist events
Retention Rate Tracking: how many users keep items wishlisted over time
Advanced Wishlist System
Floating wishlist button with live product count
Modal interface to manage saved items
Guest wishlist support, works without an account
Wishlist persists across browser sessions
Social sharing and email-your-wishlist
Product Compare
Side-by-side comparison of multiple products
Attribute, price, rating, and specification rows
Add to Cart directly from the compare modal
Compare list maintained across page navigation
Quick View
Instant product detail popup without page navigation
Full image gallery browsing inside the popup
Variation selection (size, color, and other attributes)
Add to Cart and related products inside the quick view
AJAX Product Filtering
Category, subcategory, and custom taxonomy filters
Price range slider (min and max)
Attribute filters: color, size, brand, and custom attributes
Tag, stock status, and on-sale filters
All filters update results without a page reload
WooCommerce Product Grid Layouts
Create responsive WooCommerce product grids with three style variations: Basic, Enhanced, and Advanced. Customize columns, spacing, borders, shadows, hover effects, and typography. Assign directly to your shop page via Shop Page Integration.
WooCommerce Product Slider and Carousel
Product sliders and carousels with autoplay, navigation arrows, pagination dots, and full touch/swipe support. Three slider variations to match different store designs.
WooCommerce Product Table
Sortable product tables with bulk actions and built-in comparison mode. Designed for B2B stores and wholesale operations where buyers need to compare specifications before ordering.
WooCommerce Product Gallery and Masonry
Masonry grids and product gallery layouts with image hover effects, lightbox integration, and automatic adjustment for different image proportions.
Flip Card Layouts
Simple Flip, 3D Flip, Slide Flip, Fade Flip, and Creative Flip. Each reveals extra product information on hover or click for an interactive browsing experience.
Caption Overlay Layouts (18+ Hover Effects)
Blinds Vertical, Blocks Zoom, Book Open, Border Reveal, Bounce, Circle Transitions, Cube Rotations, Swiper Slides, Liquid Morph, Neon Glow, Origami Fold, Particle Burst, Hologram, Glass Shatter, Magnetic Pull, Quantum Tunnel, Fire Ignition, and Matrix Rain. The most extensive caption animation library in any free WooCommerce display plugin.
Call-to-Action and Category Tab Layouts
CTA layouts with prominent buttons for conversion-focused placements. Category tab layouts with horizontal, vertical, or animated navigation for stores with multiple product categories.
Who uses Store Display
E-commerce stores replacing the default WooCommerce shop grid with a custom product layout
B2B and wholesale stores using product table layouts with compare and bulk features
Data-driven store owners using wishlist analytics to forecast demand before restocking
Agencies and developers cloning and exporting layouts across client sites
Mobile-first stores needing AJAX pagination and lazy loading
Multi-category stores using category tabs to keep large catalogues organized
Shortcode examples
[product_display layout="grid" columns="4" limit="12"]
[product_display layout="slider" autoplay="yes" arrows="yes"]
[product_display layout="table" show_compare="yes" show_quickview="yes"]
Elementor Integration
1. Edit your page with Elementor
2. Search for the “Product Display” widget
3. Select your saved layout
4. Configure settings with live preview
5. Publish
Gutenberg Block
Add the “Product Display” block from the block inserter
Select a layout from the dropdown
Configure block settings in the sidebar
Preview and publish
Performance and Compatibility
Lazy loading for faster initial page load
AJAX pagination without full page reloads
Minified CSS and JS assets
CDN-ready
Compatible with WP Rocket, W3 Total Cache, and LiteSpeed Cache
Tested with Astra, OceanWP, GeneratePress, Storefront, Divi, and Avada
Compatible with WPML, Polylang, and RTL languages
Works with WooCommerce currency switchers, subscriptions, and booking plugins
WooCommerce HPOS fully supported
Competitor Analysis
Search the WordPress plugin directory for a WooCommerce product layout plugin and a handful of names come up again and again, so it is worth being clear about where Store Display actually fits among them.
Product Layouts for WooCommerce is the closest match in scope, with general layouts, caption hover effects, product tabs, a carousel slider, and product filtering all included free. Anyone comparing the two is comparing like for like on layout variety. Where Store Display pulls ahead is in the features around the layouts: a built-in wishlist with its own analytics dashboard, product compare, quick view, Shop Page Integration with 8 position options including a full Replace Product Grid mode, and JSON export/import that moves a saved layout between sites. Product Layouts for WooCommerce’s free version stops at layouts and filtering; wishlist, compare, quick view, and shop-page placement are not part of its free feature set.
Product Slider, Product Carousel and Product Grid Gallery for WooCommerce (WooProduct Slider) covers sliders and grids well in its free tier, with strong autoplay, touch, and styling controls, plus its own import/export for slider settings. But quick view, masonry, and the product table layout are Pro-only there, and it has no wishlist, no compare, and no shop-page position system at all. Store Display includes sliders and grids alongside masonry, product tables, quick view, and wishlist analytics in a single free plugin.
Product Table & List Builder for WooCommerce is a strong, purpose-built free option if all a store needs is a searchable, sortable product table, and its table editor is more granular than Store Display’s. The tradeoff is scope: it only builds tables, and replacing the shop archive page with that table is a PRO-only feature there. Store Display’s product table is one of 12+ layout types, and Shop Page Integration, including replacing the default product grid, is included free no matter which layout is used.
Beyond those three, the other names that show up nearby are solving a different problem entirely, not a weaker version of the same one. Advanced Product Fields (Product Addons) for WooCommerce adds customer-facing input fields to a single product, letting shoppers personalize a t-shirt or configure a pizza order; it has nothing to do with how the product grid, slider, or shop page looks, and runs fine on the same store as Store Display. Product Tabs for WooCommerce does a similarly adjacent job, adding extra information tabs to a single product page (specs, shipping, FAQs) rather than changing how products are displayed across the shop.
So of the plugins that show up in a “woocommerce product layout” or “woocommerce product grid” search, only Product Layouts for WooCommerce, WooProduct Slider, and Product Table & List Builder are actually built for the same job as Store Display: changing how products are displayed. Between those three, Store Display’s combination of 12+ layout types, free wishlist analytics, product compare, quick view, Shop Page Integration, and JSON layout export/import, all in the free version, is what sets it apart.
External Libraries
Masonry.js (MIT License): masonry.desandro.com – responsive grid layout
Slick.js (MIT License): kenwheeler.github.io/slick – product carousels and sliders
toastmaster.js (MIT License): npmjs.com/package/toastmaster – toast notifications and modals
No data is sent to external services when using these libraries.
Connect and Support
Support Forum
Documentation
Report a Bug
