=== Product List, Product Showcase, and Product Flip Layout for WooCommerce – Product Display ===
Contributors: wpazleen, sambyte
Tags: woocommerce product grid, woocommerce product slider, product carousel for woocommerce, product table, woocommerce product gallery
Requires at least: 5.9
Tested up to: 6.9
Requires PHP: 7.2
Stable tag: 2.2.3
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Create beautiful WooCommerce product grids, sliders, tables, carousels, and galleries with AJAX filtering, Elementor support, and responsive layouts.

=== Description ===

**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.

[youtube https://youtu.be/M4T0jubp9h8] 

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](https://masonry.desandro.com/))
  - **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](https://github.com/desandro/masonry).
  - **License:** MIT License

- **Slick.js:** A responsive carousel jQuery plugin ([slick](https://kenwheeler.github.io/slick/))
  - **Purpose:** Used to create responsive product carousels and sliders.
  - **Source:** The full, unminified source code is available at [kenwheeler](https://github.com/kenwheeler/slick).
  - **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](https://www.npmjs.com/package/toastmaster))
  - **Purpose:** Used to create toast, tag, notices.
  - **Source:** The full, unminified source code is available at [toastmaster](https://www.npmjs.com/package/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


== Installation ==

1. Upload the plugin folder to `/wp-content/plugins/product-display`  
2. Activate via **Plugins** menu in WordPress  
3. Go to **Dashboard > Product Display** to configure your settings  
4. Use Elementor or shortcodes to insert your desired **Product showcase**, **Product table**, or **Product gallery** 


== How to Use ==

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


== Frequently Asked Questions ==

= Is Product Display compatible with my theme? =
Yes! Product Display is designed to work with any properly coded WordPress theme. It's been tested with popular themes like Astra, OceanWP, GeneratePress, Storefront, Divi, Avada, and many others. The plugin uses clean, semantic HTML and follows WordPress coding standards.

= Does it work with WooCommerce HPOS (High-Performance Order Storage)? =
Absolutely! Product Display is fully compatible with WooCommerce HPOS and has been tested with the latest WooCommerce versions. It supports both HPOS and legacy order storage systems.

= Can I use multiple layouts on the same page? =
Yes, you can display multiple product layouts on the same page using different shortcodes or Elementor widgets. Each layout can have unique settings, styling, and product selections.

= Is the plugin mobile-responsive? =
Yes, all layouts are fully responsive and mobile-optimized. The plugin uses a mobile-first approach and automatically adjusts columns, spacing, and navigation for different screen sizes.

= Can I customize the colors and styling? =
Absolutely! The plugin includes extensive customization options for colors, fonts, spacing, borders, shadows, and more. You can match any theme design without writing custom CSS.

= Does it support product variations and attributes? =
Yes, the plugin fully supports WooCommerce variable products, grouped products, external products, and all product attributes. Customers can select variations directly from the product display.

= Can customers filter products without page refresh? =
Yes! The AJAX filtering feature allows customers to filter products by category, price, attributes, and tags without page reloads, providing a smooth shopping experience.

= Is the wishlist feature included? =
Yes, Product Display includes a built-in advanced wishlist system with floating button, modal interface, guest support, and social sharing capabilities.

= Can I compare products side-by-side? =
Yes, the compare feature allows customers to compare multiple products in a detailed table format, showing prices, features, ratings, and specifications.

= Does it work with Elementor? =
Yes! Product Display includes a dedicated Elementor widget with live preview, full control over settings, and seamless integration with Elementor Pro theme builder.

= Can I display products from specific categories? =
Yes, you can filter products by categories, tags, attributes, stock status, featured status, sale status, and more using shortcode parameters or widget settings.

= Is it compatible with multilingual sites? =
Yes, the plugin is fully compatible with WPML, Polylang, and other translation plugins. It includes translation files and supports RTL languages.

= Does it affect site performance? =
No, the plugin is optimized for performance with lazy loading, minified assets, efficient database queries, and caching compatibility. It actually improves user experience with AJAX interactions.

= Is there documentation available? =
Yes, comprehensive documentation is available including setup guides, layout explanations, customization tutorials, shortcode references, and video tutorials.

= What's the difference between free and premium versions? =
The free version includes all core layouts and features. Premium versions include additional layouts, advanced customization options, priority support, and exclusive features.

= Can I use it for B2B or wholesale stores? =
Absolutely! The table layouts and bulk features are perfect for B2B stores, wholesale operations, and any business requiring detailed product information and comparison capabilities.

= Does it work with other WooCommerce plugins? =
Yes, Product Display is compatible with popular WooCommerce extensions including currency switchers, subscription plugins, booking plugins, and most third-party add-ons.

= How do I get support? =
Support is available through the WordPress.org support forum, comprehensive documentation, video tutorials, and FAQ section. Premium users may have access to priority support channels.


== Screenshots ==

1. Product Display Builder Panel
2. WooCommerce Product Grid Layout
3. Product List Layout
4. Product Table Layout
5. Product Showcase Design
6. Product Gallery Layout
7. Product Slider Layout
8. CTA Product Layout

== Changelog ==

For a detailed list of updates, refer to our [Changelog](https://headwayapp.co/product-display-changelog).

### 2.2.3 – 15 Feb 2026
- 🐞 Fixed the editor style on-changes stuck. 

### 2.2.2 – 15 Feb 2026
- ✨ Enhanced the layout styles and UX 
- 🐞 Fixed the variable product button conflicting with add to cart
- 🐞 Fixed the Recommended page loading issues 

### 2.2.1 – 12 Feb 2026
- 🐞 Fixed the licenses activation issues. 

### 2.2.0 – 25 Dec 2025
- ✨ Introduced a new **Shop Page Layout Selector** for better customization.
- 🔄 Updated the **Freemius SDK** to the latest version.
- ❤️ Enhanced **Compare** feature with **Add to Wishlist** support.
- 🐞 Fixed the load_plugin_textdomain issues 

### 2.1.0 – 13 Dec 2025
- ✨ Introduced the Advanced Wishlist for easier and more intuitive product cart management.

### 2.0.2 – 03 Dec 2025
- **Enhancement:** WP 6.9 compatibility

### 2.0.1 – 06 Nov 2025
- 🐞 Bug Fixing: Default values not shows in product layout preview
- 🐞 Bug Fixing: Caption layout style fixed 
- 🐞 Bug Fixing: Get started url redirection to wrong slug 

### 2.0.0 – 01 Nov 2025
- ✨ Fully revamped using React
- ✨ Introduce 18 new Caption layouts

### 1.2.3 – 31 Oct 2025
- ✨ Maintenance release

### 1.2.2 – 25 July 2025
- ✨ Customization option optimize 
- 🐞 Bug Fixing:
  - Elementor widget settings fields  
  - Fixed refresh layout creating error issues 

### 1.2.1 – 19 July 2025
- ✨ Elementor pagebuilder support:
  - Dedicated Elementor widget support with live preview in editor 

- 🐞 Bug Fixing:
  - Fixed the missing layout issues in showcase template 
  - Fixed the Ajax and Pagination Issues
  - Other minor bug fixing 

### 1.2.0 – 28 June 2025
- ✨ Update Dashboard:
  - Drive conversions with a bold call-to-action layout 
  - Display products in a clean, organized list format
  - Introduce engaging flip box layouts for product details
  - Present products in interactive sliding displays

### 1.1.0 – 26 June 2025
- ✨ Update Dashboard:
  - New Editor Showcase panel 
  - New Product Display Type
  - New Product Showcase Mode
  - New Product Layout Style
- 🛠️ SDK Integration:
  - Added SDK 

### 1.0.0 - 20 June 2025
- 🎉 Initial stable release


