WooCommerce Produktgalerie: Zoom, Lightbox und Video

Bei Produkten, die Menschen über ihr Aussehen kaufen, ist die Galerie das Schaufenster. Kundinnen und Kunden beurteilen Passform, Qualität und Detail anhand der Bilder, lange bevor sie ein Wort der Beschreibung lesen, und eine schwache Galerie kostet still und leise Umsatz und lädt zu Retouren ein. WooCommerce liefert eine Galerie von Haus aus mit, und sie funktioniert, aber sie ist bewusst einfach gehalten: ein Streifen mit Thumbnails, eine schlichte Lightbox und ein Vergrößerungseffekt, der sich auf ältere Skripte stützt. Dieser Leitfaden erklärt, was die Produktgalerie für die Conversion tatsächlich leistet, was eine gute Erweiterung braucht und wie das kostenlose Plugin Reel der WooCommerce-Galerie Zoom, eine barrierefreie Lightbox und Video hinzufügt, ohne die Seite zu verlangsamen oder das Layout zu verschieben.

Wozu die Produktgalerie da ist

Die Galerie ist der Teil der Produktseite, der die Arbeit eines physischen Ladens übernimmt. Im Geschäft nimmt eine Kundin den Artikel in die Hand, dreht ihn um, hält ihn ins Licht, prüft die Nähte. Online muss die Galerie all das ersetzen. Ihre Aufgabe ist es, die Fragen zu beantworten, die Kundinnen und Kunden stellen würden, wenn sie den Artikel in der Hand hielten: Wie sieht die Textur aus der Nähe aus, wie groß ist er wirklich, wie bewegt er sich oder wie fällt er, wie sieht er von hinten aus. Wenn die Galerie das gut beantwortet, geschehen zwei Dinge zugleich. Mehr Menschen kaufen, weil ihre Fragen geklärt sind, bevor Zweifel aufkommen. Und weniger schicken den Artikel zurück, weil das, was ankommt, ihrer Erwartung entspricht.

Diesen zweiten Effekt unterschätzt man leicht. Eine Retoure ist nicht nur eine Rückerstattung: Sie bedeutet Rückversand, Wiedereinlagerung, einen Support-Vorgang und eine Kundin, die nun seltener erneut bestellt. Eine Galerie, die Menschen Details vor dem Kauf prüfen lässt, ist eine der günstigsten Methoden, um Retouren aus enttäuschten Erwartungen zu senken, weil die Enttäuschung gar nicht erst entsteht.

Hinweis: Eine Galerie, die Kundinnen und Kunden Details vor dem Kauf prüfen lässt, leistet doppelte Arbeit: Sie hebt die Conversion und senkt Retouren aus enttäuschten Erwartungen, weil die Enttäuschung gar nicht erst entsteht.

Warum die Standardgalerie Umsatz verschenkt

Die Galerie im WooCommerce-Kern taugt als Ausgangsbasis. Sie zeigt das Hauptbild, eine Reihe von Thumbnails und eine Lightbox per Klick, und in den meisten Themes vergrößert sich das Hauptbild beim Hover. Das Problem ist, dass sie dort aufhört, und sie bringt dabei einiges an Gewicht mit.

Die Hover-Vergrößerung und die Lightbox sind auf älteren Frontend-Skripten aufgebaut, darunter jQuery und ein paar mitgelieferte Bibliotheken, was das JavaScript der Seite vergrößert. Die Lightbox ist brauchbar, aber schlicht, und auf ihr Tastaturverhalten kann man sich über verschiedene Themes hinweg nicht verlassen. Eine native Unterstützung für Produktvideos fehlt vollständig, sodass das überzeugendste Medium für viele Produkte keinen Platz in der Galerie hat. Und weil die Galerie ganz oben auf der Produktseite sitzt, schlägt alles, was sie schlecht macht, eine Layout-Verschiebung beim Laden der Bilder, ein schweres Skript, das die Interaktion blockiert, direkt auf den ersten Eindruck und Ihren Core-Web-Vitals-Wert durch.

