[WordPress] 外掛分享: Product List, Product Showcase, and Product Flip Layout for WooCommerce – Product Display

WordPress 外掛 Product List, Product Showcase, and Product Flip Layout for WooCommerce – Product Display 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Product List, Product Showcase, and Product Flip Layout for WooCommerce – Product Display」是 2025-06-19 上架。
  • 目前有 10 個安裝啟用數。
  • 上一次更新是 2026-02-15,距離現在已有 11 天。
  • 外掛最低要求 WordPress 5.9 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
  • 有 1 人給過評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

sambyte | wpazleen |

外掛標籤

product table | WooCommerce Product Grid | Woocommerce Product slider | WooCommerce Product Gallery | product carousel for woocommerce |

內容簡介

總結: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)。

原文外掛簡介

Product Display for WooCommerce is the most comprehensive and powerful WooCommerce product display plugin that transforms how you showcase products on your online store. Create beautiful product grids, responsive product sliders, interactive product tables, and stunning product galleries without any coding knowledge.
Product Display is ideal for building WooCommerce product grids, product sliders, product tables, product carousels, and product galleries without coding.

Perfect for WooCommerce stores looking to increase conversions, improve user experience, and showcase products professionally with modern layouts and advanced features.
🏆 Why Choose Product Display for WooCommerce?
✅ 12+ Professional Layouts – Grid, Card, Slider, Masonry, Gallery, Flip, Table, Showcase, Category Tabs, List, CTA, Caption
✅ AJAX-Powered Performance – Lightning-fast filtering and pagination without page reloads
✅ Built-in Wishlist System – Advanced wishlist functionality with floating button and modal
✅ Product Compare Feature – Side-by-side product comparison with detailed attributes
✅ Quick View Popup – Instant product details without leaving the page
✅ Live Product Filters – Filter by category, tag, price, attributes, and custom taxonomies
✅ Elementor Integration – Dedicated widget with live preview in Elementor editor
✅ Gutenberg Block – Native block editor integration
✅ Mobile-First Design – Fully responsive on all devices and screen sizes
✅ SEO Optimized – Clean markup and fast loading for better search rankings
✅ WooCommerce HPOS Compatible – Full support for High-Performance Order Storage
🎯 Perfect For These Use Cases:
🛍️ E-commerce Stores – Showcase products with professional layouts that convert
📱 Mobile Shopping – Fast-loading product lists optimized for mobile users
🎨 Product Catalogs – Create beautiful product galleries for marketing campaigns
📊 Bulk Ordering – Display products in table format for B2B and wholesale
🏪 Multi-Category Stores – Organize products with category tabs and filters
💼 Corporate Websites – Professional product showcases for business clients
🔥 Advanced Features & Layouts
Product Grid Layouts
Create responsive WooCommerce product grids with customizable columns, spacing, and styling options. Perfect for shop pages and category displays.
WooCommerce Product Slider & Carousel
Build engaging product sliders and product carousels with autoplay, navigation arrows, dots, and touch/swipe support for mobile devices.
WooCommerce Product Table Layouts
Display products in WooCommerce product tables with sortable columns, bulk actions, and comparison features – ideal for B2B stores and bulk ordering.
WooCommerce Product Gallery Layouts
Showcase products with stunning product gallery layouts featuring image hover effects, lightbox integration, and masonry-style arrangements.
WooCommerce Masonry Grid Layouts
Create Pinterest-style masonry product grids that automatically adjust to different product image sizes and content lengths.
WooCommerce Product Showcase Designs
Highlight featured products with modern product showcase layouts that draw attention to your best-selling or promotional items.
WooCommerce Category Tab Layouts
Organize products by categories with interactive category tab layouts that allow customers to browse different product types seamlessly.
WooCommerce Flip Card Layouts
Engage customers with interactive flip card product layouts that reveal additional product information on hover or click.
WooCommerce Call-to-Action Layouts
Drive conversions with CTA product layouts designed to encourage immediate action with prominent buttons and compelling design.
WooCommerce Caption Overlay Layouts
Add visual appeal with caption overlay layouts featuring 18+ animation effects including blinds, zoom, bounce, cube, and modern hover transitions.
WooCommerce Product List Layouts
Create clean, scannable product list layouts perfect for mobile browsing and quick product comparison.
Advanced Product Filtering

