TikTok-style shoppable video reels for WooCommerce. Paste one YouTube link per product — the plugin builds a swipeable reel carousel, a full-screen immersive viewer, and a floating draggable video that follows shoppers inside the product gallery.
Shopable Reel brings the psychology of social video to a WooCommerce storefront — without subscriptions, without platform lock-in, without slowing the store down.
Milanu, a Bangladeshi fashion label running WooCommerce on the WoodMart theme, sells movement — flowing dupattas, swinging kurtis — through still photographs. Shoppers arriving from Facebook & TikTok expected the same swipe-and-watch experience they get on social apps.
The paid options were wrong for the job: ReelUp lives on Shopify and charges monthly; Ecomm Reels covers WordPress but offers little design or per-product control. So I built a free, self-owned plugin that is easier than both: one YouTube link per product, and the whole shoppable-reel experience assembles itself.
Everything a merchant touches is AJAX-driven (no reloads), documented inside the admin (Shortcode & Help screen), and exposed twice: as a drag-and-drop Elementor widget and as a shortcode with 15+ optional attributes.
Four steps, zero code for the merchant. Every screenshot below is from the live plugin running on the Milanu store. Click any image to zoom.
A new Shopable Reel menu lands in WP admin with three sub-screens. On Manage Reels the merchant picks any WooCommerce product from a dropdown, pastes the YouTube reel URL, optionally seeds a view count, and hits Save Reel — saved over AJAX, the connected-reels table updates in place. The stats strip tracks reels added, total views, products still missing a reel, and the most-viewed reel.
One Settings screen owns the whole design & behaviour system: query rules (count, category limit, order, hide reel-less products), the discount badge suffix with automatic percentage math (price 1990 → 1690 renders “-15%”), accent/text/arrow colours, card size, player rules (autoplay, start muted), viewer overlays (40% dim, 4px blur), mobile reel count, 450ms scroll speed, corner positions for the floating video — plus a Shortcode & Help screen that documents every attribute inside the admin itself.
Search “Shopable Reel Carousel” in the Elementor widget panel and drag it onto any page —
every setting above becomes a live widget control. Coders can instead paste
[shopable_reel_devsazzad] with 15+ optional attributes
(limit, category, orderby, scroll_speed,
card_width, colours…). Omitted attributes fall back to Settings.
Visitors swipe a horizontal reel carousel (view-count badge, discount, price, product thumb). A tap opens the full-screen viewer: the active reel centered in 9:16 while neighbours sit dimmed and blurred beside it, with mute, copy-link, prev/next and a Go button straight to the product. On the product page itself, a floating draggable video hovers over the gallery image — minimized into a configurable corner, expandable to a centered 9:16 player. No video attached? Nothing renders.
Stats strip (reels, total views, missing reels, top reel) above a connected-reels table with thumbnails, URLs, view counts and one-click remove — every mutation over AJAX.
Bind any WooCommerce product to a YouTube reel from a dropdown — or create an ACF URL field named reel_video_url and let it sync automatically. Zero double-entry.
9:16 stage with the active reel centered; neighbours dimmed (40%) and blurred (4px). Mute, copy-link, prev/next, brand header and a product chip with price + Go button.
A draggable picture-in-picture reel inside the product gallery: minimized to a configurable corner, expandable to a centered player. Theme-safe via gallery selector + fallback class.
“Shopable Reel Carousel” exposes every attribute as a widget control — counts, speed, colours, card size, Go button — with a live canvas preview. No shortcode typing for designers.
[shopable_reel_devsazzad] + 15+ optional attributes (limit, category, orderby, scroll_speed, colours, arrow & card sizing). Omit anything → Settings defaults apply.
Text/badge/arrow/viewer colours, icon sizes, card dimensions, overlay dim & blur, scroll speed, hover-expand icon, Go-button text — plus auto-computed discount badges (“-15%”).
Eye-badge counts formatted like social apps (1700 → 1.7K), counted once per session on real plays via YouTube player events — plus a “products without a reel” nudge list.
Nonce-secured admin-ajax endpoints for save/fetch/track; assets enqueued only where reels exist; iframes lazy-created on first open; muted autoplay respecting browser policy.
Built for this case study with pure HTML/CSS/JS: drag or arrow through the carousel, then tap any reel to open the full-screen viewer concept (keyboard ← → works too).
Real product data from the Milanu demo store · VASONTI · RUBAB · MUSKAN · FALAQ · ZAIRA
No custom tables, no framework bloat — post meta, options, nonces and the YouTube IFrame API, wired together with clean AJAX round-trips.
// Save a reel — no page reload, nonce-secured, capability-checked add_action( 'wp_ajax_sr_save_reel', 'sr_save_reel' ); function sr_save_reel() { check_ajax_referer( 'sr_nonce', 'nonce' ); if ( ! current_user_can( 'manage_options' ) ) wp_send_json_error( 'forbidden', 403 ); $product_id = absint( $_POST['product_id'] ); $video_url = esc_url_raw( wp_unslash( $_POST['video_url'] ) ); $views = absint( $_POST['views'] ); update_post_meta( $product_id, '_sr_video_url', $video_url ); update_post_meta( $product_id, '_sr_views', $views ); wp_send_json_success([ 'product_id' => $product_id, 'video_id' => sr_yt_id( $video_url ), // watch?v=ID → ID 'views' => sr_format_views( $views ), // 1700 → 1.7K ]); }
// Count a view once per session — only when the reel actually plays player.on( 'stateChange', ( state ) => { if ( state !== YT.PlayerState.PLAYING ) return; if ( sessionStorage.getItem( 'sr_viewed_' + reelId ) ) return; sessionStorage.setItem( 'sr_viewed_' + reelId, '1' ); fetch( sr_ajax.url, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ action: 'sr_track_view', nonce: sr_ajax.nonce, reel: reelId }), }) .then( r => r.json() ) .then( res => badge.textContent = res.data.views ); // eye-badge updates live });
// One shortcode, 15+ attrs — every one optional, falls back to Settings add_shortcode( 'shopable_reel_devsazzad', 'sr_render_carousel' ); function sr_render_carousel( $atts ) { $a = shortcode_atts([ 'limit' => sr_opt( 'count', 10 ), 'limit_mobile' => '', 'category' => '', 'orderby' => sr_opt( 'orderby', 'newest' ), 'scroll_speed' => 450, 'show_go_button' => 'yes', 'go_button_text' => 'Go', 'text_color' => '', 'accent_color' => '', 'arrow_bg_color' => '', 'arrow_size' => 36, 'card_width' => 200, 'card_height' => 350, ], $atts, 'shopable_reel_devsazzad' ); return sr_build_carousel( $a ); // server-rendered, zero-JS first paint }
Benchmarked against the two references the project set out to beat — ReelUp (Shopify app store) and Ecomm Reels (wordpress.org). Scroll sideways on mobile.
| Capability | Shopable Reel · v1.5.0 | ReelUp (Shopify) | Ecomm Reels (WP) |
|---|---|---|---|
| Platform | WooCommerce / WordPress | Shopify only | WordPress |
| Pricing | Free — self-owned code | Monthly subscription | Freemium |
| Setup per product | Paste 1 YouTube link · or ACF auto-sync | App install + plan + import | Manual mapping |
| Elementor widget | ✓ full controls + live preview | ✕ | ✕ |
| Full-screen reel viewer | ✓ dimmed + blurred side reels | ✓ | basic |
| Floating product-page video | ✓ draggable · minimize · expand 9:16 | ✕ | ✕ |
| Admin analytics | ✓ views · top reel · missing-reel nudge | ✓ | limited |
| Design control | ✓ 20+ colours / sizes / speeds / corners | theme-locked | few |
| Mobile reel-count control | ✓ | ✕ | ✕ |
| Shortcode attributes | ✓ 15+ with Settings fallback | n/a | few |
| AJAX admin (no reloads) | ✓ nonce-secured | ✓ | partial |
| In-admin documentation | ✓ Shortcode & Help screen | external | external |
The same answers live inside the plugin's Shortcode & Help screen. Looking for the Shopable Reel plugin? This is the official case study by its author, Sazzad Hossain (developersazzad).
reel_video_url and it syncs automatically without double entry.[shopable_reel_devsazzad] shortcode into a post, page or
HTML block (15+ optional attributes), or drag the “Shopable Reel Carousel” widget inside Elementor —
every setting is exposed as a live control.Every major surface of Shopable Reel v1.5.0 — click to zoom, arrow keys to navigate.
Used Shopable Reel, or explored this case study? Your feedback helps other WooCommerce merchants find the plugin. Drop a review below — it's published instantly.
Shopable Reel is a self-initiated product study: research, UX, WordPress architecture, frontend engineering and release — solo. If your store should sell in motion, let's talk.