Warnung: Die Galerie sitzt ganz oben auf der Produktseite, sodass jede Layout-Verschiebung beim Laden der Bilder oder jedes schwere Skript, das die Interaktion blockiert, direkt auf den ersten Eindruck und Ihren Core-Web-Vitals-Wert durchschlägt.

Die Chance liegt also nicht darin, die Galerie zu ersetzen. Sie liegt darin, die drei Dinge zu verbessern, die etwas bewegen, und die Galerie dabei leichter statt schwerer zu machen.

Die drei Verbesserungen, die zählen

Bei einem visuellen Produkt rechtfertigen drei Ergänzungen ihren Platz immer wieder.

Bildzoom. Wenn Kundinnen und Kunden das Bild beim Hover vergrößern können, um Textur, Naht, Maserung oder Verarbeitung zu studieren, zeigt das Details, die ein Thumbnail verbirgt. Überall dort, wo Qualität sichtbar ist, baut das unmittelbar Kaufvertrauen auf. Entscheidend ist, dass der Zoom innerhalb des Galerierahmens bleibt und nicht über die restliche Seite hinausschießt und das Layout verschiebt.

Eine barrierefreie Lightbox. Wenn sich die Bilder bildschirmfüllend öffnen, können Kundinnen und Kunden sie richtig prüfen, statt auf ein Thumbnail zu schielen. „Barrierefrei“ ist hier das tragende Wort: Die Lightbox sollte sich per Tastatur öffnen und schließen lassen, den Fokus dorthin halten, wo er hingehört, solange sie geöffnet ist, und ihn beim Schließen sauber zurückgeben, damit sie für Tastatur- und Screenreader-Nutzer funktioniert, nicht nur für Menschen mit Maus.

Hinweis: Bei einer Lightbox ist „barrierefrei“ das tragende Wort: Sie sollte sich per Tastatur öffnen und schließen lassen, den Fokus halten, solange sie geöffnet ist, und ihn beim Schließen sauber zurückgeben, damit sie auch Tastatur- und Screenreader-Nutzern dient.

Produktvideo. Ein kurzer Clip zeigt Größe, Bewegung und realen Einsatz auf eine Weise, die Standbilder nicht leisten, sei es ein fallender Stoff, ein Gerät in Betrieb oder ein Möbelstück neben einer Person zum Größenvergleich. Ein hervorgehobenes Video im Galeriebereich ist eine der wirkungsvollsten Ergänzungen für jeden überlegten Kauf.

Reel for WooCommerce ergänzt genau diese drei: Hover-Zoom, eine barrierefreie Lightbox und ein hervorgehobenes Produktvideo.

Was eine gute Galerie-Erweiterung braucht

Ob Sie selbst bauen, kaufen oder installieren: Ein Galerie-Werkzeug für WooCommerce sollte eine kurze Checkliste erfüllen.

• Erweitern, nicht ersetzen. Es sollte auf der vorhandenen WooCommerce-Galerie aufbauen, sodass Ihre Bilder, Thumbnails und Theme-Stile weiter funktionieren, statt eine parallele Galerie unterzuschieben, die Sie zusätzlich pflegen müssen.
• Keine Layout-Verschiebung. Jedes Medium sollte seinen Platz reservieren, bevor es lädt, damit nichts springt, während sich die Seite setzt. Das ist das größte Core-Web-Vitals-Risiko der Galerie.
• Ein kleiner Footprint. Moderne Interaktion braucht kein jQuery. Ein kleines, aufgeschobenes Skript, das nur dort lädt, wo es gebraucht wird, hält die Produktseite schnell.
• Echte Barrierefreiheit. Tastaturbedienung und sauberes Fokus-Handling für die Lightbox, nicht nur ein Overlay für die Maus.
• Sinnvolle Steuerung. Unabhängige Ein-/Aus-Schalter für jede Funktion, sodass Sie nur das betreiben, was Ihr Sortiment braucht.
• Sauberes Verhalten. Skripte, die nur auf Produktseiten geladen werden, leicht erreichbare Einstellungen und eine saubere Deinstallation, die keine Reste hinterlässt.

Beachten Sie, was nicht auf dieser Liste steht: ein schwerer Alleskönner-Slider, der Ihr Theme umpflügt. Das Ziel ist eine schärfere Version der Galerie, die Sie bereits haben, nicht eine zweite Galerie obendrauf.

