🎬 WooCommerce Product Reels (v1.0.3)

Transform standard WooCommerce product browsing into a high-converting TikTok / Instagram / YouTube Shorts style shopping experience.

🧸 Baby & Kids Store Aesthetic (#fb7010)

• Warm Joyful Baby Orange Palette: Default accent color #fb7010 with soft cream and pastel warm accents (#fff7ed, #ffedd5).
• High-Legibility Typography: Clean modern system font stack (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto) with optimal letter-spacing, line-heights, and crisp font weights so text is 100% readable regardless of active theme display fonts.
• Single Center Play/Pause Control: Single cute central orange play button that is visible when paused and smoothly fades out during playback.
• Vibrant Add to Cart Button: Full orange gradient with bold white typography, cart icon, and instant AJAX feedback.
• Complete Theme-Isolation & CSS Override Shield: Scoped resets on all child HTML tags so NO active WordPress theme (Flatsome, Woodmart, Astra, Divi, Elementor, OceanWP) can break layouts, distort video heights, or conflict with modal styles.

📌 Features Overview

• Vertical 9:16 Auto-Crop: Any video aspect ratio (16:9 widescreen, 4:3, square) automatically crops to a crisp 9:16 vertical Reel without stretching or black letterboxes.
• Dual Source Support:
  • WordPress Media Library: Upload and manage self-hosted MP4/WebM videos with reliable single-tap play/pause controls.
  • YouTube & Shorts URLs: Paste any YouTube watch or Shorts link with auto-generated HD thumbnails.
• Single Product Page Integration: Automatically displays below the Add to Cart button with muted in-view autoplay.
• Shoppable Split Lightbox Modal:
  • Left: 9:16 video player with full custom controls, sound unmuting, scrubber, play/pause tap, next/previous reel navigation, and touch swipe.
  • Right: Complete product card with rating, price, short description, quantity selector, and instant AJAX "Add to Cart" without page reload.
• 5-Column Multi-Product Responsive Grid: Showcase 1 reel per product across a customizable grid on your homepage or landing page.
• High-Performance Order Storage (HPOS) & Cart/Checkout Blocks Compatible (WooCommerce 8.0+ Ready).

⚡ Shortcodes Reference

1. Homepage / Multi-Product 5-Column Grid

[wc_product_reels_grid columns="5" limit="10"]

2. Single Product Reels (Page Builders)

[product_reels]

• Place anywhere inside Elementor, Divi, Gutenberg, or custom product templates.
• Automatically detects the current product ID on single product pages.
• Can also be used for any specific product: [product_reels product_id="123"].

🛠️ How to Add Reels to Products

1. Go to WordPress Admin > Products > All Products.
2. Click Edit on any product.
3. Scroll down to the 🎬 Product Reels / Shorts (9:16 Vertical Videos) box.
4. Click Add New Reel:
   • Choose Media Library (MP4) or YouTube / Shorts URL.
   • Select or paste your video.
   • (Optional) Set custom Reel Title, Badge/Subtitle (e.g. Must Have 🍼), and custom poster image.
   • Drag & drop the handle icon (☰) to reorder.
5. Click Update to publish the product.

⚙️ Plugin Settings

Go to WordPress Admin > WooCommerce > Product Reels:

• Auto Display on Single Product: Toggle on/off automatic display below Add to Cart.
• Position Hook: Choose Below Add to Cart Form, After Summary, or Before Tabs.
• Heading Text: Customize the section title (default: Watch Product in Action ✨).
• Player Accent Color: Set custom color (default: #fb7010).

🚀 Live Hosting Deployment (Hostinger / cPanel / LiteSpeed)

1. Upload the wooCommerce-product-reels folder to /wp-content/plugins/.
2. Activate via WordPress Admin > Plugins.
3. If using LiteSpeed Cache / Cloudflare / WP Rocket, click Purge All Cache after making updates.

📄 Changelog

v1.0.3

• Fixed Add to Cart Button Visibility: Restored orange gradient background, bold white typography, and cart icon.
• High-Legibility Typography Fix: Implemented clean system font stack with standard letter-spacing and line-heights, overriding quirky/squished theme display fonts.
• Fixed Double Play/Pause Overlay: Replaced stacked play/pause icons with a single clean center play button that automatically hides during playback.
• Fixed WP Media Library Video Interaction: Enhanced synchronized video click handling, buffer initialization, and play/pause state transitions.
• Frosted Video Header Badge: Video title overlay is now wrapped in a semi-transparent frosted glass badge for 100% legibility over any video background.
• High-Contrast Modal Close Button: Crisp circular white button with orange hover state and dark X icon.

v1.0.2

• Baby & Kids Store Design Theme: Redesigned UI with warm playful baby orange #fb7010, soft cream pastel accents (#fff7ed), bubbly 20px rounded corners, and cute badge styling.
• Complete Scoped CSS Isolation: Applied !important property shields and full scoped tag resets so active theme styles cannot distort heights, overwrite margins, or clip modals.

v1.0.1

• WooCommerce HPOS Compatibility: Declared custom_order_tables, cart_checkout_blocks, and product_block_editor compatibility to resolve WooCommerce incompatibility notices.
• Hostinger & Live Theme Compatibility: Appended Lightbox Modal directly to document.body to prevent overflow:hidden clipping and z-index stacking conflicts.
• Autoplay & Mobile Safety: Added promise catch handlers for mobile browser autoplay policies and client-side YouTube URL parser fallback.

v1.0.0

• Initial release with custom repeater meta box, single product display, 5-column grid shortcode, and Shoppable Split Lightbox.