=== ProductReels – Shoppable Video Reels for WooCommerce ===
Contributors: bestwpexpert
Tags: shoppable video, woocommerce, product video, video reels, ugc
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Turn WooCommerce product videos and UGC into shoppable video reels, carousels, sliders, popups and interactive video stories.

== Description ==

**ProductReels helps you turn product videos into interactive, shoppable experiences for WooCommerce.**

Display short vertical videos, customer UGC, product demos, tutorials and unboxings as reels across your store.

Show videos as a **product page carousel, homepage reel slider, floating product reel, story-style category reel, grid, marquee or stacked cards**.

When shoppers open a reel, they can browse videos in a fullscreen, swipeable player and interact with the featured product without leaving the experience.

Tag WooCommerce products, display product cards, add custom call-to-action buttons and let customers add products directly to their cart.

ProductReels includes a visual widget editor, multiple display layouts, Gutenberg and Elementor support, reusable widgets and built-in video analytics.

**Every ProductReels feature is free.**

There is no Pro version, no license key and no locked premium features.

= Turn product videos into shoppable reels =

ProductReels can be used for:

* Product demonstrations
* Customer UGC
* Product reviews
* Unboxing videos
* Beauty and fashion reels
* Product tutorials
* New product launches
* Product highlights
* Category stories
* Homepage video sliders
* WooCommerce product-page videos

= Display reels anywhere on your store =

Choose how your videos appear depending on the page and shopping experience you want to create.

**Floating Product Reels**

Display a floating shoppable video reel on WooCommerce product pages or other areas of your website.

The reel stays visible while shoppers browse and gives them quick access to product-focused video content.

**Homepage Reel Slider**

Create a scrollable carousel of vertical shoppable videos for your homepage, landing pages, shop pages or promotional sections.

Visitors can quickly browse multiple product videos without leaving the page.

**Product Page Carousel**

Place a horizontal carousel of shoppable video reels inside WooCommerce product pages.

Use it for product demonstrations, customer videos, tutorials, reviews or related product content.

**Story-Style Category Reels**

Create round, story-style video thumbnails inspired by familiar social media interfaces.

Use them to highlight categories, collections, product groups or campaigns.

= Key features =

* **Shoppable videos** – Tag WooCommerce products or add custom call-to-action buttons to reels.
* **Add to cart from video** – Let customers add tagged products directly from the reel experience.
* **Floating product reels** – Display compact floating video widgets on product pages.
* **Homepage reel slider** – Create scrollable shoppable video sections.
* **Product page carousel** – Add vertical product videos directly inside product detail pages.
* **Story-style reels** – Display round video thumbnails for categories or collections.
* **Five core layouts** – Grid, carousel, marquee, stacked cards and floating popup.
* **Fullscreen reels player** – Swipe, scroll or use keyboard navigation between videos.
* **Video sources** – WordPress Media Library, self-hosted MP4/WebM, YouTube Shorts and Vimeo.
* **Live visual editor** – Customize widgets and preview changes before publishing.
* **Video analytics** – Track views, clicks and click-through rate.
* **Reusable widgets** – Create a widget once and display it in multiple places.
* **WooCommerce product tagging** – Connect reels with products and product cards.
* **Custom CTA buttons** – Link reels to products, pages or external destinations.
* **Shortcode support** – Add reels anywhere using a shortcode.
* **Gutenberg block** – Insert ProductReels directly from the WordPress editor.
* **Elementor widget** – Add reels using Elementor's visual builder.
* **Responsive design** – Customize the experience across desktop, tablet and mobile.
* **Performance optimized** – Scripts load only when ProductReels is used.
* **Lazy-loaded videos** – Videos load as needed.
* **Accessibility support** – Keyboard controls, focus management and reduced-motion support.
* **Privacy-friendly** – No visitor information is sent to ProductReels.
* **Works without WooCommerce** – Video reels, custom links and analytics can also work on regular WordPress sites.

= Five video gallery layouts =

ProductReels includes multiple ways to display your video content.

**Grid**

Display reels in responsive columns that automatically adapt to the available space.

**Carousel**

Create a horizontal reel slider with navigation buttons, drag-to-scroll interaction and snapping.

**Marquee**

Create an automatically scrolling video rail for product promotions, collections or visual storytelling.

The marquee pauses on hover and respects reduced-motion preferences.

**Stacked Cards**

