Zum Inhalt springen
WooCommerce & WordPress Plugin Docs

Getting started

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Reel ships with hover zoom, the lightbox and the featured video all enabled, so a fresh install already upgrades the gallery, the only thing you must add is a video URL on the products that should have one. Open the Reel menu (capability manage_woocommerce, so shop managers reach it too) to tune the rest.

Before you start

Section titled “Before you start”
  • WordPress 6.5 or newer
  • WooCommerce active
  • PHP 8.1 or newer

Install

Section titled “Install”
  1. Install WooCommerce and make sure it is active.
  2. Install Reel from the plugin directory (when live on WordPress.org) or upload the reel folder to /wp-content/plugins/.
  3. Activate the plugin.

First configuration

Section titled “First configuration”

The two cards on the Reel screen hold every option:

  • Gallery zoom & lightbox, hover zoom (with a 1.0×-3.0× strength slider, default 1.45×), the option to skip zoom on touch, the lightbox, backdrop-click close, an alt-text caption and the accessible open-image label.
  • Featured video, the master switch, position (after gallery / before summary), autoplay, the heading toggle, a default heading and an optional intro paragraph.

Add a product video

Section titled “Add a product video”

For a video, set the URL in the product’s _reel_video_url meta field. A file ending .mp4, .m4v, .webm or .ogv plays with WordPress’s native player; any other URL is treated as an oEmbed source (YouTube, Vimeo, etc.) and embedded automatically. The video sits in a fixed-ratio 16:9 frame that reserves its space before loading. An optional _reel_video_title overrides the default heading for that product. To place the video somewhere other than the gallery, use the [reel_video] shortcode or the Reel: Featured video block, see Using the gallery features.

Verify on the product page

Section titled “Verify on the product page”
  1. Open a single product with a gallery.
  2. Hover a gallery image, it should magnify within the frame.
  3. Click (or press Enter/Space) an image, the lightbox should open full screen, trap focus on its close control and dismiss on Escape or a backdrop click.
  4. If you set a video, confirm it appears in its 16:9 frame in the position you chose.

Performance and accessibility

Section titled “Performance and accessibility”

Reel ships a single small vanilla-JavaScript file, deferred and in the footer, only on the single product page. The lightbox is a fixed overlay that starts hidden, the zoom transform is clipped to the gallery frame, and the video frame reserves space, so there is no Cumulative Layout Shift. The lightbox is fully keyboard operable, traps focus on close, restores focus on close and dismisses on Escape or backdrop click, and the styling respects prefers-reduced-motion.

Free vs PRO

Section titled “Free vs PRO”

The free edition covers hover zoom, the accessible lightbox and a featured video. Reel PRO is planned for 360-degree spin, video autoplay rules and CDN-backed lazy media, not basic gallery enhancement.

Need help?

Section titled “Need help?”