內容簡介
總結：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 for WooCommerce, Grid, Wishlist Analytics & Compare」→ 直接安裝（推薦）
原文外掛簡介
Product Display for WooCommerce is the only product display plugin that combines 12+ professional layouts with a built-in wishlist analytics dashboard, side-by-side product compare, quick view popup, direct shop page integration, layout cloning, and JSON export/import – all in a single free plugin.
Most store owners install four or five separate plugins to get grids, wishlists, comparison tables, shop page control, and quick-view popups working together. Product Display replaces all of them. Build stunning WooCommerce product grids, responsive product sliders, scannable product tables, and animated product galleries – then assign them directly to your shop page, category pages, and tag pages with 8 position options, 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.
🏆 Why Store Owners Choose Product Display
12+ Professional Layouts – Grid, Card, Slider, Masonry, Gallery, Flip, Table, Showcase, Category Tabs, List, CTA, Caption (18+ hover effects)
Shop Page Integration – Assign any saved layout directly to your shop page, category pages, or tag pages with 8 position options including Replace Product Grid – no shortcode needed
Layout Clone – Duplicate any saved layout with one click and customize from there
Export & Import (JSON) – Export your layouts as JSON files and import them on any site; perfect for agencies and multi-site setups
Built-in Wishlist System – Floating button, modal, guest support, wishlist persistence, and social sharing
Wishlist Analytics Dashboard – Activity trend chart, top wishlisted products, restock opportunities, top user insights, live activity feed, and retention rate tracking
Product Compare Feature – Side-by-side comparison table with attributes, ratings, and direct Add to Cart
Quick View Popup – Instant product detail, image gallery, variations, and Add to Cart without leaving the page
AJAX-Powered Filtering – Filter by category, price, tag, attribute, stock, and custom taxonomy without page reload
Elementor Widget – Dedicated widget with live preview inside Elementor editor
Gutenberg Block – Native block editor integration with block settings panel
WooCommerce HPOS Compatible – Full support for High-Performance Order Storage
Mobile-First Responsive – Independent column counts for desktop, tablet, and mobile
Shop Page Integration
Take full control of how products appear across your entire WooCommerce store – without touching a single line of code.
Assign any saved Product Display layout to your store pages using 8 precise position options:
Before Shop Content – Display above all shop page content
After Shop Header – Display directly below the shop page title
Before Product Grid – Display above the product listing area
Between Products (Top) – Insert within the product grid, at the top
Between Products (Middle) – Insert within the product grid, at the middle
After Product Grid – Display below the product listing area
After Shop Content – Display below all shop page content
Replace Product Grid – Completely replaces the default WooCommerce product grid with your custom layout
Page Conditions – choose exactly where each integration appears:
Shop Page
Category Pages
Tag Pages
No shortcode required. Select your layout, pick your position, choose your pages, save. Done.
Layout Clone, Export & Import
Build your perfect layout once – then multiply it across your entire site or share it with any store.
Clone Layout – Duplicate any existing layout with one click; customize the copy without affecting the original
Export as JSON – Export any layout configuration as a JSON file
Import from JSON – Import layouts on any WordPress site running Product Display; ideal for agencies, developers, and multi-site setups
Wishlist Analytics Dashboard
Unlock powerful insights to understand your customers and boost sales with data-driven decisions – all built into the free plugin.
Activity Trend Chart – Daily wishlist adds and removes over time to spot demand patterns
Top Wishlisted Products – Know which products customers want most before you restock
Restock Opportunities – Out-of-stock products with high wishlist demand, flagged automatically
Top User Insights – See your most engaged customers and how they interact with your store
Live Activity Feed – Real-time stream of wishlist events as they happen
Retention Rate Tracking – Monitor how many users keep items wishlisted over time
No other free WooCommerce layout plugin includes a wishlist analytics dashboard. This is enterprise-grade store intelligence – built in, free.
Advanced Wishlist System
Floating wishlist button with live product count
Beautiful modal to manage saved items
Guest wishlist support – works without account login
Wishlist persists across browser sessions
Social sharing and email-your-wishlist functionality
Product Compare Feature
Side-by-side comparison of multiple products
Detailed attribute, price, rating, and specification rows
Add to Cart directly from the compare modal
Compare list maintained across page navigation
Quick View Functionality
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 – all inside quick view
Advanced AJAX Product Filtering
Category, subcategory, and custom taxonomy filters
Price range slider (min/max)
Attribute filters – color, size, brand, and custom
Tag, stock status, and on-sale filters
All filters work without page reload
WooCommerce Product Grid Layouts
Create responsive WooCommerce product grids with three style variations – Basic, Enhanced, and Advanced – with customizable columns, spacing, borders, shadows, hover effects, and full typography control. Assign directly to your shop page via Shop Page Integration.
WooCommerce Product Slider & Carousel
Build engaging product sliders and carousels with autoplay, navigation arrows, pagination dots, and full touch/swipe support. Three slider variations let you match any store design.
WooCommerce Product Table
Display products in sortable product tables with bulk actions and built-in comparison mode – ideal for B2B stores, wholesale operations, and buyers who need to compare specifications quickly.
WooCommerce Product Gallery & Masonry
Showcase products in masonry grids and gallery layouts with image hover effects, lightbox integration, and automatic adjustment for different image proportions.
Flip Card Layouts (5 Variations)
Simple Flip, 3D Flip, Slide Flip, Fade Flip, and Creative Flip – each revealing 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, Matrix Rain – the most extensive caption animation library in any free WooCommerce display plugin.
Call-to-Action & Category Tab Layouts
Drive conversions with CTA layouts featuring prominent buttons, and organize products with horizontal, vertical, or animated tab navigation for multi-category stores.
🎯 Perfect For
E-commerce Stores – Replace the default WooCommerce shop grid with a professional layout in seconds
B2B & Wholesale – Table layouts with bulk features and compare for business buyers
Data-Driven Store Owners – Wishlist analytics reveal demand before you restock
Agencies & Developers – Clone layouts and export/import JSON across all client sites
Mobile-First Stores – AJAX pagination and lazy loading optimized for mobile
Multi-Category Stores – Category tabs and page conditions 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 & Compatibility
Lazy loading for faster initial page load
AJAX pagination – no full page reloads
Minified CSS and JS assets
CDN-ready
Compatible with WP Rocket, W3 Total Cache, LiteSpeed Cache
Tested with Astra, OceanWP, GeneratePress, Storefront, Divi, Avada
Compatible with WPML, Polylang, and RTL languages
Works with WooCommerce currency switchers, subscriptions, and booking plugins
WooCommerce HPOS fully supported
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 & Support
Support Forum
Documentation
Report a Bug