Wie Reel das löst

Reel ist ein kostenloses, quelloffenes Plugin, das die vorhandene Einzelprodukt-Galerie von WooCommerce erweitert, statt sie zu ersetzen. Das Markup wird in PHP erzeugt und durch eine einzige Vanilla-JavaScript-Datei progressiv angereichert, aufgeschoben und im Footer geladen, wobei Skripte und Stile nur auf der einzelnen Produktseite eingebunden werden. Es gibt kein jQuery. Jede der drei Funktionen hat ihren eigenen Ein-/Aus-Schalter, sodass Sie nur das betreiben, was Sie brauchen.

Die Reel-Produktgalerie im Shop, mit Hover-Zoom und einer barrierefreien Lightbox im Hauptbild des Produkts.

Hover-Zoom

Galeriebilder vergrößern sich beim Hover in einer Zoomstärke, die Sie wählen, irgendwo zwischen 1,0x und 3,0x. Die Transformation ist auf den Galerierahmen begrenzt, sodass das Vergrößern eines Bildes nie den Rest der Seite verschiebt. Weil Hover auf Touchscreens unzuverlässig ist, gibt es eine Option, den Zoom auf Touch-Geräten auszulassen, damit Kundinnen und Kunden am Smartphone oder Tablet nicht mit einem Hover-Effekt kämpfen müssen, der nie für sie gedacht war.

Die barrierefreie Lightbox

Klicken Sie auf ein beliebiges Galeriebild oder drücken Sie Enter oder Leertaste darauf, um es bildschirmfüllend zu öffnen. Die Lightbox ist tatsächlich per Tastatur bedienbar: Tab bleibt auf der Schließen-Schaltfläche, sodass der Fokus nicht hinter das Overlay rutschen kann, Escape schließt sie (ebenso ein Klick auf den Hintergrund), und der Fokus kehrt zu dem Bild zurück, das Sie geöffnet haben. Es ist ein festes Overlay, das verborgen startet, also keinen Platz reserviert und keine Layout-Verschiebung verursacht, bis eine Kundin es tatsächlich öffnet. Sie können in der Lightbox eine Bildunterschrift aus dem Alt-Text des Bildes anzeigen und die Beschriftung des Öffnen-Steuerelements für Screenreader anpassen, damit es etwas Sinnvolles ansagt.

Das hervorgehobene Video

Reel zeigt ein Video pro Produkt, entweder nach der Galerie oder vor der Produktzusammenfassung, ganz nach Ihrer Wahl. Die Quelle kann eine selbst gehostete Datei sein (MP4, M4V, WebM oder OGV), abgespielt mit dem nativen Videoplayer von WordPress, oder eine beliebige oEmbed-URL wie YouTube oder Vimeo, die der WordPress-Kern automatisch einbettet. So oder so sitzt das Video in einem 16:9-Rahmen, dimensioniert über die CSS-Eigenschaft aspect-ratio, sodass sein Platz reserviert ist, bevor es lädt, und die Seite nicht springt. Die Video-URL pro Produkt liegt im Produkt-Meta-Feld _reel_video_url, mit einem optionalen _reel_video_title für die Überschrift dieses Produkts. Wenn Sie das Video an einer anderen Stelle als im Galeriebereich möchten, rendern der Shortcode [reel_video] (mit den Attributen id und title) oder der Block „Reel: Featured video“ das Video des aktuellen Produkts im selben 16:9-Rahmen an beliebiger Stelle im Produktinhalt.

Reel stellt von sich aus keine API-Aufrufe oder Analytics-Anfragen. Die einzige ausgehende Anfrage ist jene, die der WordPress-Kern selbst über wp_oembed_get() macht, wenn Sie ein Video auf YouTube, Vimeo oder einen anderen oEmbed-Anbieter zeigen lassen, und Reel speichert das Ergebnis in einem Transient zwischen, um wiederholte Abrufe zu vermeiden. Selbst gehostete Videos lösen überhaupt keine externe Anfrage aus.

Die Einrichtung

