Gallery WooCommerce Elementor

Transform your WooCommerce shop into a stunning Chris Burkard-style photography gallery with advanced masonry layouts, Elementor widgets, and professional print variations.

Features

🎨 Chris Burkard Style Gallery

• True Masonry Layout: CSS columns-based masonry for authentic Chris Burkard aesthetic
• Hover Overlays: Elegant product information overlays with smooth animations
• Professional Typography: Clean, modern typography matching professional photography sites
• Responsive Design: Perfect display across all devices

🛒 WooCommerce Integration

• Seamless Integration: Works with existing WooCommerce products and categories
• Enhanced Product Pages: Chris Burkard-style single product layouts
• Photo Print Variations: Built-in support for photo print products
• Cart & Checkout: Enhanced cart and checkout experiences

🧩 Elementor Widgets

• Gallery Grid Widget: Display products in responsive grid layouts
• Product Masonry Widget: Chris Burkard style masonry layout
• Featured Products Widget: Showcase featured products
• Product Carousel Widget: Sliding product carousel
• Category Grid Widget: Display product categories

📱 Shortcodes

• [gwe_gallery] - Main gallery shortcode with full customization
• [gwe_featured_products] - Featured products display
• [gwe_product_carousel] - Product carousel slider
• [gwe_product_masonry] - Masonry layout gallery
• [gwe_category_grid] - Category grid display

⚡ Advanced Features

• Lightbox Gallery: Professional lightbox for image viewing
• Social Sharing: Facebook, Twitter, Pinterest integration
• Advanced Filters: Category, tag, price, and attribute filtering
• AJAX Loading: Smooth pagination and filtering
• Performance Optimized: Lazy loading and image optimization
• SEO Friendly: Proper meta tags and structured data

Installation

1. Upload Plugin: Upload the plugin files to /wp-content/plugins/gallery-woocommerce-elementor/
2. Activate: Activate the plugin through the 'Plugins' menu in WordPress
3. Requirements: Ensure WooCommerce and Elementor are installed and activated
4. Configure: Go to Gallery > Dashboard to configure settings

Quick Start

Using Shortcodes

Basic Gallery:

[gwe_gallery columns="auto" style="chris-burkard"]

Featured Products:

[gwe_featured_products per_page="6" columns="3"]

Product Carousel:

[gwe_product_carousel slides_to_show="4" autoplay="true"]

Masonry Layout:

[gwe_product_masonry per_page="16" style="chris-burkard"]

Using Elementor Widgets

1. Open Elementor editor
2. Search for "Gallery WooCommerce" in the widgets panel
3. Drag and drop the desired widget
4. Configure settings in the widget panel

Configuration

General Settings

• Gallery Style: Choose between Chris Burkard, Modern, Classic, or Minimal
• Columns: Set number of columns or use auto masonry
• Gap Size: Adjust spacing between gallery items
• Animation Speed: Control animation timing

Style Settings

• Enable Lightbox: Toggle lightbox functionality
• Social Sharing: Enable/disable social sharing buttons
• Hover Effects: Control overlay animations
• Custom Colors: Set primary and secondary colors

Performance Settings

• Lazy Loading: Enable lazy loading for images
• Image Optimization: Automatic image optimization
• Cache Duration: Set cache duration for better performance

Shortcode Parameters

gwe_gallery

• columns - Number of columns (2, 3, 4, 5, auto)
• gap - Gap between items in pixels
• style - Gallery style (chris-burkard, modern, classic, minimal)
• category - Product category slug
• per_page - Number of products to display
• orderby - Order products by (date, title, price, popularity, rating, rand)
• order - Order direction (ASC, DESC)
• enable_lightbox - Enable lightbox (true, false)
• enable_social - Enable social sharing (true, false)
• enable_overlay - Enable hover overlay (true, false)

gwe_featured_products