AJAX Live Filtering – Filter products without page refresh
Category Filters – Browse by product categories and subcategories
Price Range Filters – Set minimum and maximum price ranges
Attribute Filters – Filter by color, size, brand, and custom attributes
Tag Filters – Filter products by tags and labels
Stock Status Filters – Show only in-stock or on-sale products
Custom Taxonomy Filters – Filter by any custom product taxonomy

Enhanced Shopping Features
Advanced Wishlist System

Floating Wishlist Button – Always accessible wishlist with product count
Wishlist Modal – Beautiful popup to manage saved products
Guest Wishlist Support – Works for both logged-in and guest users
Wishlist Persistence – Saves wishlist across browser sessions
Social Sharing – Share wishlist on social media platforms
Email Wishlist – Send wishlist via email to friends and family

Product Compare Feature

Side-by-Side Comparison – Compare multiple products in a table format
Detailed Attributes – Compare prices, features, ratings, and specifications
Compare Modal – Beautiful popup interface for product comparison
Add to Cart from Compare – Purchase directly from comparison table
Compare Persistence – Maintains comparison list across pages

Quick View Functionality

Instant Product Details – View product information without page navigation
Image Gallery – Browse product images in quick view popup
Add to Cart – Purchase directly from quick view modal
Product Variations – Select size, color, and other variations
Related Products – See related items in quick view

Professional Customization Options
Design & Styling

Color Customization – Customize colors for all elements
Typography Control – Set fonts, sizes, and text styling
Spacing Options – Control margins, padding, and gaps
Border & Shadow Effects – Add borders and box shadows
Background Options – Set background colors and images
Hover Effects – Choose from multiple hover animations

Layout Configuration

Responsive Columns – Set different column counts for desktop, tablet, mobile
Grid Spacing – Control horizontal and vertical spacing between products
Image Aspect Ratios – Maintain consistent image proportions
Content Alignment – Align text and elements as needed
Button Positioning – Control placement of action buttons

Performance Optimization

Lazy Loading – Load images only when needed for faster page speeds
AJAX Pagination – Navigate pages without full page reloads
Caching Support – Compatible with popular caching plugins
Minified Assets – Optimized CSS and JavaScript for faster loading
CDN Ready – Works seamlessly with content delivery networks