Display videos as an interactive stack of cards that visitors can browse through.

**Floating Popup**

Show a compact floating reel in a corner of the screen.

The popup can appear immediately, after a delay or after the visitor scrolls down the page.

= Visual widget editor =

Create and customize your reel widgets from a visual editor.

The editor includes:

* Reel selection
* Live widget preview
* Drag-and-drop reel ordering
* Responsive controls
* Reel shape and size
* Spacing and gaps
* Borders and shadows
* Play button styling
* View badge styling
* Widget title controls
* Navigation colors
* Product card styling
* Player behavior
* Device-specific settings

The preview uses the same frontend components as the published widget, helping you understand how the final reel layout will appear.

= Fullscreen shoppable video player =

When a visitor opens a reel, ProductReels displays it in an immersive fullscreen video player.

Features include:

* Horizontal or vertical swipe navigation
* Keyboard navigation
* Mouse-wheel navigation
* Browser back-button support
* Video seekbar
* Volume controls
* MP4 and WebM playback
* YouTube Shorts support
* Vimeo support
* Product cards
* Custom CTA buttons
* WooCommerce add-to-cart
* Focus management
* Scroll locking while the player is open

Provider scripts are only loaded when they are needed.

= WooCommerce product integration =

Connect individual reels with WooCommerce products.

Product cards can be displayed inside the video player so shoppers can see product information while watching the video.

Customers can add supported products directly to their cart using the WooCommerce Store API.

ProductReels also keeps supported theme mini-cart experiences synchronized after products are added.

= Video analytics =

Understand how visitors interact with your reels.

ProductReels tracks:

* Total views
* Total clicks
* Click-through rate
* Views per reel
* Clicks per reel
* Button clicks
* Widget performance

Views are rate-limited per visitor and per reel.

Visitor IP addresses are hashed using WordPress salts before temporary rate-limiting use and are not stored in ProductReels analytics tables.

= Built for performance =

ProductReels is designed to avoid loading unnecessary assets.

* Frontend scripts load only on pages containing ProductReels.
* The fullscreen player loads separately when it is first needed.
* Videos are lazy-loaded as they enter the viewport.
* Widget payloads are cached.
* Editing a widget automatically invalidates the relevant cache.
* YouTube and Vimeo player SDKs load only when required.

= Works without WooCommerce =

ProductReels can also be used on a standard WordPress website.

Without WooCommerce you can still use:

* Video reels
* Video widgets
* Custom CTA links
* Video galleries
* Story-style reels
* Analytics

WooCommerce-specific product tagging and add-to-cart features become available when WooCommerce is active.

= External services =

ProductReels does not send information about your website or visitors to ProductReels servers.

Third-party services are contacted only when you choose to use videos hosted by those providers.

**Vimeo**

When an administrator adds a Vimeo URL, ProductReels may request metadata such as the video's poster image and duration from Vimeo's public oEmbed service:

`https://vimeo.com/api/oembed.json`

Only the Vimeo URL entered by the administrator is sent.

When a visitor opens a Vimeo reel, Vimeo's Player SDK may be loaded in the visitor's browser:

`https://player.vimeo.com/api/player.js`

Vimeo's Do Not Track option is enabled where supported.

Vimeo Terms of Service:
https://vimeo.com/terms

Vimeo Privacy Policy:
https://vimeo.com/privacy

**YouTube**

For YouTube videos, ProductReels may display the thumbnail provided by YouTube:

`https://img.youtube.com/vi/...`

When a visitor opens a YouTube reel, the YouTube IFrame Player API may be loaded:

`https://www.youtube.com/iframe_api`

YouTube Terms of Service:
https://www.youtube.com/t/terms

Google Privacy Policy:
https://policies.google.com/privacy

Neither provider SDK is loaded until a visitor opens a reel using that provider.

Videos uploaded to the WordPress Media Library or served from your own hosted URL do not require these third-party video providers.

Developers can use the `productreels_allow_provider_lookup` filter to disable Vimeo metadata lookup.

= Source code and build instructions =

Readable JavaScript, JSX and SCSS source files are included in:

* `admin/src`
* `public/src`
* `block/src`
* `src/shared`

See `README.md` for build instructions.

See `THIRD-PARTY-NOTICES.txt` for licenses related to bundled dependencies.

== Installation ==