• per_page - Number of featured products
• columns - Number of columns
• orderby - Order products by
• order - Order direction
• show_price - Show product price (true, false)
• show_add_to_cart - Show add to cart button (true, false)

gwe_product_carousel

• per_page - Number of products
• slides_to_show - Number of slides visible
• autoplay - Enable autoplay (true, false)
• category - Product category slug
• show_dots - Show navigation dots (true, false)
• show_arrows - Show navigation arrows (true, false)

gwe_product_masonry

• per_page - Number of products
• category - Product category slug
• gap - Gap between items
• style - Masonry style (chris-burkard, pinterest, modern)

gwe_category_grid

• columns - Number of columns
• show_empty - Show empty categories (true, false)
• show_count - Show product count (true, false)
• parent - Parent category ID

Elementor Widgets

Gallery Grid Widget

• Gallery Source: Products, Categories, Featured, Sale
• Columns: 2-5 columns or auto masonry
• Posts Per Page: Number of items to display
• Order By: Date, Title, Price, Popularity, Rating, Random
• Gallery Style: Chris Burkard, Modern, Classic, Minimal
• Gap Size: Spacing between items
• Features: Lightbox, Social Sharing, Hover Overlay

Product Masonry Widget

• Posts Per Page: Number of products
• Category: Filter by product category
• Masonry Style: Chris Burkard, Pinterest, Modern
• Gap Size: Spacing between items

Featured Products Widget

• Posts Per Page: Number of featured products
• Columns: 2-4 columns
• Show Price: Toggle price display
• Show Add to Cart: Toggle add to cart button

Product Carousel Widget

• Posts Per Page: Number of products
• Slides to Show: Number of visible slides
• Autoplay: Enable automatic sliding
• Show Dots: Show navigation dots
• Show Arrows: Show navigation arrows

Category Grid Widget

• Columns: 2-4 columns
• Show Empty: Display empty categories
• Show Count: Display product count

Customization

CSS Customization

The plugin uses CSS custom properties for easy customization:

:root {
    --gwe-gap: 20px;
    --gwe-overlay: rgba(0, 0, 0, 0.7);
    --gwe-text-primary: #ffffff;
    --gwe-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

JavaScript Events

The plugin provides JavaScript events for custom functionality:

// Gallery initialized
$(document).on('gwe:gallery:initialized', function(event, gallery) {
    console.log('Gallery initialized:', gallery);
});

// Filter applied
$(document).on('gwe:filter:applied', function(event, data) {
    console.log('Filter applied:', data);
});

Troubleshooting

Common Issues

Widgets not showing in Elementor:

• Ensure Elementor is active and updated
• Check if widgets are registered in Gallery > Test page
• Clear Elementor cache

Shortcodes not working:

• Verify shortcode syntax
• Check if products exist
• Test with Gallery > Test page

Styling issues:

• Clear browser cache
• Check for theme conflicts
• Verify CSS files are loading

Performance issues:

• Enable lazy loading
• Optimize images
• Use caching plugins

Debug Mode

Enable debug mode by adding to wp-config.php:

define('GWE_DEBUG', true);

Support

Documentation

• Plugin Dashboard: Gallery > Dashboard
• Test Page: Gallery > Test
• Settings: Gallery > General/Style/Performance

System Requirements

• WordPress 5.0+
• PHP 7.4+
• WooCommerce 8.0+
• Elementor 3.0+
• Memory: 256MB+

Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

Changelog

Version 2.0.0

• Complete redesign with Chris Burkard style
• Enhanced Elementor widgets
• Improved shortcode functionality
• Better performance optimization
• Mobile-responsive design
• Advanced filtering system

Version 1.0.0

• Initial release
• Basic gallery functionality
• Elementor integration
• WooCommerce compatibility

License

This plugin is licensed under the GPL v2 or later.

Credits

Inspired by the beautiful photography galleries of Chris Burkard and other professional photographers.

Need help? Check the Test page in your WordPress admin under Gallery > Test for diagnostics and live previews.