🛠️ Easy Integration & Setup
Shortcode System
Use simple shortcodes to display products anywhere on your site:
`

[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

Dedicated Elementor Widget – Drag and drop product displays
Live Preview – See changes instantly in Elementor editor
Widget Controls – Full control over layout and styling options
Template Integration – Use with Elementor Pro theme builder

Gutenberg Blocks

Custom Gutenberg Block – Easy insertion in block editor
Block Settings Panel – Configure options directly in editor
Preview Mode – See layout preview before publishing

Widget Support

Sidebar Widgets – Add product displays to sidebars
Footer Widgets – Showcase products in footer areas
Custom Widget Areas – Use in any widget-enabled area

🎨 Layout Showcase
Grid Layouts (3 Variations)

Basic Grid – Clean, minimal product grid layout
Enhanced Grid – Grid with additional product information
Advanced Grid – Feature-rich grid with all product details

Card Layouts (3 Variations)

Simple Cards – Clean card design with essential information
Detailed Cards – Cards with extended product details
Premium Cards – Feature-rich cards with all options

Slider Layouts (3 Variations)

Basic Slider – Simple product carousel with navigation
Advanced Slider – Multi-row slider with enhanced controls
Premium Slider – Full-featured slider with all options

Masonry Layouts (3 Variations)

Pinterest Style – Dynamic masonry grid layout
Balanced Masonry – Evenly distributed masonry layout
Creative Masonry – Artistic masonry arrangement

Gallery Layouts (3 Variations)

Image Focus – Gallery emphasizing product images
Balanced Gallery – Equal focus on images and content
Content Rich – Gallery with detailed product information

Table Layouts (3 Variations)

Simple Table – Basic product table with essential columns
Comparison Table – Table optimized for product comparison
Advanced Table – Feature-rich table with all product data

Showcase Layouts (Multiple Variations)

Hero Showcase – Large featured product display
Banner Showcase – Promotional product showcase
Highlight Showcase – Emphasis on key product features

Category Tab Layouts (3 Variations)

Horizontal Tabs – Traditional horizontal tab navigation
Vertical Tabs – Space-efficient vertical tab layout
Modern Tabs – Contemporary tab design with animations

List Layouts (3 Variations)

Compact List – Space-efficient product list
Detailed List – List with comprehensive product information
Enhanced List – Feature-rich list with all options

CTA Layouts (3 Variations)

Action Focused – Emphasis on call-to-action buttons
Conversion Optimized – Designed for maximum conversions
Sales Driven – Layout optimized for sales and promotions

Flip Layouts (5 Variations)

Simple Flip – Basic flip animation on hover
3D Flip – Three-dimensional flip effect
Slide Flip – Sliding flip animation
Fade Flip – Smooth fade transition flip
Creative Flip – Unique flip animations and effects

Caption Layouts (18+ Variations)
Modern hover effects and animations:
– Blinds Vertical – Venetian blind effect
– Blocks Zoom – Block-based zoom animation
– Book Open – Book opening animation
– Border Reveal – Progressive border reveal
– Bounce Effects – Dynamic bounce animations
– Circle Transitions – Circular reveal effects
– Cube Rotations – 3D cube rotation effects
– Swiper Slides – Smooth sliding transitions
– Liquid Morph – Fluid morphing effects
– Neon Glow – Glowing neon effects
– Origami Fold – Paper folding animations
– Particle Burst – Particle explosion effects
– Hologram – Futuristic hologram effects
– Glass Shatter – Glass breaking animations
– Magnetic Pull – Magnetic attraction effects
– Quantum Tunnel – Sci-fi tunnel effects
– Fire Ignition – Fire and flame effects
– Matrix Rain – Digital matrix effects
Page Builder Integration
🔧 Elementor – Dedicated widget with live preview
🔧 Gutenberg – Custom blocks for block editor
Using Elementor:
1. Edit page with Elementor
2. Add “Product Display” widget
3. Select your saved layout
4. Configure widget settings
5. Preview and publish
Using Gutenberg:
1. Add “Product Display” block
2. Select layout from dropdown
3. Configure block settings
4. Preview and publish
💡 Use Cases

Create WooCommerce product grids for shop pages
Display product tables for bulk ordering
Showcase featured products with product showcases
Build fast-loading product lists for mobile users
Create promotional product galleries for campaigns

External Libraries
This plugin utilizes the following third-party libraries:

Masonry.js: A JavaScript grid layout library (masonry)

Purpose: Masonry is used to create responsive, grid-based layouts for product displays.
Source: The full, unminified source code for Masonry is available at masonry.
License: MIT License

Slick.js: A responsive carousel jQuery plugin (slick)

Purpose: Used to create responsive product carousels and sliders.
Source: The full, unminified source code is available at kenwheeler.
License: MIT License

toastmaster.js: A lightweight, versatile modal and toast notification library that works seamlessly with vanilla JavaScript, React, Vue and other frameworks (toastmaster)

Purpose: Used to create toast, tag, notices.
Source: The full, unminified source code is available at toastmaster.
License: MIT License

The minified versions of these libraries are included in the plugin to optimize performance. The original, unminified source code is available through the links above. No data is sent to external services when using these libraries.
If you wish to modify these libraries or use the unminified versions:
1. Download the source code from the GitHub repositories linked above
2. Replace the minified files in the /assets/library/ directory with your modified or unminified versions
3. Clear your browser cache to ensure the changes take effect
How to Use

Activate the Plugin: Go to Product Display in the WordPress dashboard.
Choose a Layout: Select Grid, Masonry, or Table.
Customize: Adjust settings to match your store’s design.
Use Shortcodes: Insert [product_display layout="grid"] (or masonry/table) in posts or pages.

各版本下載點

(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。


1.0.0 | 1.1.0 | 1.2.0 | 1.2.1 | 1.2.2 | 1.2.3 | 2.0.0 | 2.0.1 | 2.0.2 | 2.1.0 | 2.2.0 | 2.2.1 | 2.2.2 | 2.2.3 | trunk |

延伸相關外掛(你可能也想知道)

  • Product Slider, Product Carousel and Product Grid Gallery for WooCommerce – WooProduct Slider 》現場演示 | 文件 | 升級至專業版!, , 概述, Product Slider for WooCommerce 是最佳的產品幻燈片輪播外掛,可以讓你以整潔和專業的方式滑動 WooCommerce 產...。
  • Product Table for WooCommerce 》(Woo Product Table) Product Table 是一款 WordPress 外掛程式,可協助您將 WooCommerce 產品以可搜索的表格方式顯示,並提供過濾器。透過簡碼(shortcode)...。
  • Gutenberg Block for WooCommerce Product Table 》《Gutenberg 模塊 WooCommerce 產品表格》為 Barn2 的 WooCommerce 產品表格 外掛加入一個方便易用的編輯模塊,讓使用 Gutenberg 編輯器的用戶更輕鬆地建立產...。
  • Product Table for WooCommerce by WBW 》Product Table WooCommerce 外掛允許以表格佈局且帶有篩選搜尋功能呈現您的 WooCommerce 產品。該外掛在快捷訂單表格、大型產品目錄、餐廳點餐系統、批發佈局...。
  • Tabbed Category Product Listing for Woocommerce 》分類式 Woo 單品列表分頁外掛, , 這個 WooCommerce 外掛允許您以分類式標籤格式展示您的產品。Woo Tabbed Category Product Listing 是一個簡單的 WooCommerc...。
  • Active Products Tables for WooCommerce. Use constructor to create tables  》Active Products Tables for WooCommerce (又名 WOOT) 是一款針對 WooCommerce 產品的 WordPress 插件,用於以表格格式顯示 woo 商店產品。 Woo產品表格讓您...。
  • Product Layouts for WooCommerce 》使用 Product Layouts for Woocommerce 外掛,以出色的風格展示您的產品,增加您的線上業務。, , 👁️ 查看演示 | 🚀 獲取高級版 | 👩🏼‍💻 獲取支援, 免費版...。
  • JustTables – WooCommerce Product Table 》JustTables 是一款令人驚嘆的 WordPress 外掛,可讓您展示所有 WooCommerce 產品的可排序和可篩選表格視圖。它讓您的客戶可以輕鬆瀏覽產品的不同屬性並在單個...。
  • Product Table For WooCommerce 》WooCommerce商品表格插件幫助您展示以表格佈局方式呈現的產品。那些以預設網格佈局為主的WooCommerce商店已經過時了。WooCommerce商品表格插件可輕鬆地使用簡...。
  • Product Table for WooCommerce – Add Multiple Products to Cart 》這個外掛是一個易於使用、超快速的 WooCommerce 產品表格解決方案,可以一次加入多個產品到購物車,非常適合配件、餐廳或任何 WooCommerce 商店使用,有助於...。
  • WPC Product Table for WooCommerce 》WPC產品表插件具有專業的功能和特點,可以為線上商店提供自定義的產品和服務展示。只需要一個點擊安裝,然後WooCommerce的賣家就可以在店內為最有前途的熱門...。
  • Free Woocommerce Product Table View – Woo Table Pro 》使用拖放式產品表建構器快速製作 WooCommerce 產品表。添加篩選、排序您的產品以獲得更好的視圖。, 為什麼您要使用 Woo Table Pro - 免費 WooCommerce 產品表...。
  • WP Post List Table 》WordPress Post List Table 外掛可以在表格內列出文章清單。您可以顯示自訂文章型別,如 WooCommerce 產品或任何其他類型的文章。表格中可以顯示文章標題、分...。
  • iThemelandCo Product Table for WooCommerce 》WooCommerce Product Table 外掛程式是 WordPress 設計的一個對於電子商務和網店網站非常有用的擴充功能。這個外掛程式可以大幅改變線上購物網站的外觀。, 如...。
  • Data table plugin: Spreadsheets | Google Sheets | WooCommerce product tables 》- 使用我們的 WordPress 外掛,輕鬆地創建出引人注目、互動式的表格,無需編碼。, - 無限制的表格數量,讓你可以無限制地組織和展示數據,無論你是在經營小型...。

文章
Filter
Apply Filters
Mastodon