1. Go to **Plugins → Add New Plugin** in your WordPress dashboard.
2. Search for **ProductReels**.
3. Install and activate the plugin.
4. Go to **ProductReels → All Reels**.
5. Add your first video using the WordPress Media Library, YouTube Shorts, Vimeo or a hosted MP4/WebM URL.
6. Go to **ProductReels → Create Widget**.
7. Choose your reels and select a layout.
8. Customize the widget using the visual editor.
9. Publish the widget.
10. Add it to your website using a shortcode, Gutenberg block or Elementor widget.

You can also manually upload the plugin directory to:

`/wp-content/plugins/productreels/`

Example shortcode:

`[productreels id="1"]`

== Frequently Asked Questions ==

= What is a shoppable video? =

A shoppable video connects video content with products or calls to action.

ProductReels lets you tag WooCommerce products in videos so customers can discover products and add them to their cart while watching a reel.

= Can I show video reels on WooCommerce product pages? =

Yes.

You can display ProductReels on WooCommerce product pages using the ProductReels shortcode, Gutenberg block or Elementor widget.

You can create a product page carousel, story-style reels or floating product reels depending on your layout.

= Can I display reels on my homepage? =

Yes.

Use a ProductReels carousel, grid, marquee or other layout to create a homepage reel slider.

You can also use the same widgets on landing pages, shop pages and other WordPress pages.

= Can I create floating video reels? =

Yes.

The floating popup layout lets you display a compact video reel in a corner of the visitor's screen.

It can appear when the page loads, after a delay or after the visitor scrolls.

= Can I create story-style video thumbnails? =

Yes.

ProductReels can display circular video thumbnails that work well for categories, collections, campaigns or groups of products.

= Can I use TikTok or Instagram videos? =

ProductReels does not currently provide direct TikTok or Instagram importing.

If you own the original video, you can upload the MP4 file to your WordPress Media Library.

You can also use YouTube Shorts, Vimeo or a hosted MP4/WebM URL.

= Is ProductReels free? =

Yes.

All currently available ProductReels features are included for free.

There is no Pro version, license key or premium feature lock.

= Does ProductReels work with Elementor? =

Yes.

When Elementor is active, the **ProductReels** widget appears in the Elementor editor.

= Does ProductReels support Gutenberg? =

Yes.

ProductReels includes a Gutenberg block that can be added directly from the WordPress block editor.

= Will ProductReels slow down my website? =

ProductReels is designed to minimize unnecessary frontend loading.

Plugin assets are loaded only on pages containing a ProductReels widget, the fullscreen player is loaded separately when required and videos are lazy-loaded.

= Which video sources are supported? =

ProductReels supports:

* WordPress Media Library videos
* Hosted MP4 URLs
* Hosted WebM URLs
* YouTube Shorts
* Vimeo

= Which video format should I use? =

For broad browser compatibility, MP4 video encoded using H.264 video and AAC audio is recommended.

= How are video views counted? =

A view is counted after approximately one second of actual playback.

View counting is rate-limited per visitor and reel to reduce duplicate counts.

= Does ProductReels store personal visitor data? =

ProductReels does not store visitor IP addresses in its analytics tables.

A salted hash of the visitor's IP address may be used temporarily for view rate limiting.

Browser storage may also be used to remember counted reels or dismissed popup states.

= What happens when ProductReels is uninstalled? =

Plugin data is preserved by default.

Enable **Delete all plugin data on uninstall** under **ProductReels → Settings** if you want ProductReels tables and options removed when the plugin is deleted.

= Can I reuse the same reel in multiple widgets? =

Yes.

Reels are independent from widgets and can be reused across multiple layouts and pages.

Deleting a widget does not automatically delete its reels.

== Screenshots ==

1. **Floating Product Reels** – Display a shoppable floating video reel on WooCommerce product pages and let shoppers discover products while browsing.
2. **Homepage Reel Slider** – Showcase multiple shoppable video reels in a scrollable carousel on your homepage, shop or landing pages.
3. **Product Page Carousel** – Add a horizontal carousel of product videos, customer UGC and tutorials directly inside WooCommerce product detail sections.
4. **Story-Style Category Reels** – Turn categories and collections into interactive story-style video thumbnails that shoppers can quickly explore.

== Changelog ==

= 1.0.0 =
* Initial release.

== Upgrade Notice ==

= 1.0.0 =
Initial release of ProductReels.