WP Manifestindependent plugin directory
manifest / ecommerce / woocommerce-product-reels

WooCommerce Product Reels

Add TikTok / Instagram / Shorts style 9:16 vertical video reels to WooCommerce products with YouTube & Media Library support, single product display below Add to Cart, 5-column homepage grid shortcode, and an interactive Shoppable Lightbox Modal.

by Md Alamin · github.com/developeralaminvi/woocommerce-product-reels · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/developeralaminvi/woocommerce-product-reels/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/developeralaminvi/woocommerce-product-reels ↗

🎬 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"]
Parameter Default Description Example
columns 5 Grid column count (1 to 6) columns="5"
limit 10 Maximum number of products to show limit="12"
category "" Filter by category slug category="baby-clothes,toys"
orderby date Sort by date, rand, title, menu_order orderby="rand"
order DESC DESC or ASC order="DESC"
heading "" Optional section title heading="Watch Our Cutest Products in Action ✨"

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.