Reel produktiv zu schalten dauert wenige Minuten:

1. Installieren Sie das Plugin über Plugins, Installieren, oder laden Sie es nach /wp-content/plugins/reel hoch. WooCommerce muss installiert und aktiv sein.
2. Aktivieren Sie es.
3. Öffnen Sie das oberste Menü Reel und schalten Sie die gewünschten Funktionen ein. Jede der drei hat ihren eigenen Schalter.
4. Legen Sie für den Hover-Zoom die Zoomstärke fest und entscheiden Sie, ob er auf Touch-Geräten ausgelassen werden soll. Für die Lightbox aktivieren Sie bei Bedarf die Alt-Text-Bildunterschrift und passen die Beschriftung des Öffnen-Steuerelements an. Für das Video wählen Sie Position, Autoplay, Überschrift und Einleitungstext.
5. Um einem Produkt ein Video zu geben, tragen Sie die URL im Meta-Feld _reel_video_url des Produkts ein (PRO ergänzt dafür ein bequemeres Editor-Feld, dazu unten mehr).

Die Einstellungsseite nutzt ein Karten-Layout mit Umschaltern, inline eingeblendeten Hilfe-Tooltips und einer Live-Steuerung der Zoomstärke, sodass Sie beim Einstellen sehen, was jede Option bewirkt. Die Storefront-Gestaltung baut auf themefähigen CSS-Custom-Properties mit fluider Größenanpassung, Dark-Mode-Unterstützung und Reduced-Motion-Schutz auf, sodass die Galerie ohne Zusatzaufwand zu Ihrem Theme passt. Reel ist HPOS- und Warenkorb-/Checkout-Block-kompatibel, übersetzungsbereit mit mitgelieferter POT-Datei und polnischer Übersetzung, und entfernt seine Optionen bei der Deinstallation sauber.

Die Reel-Einstellungsseite im WordPress-Admin, mit Ein-/Aus-Schaltern je Funktion und einer Live-Steuerung der Zoomstärke.

Praktische Tipps für eine Galerie, die konvertiert

Ein Plugin liefert den Mechanismus. Ein paar Gewohnheiten holen das Meiste daraus.

• Für den Zoom fotografieren. Hover-Zoom hilft nur, wenn das Ausgangsbild groß und scharf genug ist, um sich zu lohnen. Laden Sie hochauflösende Bilder hoch, damit das Vergrößern echte Details zeigt statt weicher Pixel.

Tipp: Hover-Zoom zahlt sich nur aus, wenn das Ausgangsbild groß und scharf genug ist, um sich zu lohnen. Laden Sie hochauflösende Bilder hoch, damit das Vergrößern echte Details zeigt statt weicher Pixel.

• Mit der drängendsten Frage beginnen. Ordnen Sie die Galerie so, dass die ersten Bilder den größten Zweifel beantworten, Größe, Passform, die Rückseite des Artikels, und überlassen Sie dem Hero-Bild die Aufgabe, den Ton zu setzen.
• Das Video kurz und nützlich halten. Ein Clip von zehn bis zwanzig Sekunden, der das Produkt im Einsatz oder in Bewegung zeigt, schlägt einen zweiminütigen Markenfilm, den niemand zu Ende sieht. Setzen Sie Video dort ein, wo Bewegung oder Größe tatsächlich etwas beitragen.
• An Touch-Nutzer denken. Hover-Zoom gehört den Maus-Nutzern; die Option zum Auslassen auf Touch gibt es, damit Smartphone-Käufer stattdessen eine saubere Lightbox erhalten. Lassen Sie sie aktiv, sofern Sie keinen Grund dagegen haben.
• Das erste Rendern schützen. Weil die Galerie oben auf der Seite sitzt, halten Sie das Hauptbild gut optimiert und lassen das Markup mit reserviertem Platz seine Arbeit tun, damit sich die Seite ohne Springen setzt.

Reel im Vergleich zum WooCommerce-Standard

Die Galerie im Kern ist eine Ausgangsbasis; Reel schärft die Teile, die verkaufen. Hier der Unterschied speziell für die Galerie:

Funktion	WooCommerce-Standard	Reel
Bildzoom	Einfache Vergrößerung	Hover-Zoom, Stärke 1,0x bis 3,0x, auf Touch auslassbar
Lightbox	Einfach	Barrierefrei: per Tastatur öffnen und schließen, Fokus-Falle und Rückgabe
Produktvideo	Keine native Unterstützung	Hervorgehobenes Video in der Galerie, selbst gehostet oder oEmbed
Video frei platzieren	Nicht möglich	Shortcode [reel_video] und ein Block
Layout-Stabilität	Ältere Skripte	Reservierter Platz, keine Layout-Verschiebung
Footprint	Stützt sich auf jQuery	Eine aufgeschobene Vanilla-JS-Datei, kein jQuery, nur Produktseiten
Steuerung je Funktion	Nicht möglich	Unabhängiger Ein-/Aus-Schalter für jede
Galerien je Variante, 360-Grad-Drehung	Nein	Ja (PRO-Add-on)
Kosten	Kostenlos (Kern)	Kostenlos (GPL); PRO-Add-on erweitert es

Kostenlos im Vergleich zu PRO

Das kostenlose Plugin Reel ist für sich genommen eine vollwertige Erweiterung: Hover-Zoom, eine barrierefreie Lightbox und ein hervorgehobenes Produktvideo, alles mit reserviertem Platz und ohne jQuery. Es ist kein Lockangebot.

Reel Pro ist ein separates Add-on, das das kostenlose Plugin installiert und aktiv voraussetzt und über Freemius statt über das WordPress.org-Verzeichnis ausgeliefert wird. Es erweitert das kostenlose Plugin für Shops mit höheren Medienansprüchen. PRO ergänzt einen eigenen Reel-Tab im Produkt-Editor mit einem richtigen Feld für die Video-URL und einem Live-Status „Video erkannt“, sodass Sie das Video eines Produkts festlegen, ohne von Hand an Meta-Feldern zu hantieren. Es ergänzt Galerien je Variante, bei denen das Hauptbild der Galerie in dem Moment auf die eigenen Bilder einer Variante wechselt, in dem die Kundin sie auswählt, mit einem winzigen, abhängigkeitsfreien Skript, das vorlädt, um ein Flackern zu vermeiden, und seinen Rahmen behält, um Layout-Verschiebung zu verhindern. Es ergänzt 360-Grad-Drehung, eine geordnete Bildfolge, durch die sich Kundinnen und Kunden in einem Viewer mit reserviertem Seitenverhältnis ziehen, wischen oder mit den Pfeiltasten bewegen können. Es ergänzt Autoplay-Regeln für Video, die warten können, bis das Video im sichtbaren Bereich ist, Autoplay auf Mobilgeräten unterbinden und Reduced-Motion-Vorgaben respektieren. Und es ergänzt CDN und Lazy-Loading für Medien, indem es Upload-URLs für Drehbilder und Variantengalerien auf eine CDN-Quelle umschreibt und schwerere Medien aufschiebt, bis sie sichtbar sind. Die kostenlose Edition deckt Zoom, Lightbox und Video durchgängig ab; PRO ist für Sortimente, die Variantenmedien, Drehung oder feinere Kontrolle über das Laden dieser Medien brauchen.

Die Kurzfassung

Bei visuellen Produkten übernimmt die Galerie den Verkauf, sie ist also mehr wert als die Standard-Ausgangsbasis. Die drei Verbesserungen, die zählen, sind Bildzoom, eine barrierefreie Lightbox und ein hervorgehobenes Produktvideo, aber nur, wenn sie mit reserviertem Platz und ohne jQuery ergänzt werden, damit die Seite schnell und stabil bleibt, ganz oben, wo erster Eindruck und Core Web Vitals zu Hause sind. Das kostenlose Plugin Reel erweitert die vorhandene WooCommerce-Galerie um alle drei, jede einzeln schaltbar und ohne eigene externe Aufrufe. Beginnen Sie dort und ergänzen Sie die Galerien je Variante, die 360-Grad-Drehung sowie die Autoplay- und CDN-Steuerung des PRO-Add-ons, sobald Ihr Sortiment es verlangt.