WooCommerce Schnellansicht: AJAX-Produkt-Modal

Das Stöbern in einem WooCommerce-Katalog wird oft zu einer ermüdenden Schleife: ein Produkt anklicken, auf die Seite warten, sie ansehen, zurückgehen, das nächste anklicken, wieder warten. Jede Schleife ist ein vollständiger Seitenaufruf und ein Kontextwechsel, und jede Schleife ist eine Gelegenheit für die Kundschaft, den Faden oder das Interesse zu verlieren. Die Schnellansicht durchbricht diese Schleife. Sie öffnet das Wesentliche in einem Modal, das direkt aus der Listenansicht startet, sodass Kunden Optionen vergleichen und kaufen können, ohne das ständige Hin und Her. Dieser Leitfaden erklärt, was die Schnellansicht ist, warum sie hilft, was eine gute Umsetzung braucht und wie das kostenlose Plugin Peek sie in WooCommerce ergänzt.

Was die Schnellansicht ist

Die Schnellansicht zeigt die wichtigsten Details eines Produkts in einem Modal, das aus der Shop- oder Archivliste gestartet wird, ohne zur vollständigen Produktseite zu navigieren. Die Kundschaft klickt auf einen Button auf der Produktkarte, ein Dialog öffnet sich über der Seite, sie prüft das Produkt, legt es in den Warenkorb oder schließt den Dialog und stöbert genau dort weiter in der Liste, wo sie aufgehört hat.

Ein nützliches Schnellansicht-Modal trägt die Details, die ein Kunde für seine Entscheidung braucht:

• das Produktbild und die Galerie-Vorschaubilder
• den Titel und die SKU
• den Preis, einschließlich eines etwaigen Aktionspreises
• den Lagerstatus
• eine Kurzbeschreibung
• das Warenkorb-Formular, einschließlich Variantenauswahl bei variablen Produkten
• einen Link zur vollständigen Produktseite für alles, was das Modal nicht zeigt

Der Zweck ist nicht, die Produktseite zu ersetzen. Die Produktseite bleibt bestehen für alle, die die vollständige Beschreibung, Bewertungen und jedes Detail sehen wollen. Die Schnellansicht ist für den weitaus häufigeren Moment früher im Kaufverlauf gedacht, wenn die Kundschaft eine Kategorie durchsieht und mehrere Produkte gegeneinander abwägt. In diesem Moment ist das Öffnen eines leichtgewichtigen Modals deutlich schneller, als sich für jeden Kandidaten auf einen vollständigen Seitenaufruf einzulassen.

Warum sie hilft

Die Schnellansicht beseitigt Navigationsreibung genau an der Stelle, an der Kunden Optionen vergleichen, und das hat einige konkrete Auswirkungen.

Schnellerer Vergleich. Fünf Produkte in fünf Modals zu prüfen ist schneller und weniger störend, als fünf vollständige Seiten nacheinander zu laden und wieder zu verlassen. Die Liste bleibt die ganze Zeit auf dem Bildschirm, sodass die Kundschaft ihre Scroll-Position und ihre Orientierung behält.

Weniger Absprünge. Jeder vollständige Seitenaufruf ist ein Moment, in dem die Aufmerksamkeit abschweifen oder eine langsame Verbindung frustrieren kann. Die Kundschaft in der Listenansicht zu halten bewahrt den Stöber-Fluss, statt sie über mehrere Seiten und Tabs zu zerstreuen.

Ein kürzerer Weg zum Warenkorb. Wenn das Hinzufügen zum Warenkorb im Modal liegt, kauft die Kundschaft ganz ohne zusätzlichen Seitenaufruf. Sie öffnet, wählt eine Größe, legt in den Warenkorb und macht weiter.

Der wichtige Haken ist: Die Schnellansicht zahlt sich nur aus, wenn das Modal die Aktion abschließen kann. Ein Modal, das lediglich Informationen anzeigt, ohne Warenkorb-Funktion oder ohne Variantenauswahl, fügt nur einen Schritt hinzu, bevor es die Kundschaft am Ende doch auf die vollständige Seite schickt. Das ist langsamer als gar keine Schnellansicht. Der gesamte Wert des Musters hängt davon ab, dass die Kundschaft das Begonnene innerhalb des Dialogs abschließen kann.

Warnung: Eine Schnellansicht, die nur Informationen anzeigt, ohne Warenkorb-Funktion oder Variantenauswahl, fügt lediglich einen Schritt vor der vollständigen Seite hinzu und ist langsamer als gar keine Schnellansicht.

Was eine gute Schnellansicht braucht

Ob Sie eine Schnellansicht selbst bauen, kaufen oder installieren: dieselben Grundlagen entscheiden, ob sie nützt oder schadet. Nutzen Sie dies als Checkliste:

• Echtes Hinzufügen zum Warenkorb mit Varianten. Die Kundschaft sollte eine Größe oder Farbe wählen und das Produkt in den Warenkorb legen können, ohne das Modal zu verlassen. Alles andere ist ein Appetithappen, keine echte Schnellansicht.
• Laden bei Bedarf. Der Inhalt des Modals sollte erst geladen werden, wenn ein Kunde tatsächlich ein Produkt öffnet, damit die Listenseite für alle leicht bleibt, die nie eines öffnen. Den Inhalt per AJAX abzurufen, ohne jQuery im eigenen Code des Plugins, hält den Ressourcenbedarf klein.
• Kein Layout-Sprung. Das Modal sollte bis zum Öffnen verborgen sein und die Seite überlagern, statt Inhalte zu verschieben, damit das Öffnen die Liste nie neu umbricht. Layout-Sprünge sind sowohl ärgerlich für die Kundschaft als auch ein Nachteil für die Core Web Vitals.
• Barrierefrei. Tastaturunterstützung und eine saubere Fokussteuerung sind keine optionalen Extras. Der Dialog sollte den Fokus festhalten, solange er geöffnet ist, auf Escape schließen und den Fokus beim Schließen zum auslösenden Button zurückführen, mit den richtigen ARIA-Rollen, damit assistive Technik ihn als Dialog ankündigt.
• Konfigurierbarer Inhalt. Shops sind unterschiedlich. Sie sollten entscheiden können, welche Teile im Modal erscheinen und wo der auslösende Button auftaucht, statt ein festes Layout hinzunehmen.

Beachten Sie, was nicht auf dieser Liste steht: die Produktseite zu ersetzen oder Bewertungen, ähnliche Produkte und die vollständige Beschreibung in das Modal zu quetschen. Die Schnellansicht funktioniert, weil sie fokussiert ist. Sie zu überladen erschafft nur die Seite neu, die Sie überspringen wollten.

Wie Peek das löst

Peek for WooCommerce ist ein kostenloses, quelloffenes Plugin, das genau das ergänzt. Es setzt einen Schnellansicht-Button in Ihre Shop- und Archiv-Produktschleifen, und ein Klick darauf öffnet ein barrierefreies AJAX-Modal, in dem die Kundschaft ein Produkt in der Vorschau ansehen, Optionen wählen und in den Warenkorb legen kann, ohne die Liste zu verlassen.

Das kundenseitige Schnellansicht-Modal öffnet sich über der Liste, mit Galerie, Preis und Warenkorb-Formular.

Was das Modal zeigt

Das Modal stellt das Beitragsbild und die Galerie-Vorschaubilder dar, den Titel, die SKU, den Preis, den Lagerstatus und die Kurzbeschreibung, das native Warenkorb-Formular von WooCommerce und einen Link zur vollständigen Produktseite. Weil es das eigene Warenkorb-Formular von WooCommerce nutzt, funktionieren variable Produkte korrekt: Das Modal lädt das Varianten-Skript von WooCommerce, sodass die Kundschaft eine Variante wählen kann, bevor sie in den Warenkorb legt, wobei die Menge genauso behandelt wird wie auf der Produktseite. Jeder dieser Teile lässt sich auf der Einstellungsseite ein- oder ausschalten, sodass Sie das Modal so schlank oder so vollständig halten können, wie Sie wollen, und die Anzahl der Galerie-Vorschaubilder ist von null bis zwölf konfigurierbar.

Auf Geschwindigkeit und Barrierefreiheit gebaut

Peek ist bewusst leicht. Sein eigenes Frontend-Skript ist reines JavaScript ohne jQuery-Abhängigkeit, zurückgestellt und im Footer geladen, sodass es das Rendering nicht blockiert. Das jQuery-basierte Varianten-Skript von WooCommerce wird nur geladen, wenn ein Produkt tatsächlich Varianten hat und es benötigt. Der Modal-Inhalt wird bei Bedarf von der eigenen Website über die admin-ajax.php von WordPress abgerufen, mit der Aktion peek_quick_view des Plugins, sodass die Liste leicht bleibt, bis ein Kunde etwas öffnet, und keine Kunden- oder Produktdaten je Ihren Server verlassen.

Das Modal bleibt bis zum Öffnen verborgen und scrollt intern, sodass das Öffnen die Seite überlagert, statt sie neu umzubrechen, was bedeutet: kein kumulativer Layout-Sprung. Die Barrierefreiheit wird mit derselben Sorgfalt behandelt: Beim Öffnen springt der Fokus in den Dialog und bleibt dort gefangen, der Dialog schließt auf Escape oder einen Klick auf den Hintergrund und führt den Fokus beim Schließen zum auslösenden Button zurück, und er verwendet role="dialog" mit aria-modal, damit assistive Technik ihn korrekt behandelt.

Hinweis: Der Modal-Inhalt wird bei Bedarf über die admin-ajax.php Ihrer eigenen Website abgerufen, erst wenn ein Kunde ein Produkt öffnet, sodass die Liste leicht bleibt und keine Kunden- oder Produktdaten je Ihren Server verlassen.

Einrichtung

Die Schnellansicht live zu schalten dauert nur wenige Minuten:

1. Installieren Sie Peek über Plugins → Installieren, oder laden Sie es nach /wp-content/plugins/peek hoch. WooCommerce muss installiert und aktiv sein.
2. Aktivieren Sie es.
3. Öffnen Sie das Menü Peek im wp-admin, um den Button und den Modal-Inhalt zu konfigurieren.

Auf der Einstellungsseite können Sie die Schnellansicht aktivieren oder deaktivieren, Beschriftung und Stil des auslösenden Buttons festlegen (Text, ein Symbol oder Symbol plus Text, wobei die Variante mit nur Symbol einen barrierefreien Namen behält) und wählen, wo der Button erscheint. Standardmäßig zeigt er sich auf der Shop-Seite und in den Produktarchiv-Schleifen wie Kategorien, Schlagwörtern und Taxonomien; Sie können ihn auch auf die Schleifen für ähnliche Produkte und Up-Sells auf Einzelproduktseiten erweitern. Derselbe Bereich steuert die Modal-Hülle (Titel, Beschriftung des Schließen-Buttons, Lade- und Fehlertext, Text des “Produkt ansehen”-Links und SKU-Beschriftung, dazu Schalter für die Modal-Überschrift, den Schließen-Button und das Schließen per Klick auf den Hintergrund) und lässt Sie auswählen, welche Teile im Modal dargestellt werden. Inline-Einstellungen machen es leicht, minimal zu starten und später Details zu ergänzen.

Die Peek-Einstellungsseite im wp-admin, auf der Sie den auslösenden Button, seine Platzierung und die Modal-Inhalte konfigurieren.

Einen Auslöser an beliebiger Stelle platzieren

Der Button ist nicht auf die automatische Platzierung in der Schleife beschränkt. Peek liefert einen Shortcode, mit dem Sie einen Schnellansicht-Auslöser in jedes Layout setzen können: [peek_quick_view id="123"] oder den kürzeren Alias [peek id="123"]. Er nimmt optionale Attribute text und style entgegen, um den Button an seine Umgebung anzupassen, und das Modal samt seiner Assets lädt automatisch überall dort, wo der Shortcode erscheint. Das ist nützlich für Landingpages, individuelle Startseiten oder einen handgebauten Block mit ausgewählten Produkten, wo der Standard-Button aus der Schleife nicht hinreicht.

Was es nicht tut

Peek konzentriert sich auf das Schnellansicht-Modal und die Einstellungen darum herum. Es verändert keine Einzelproduktseiten, und es verbindet sich mit keinem externen Dienst: Seine einzigen gespeicherten Daten sind zwei WordPress-Optionen für Ihre Konfiguration, beide werden sauber entfernt, wenn das Plugin gelöscht wird. Merchandising-Funktionen, die über ein einzelnes Produkt-Modal hinausgehen, etwa ein Karussell mit ähnlichen Produkten oder Varianten-Swatches, liegen in der PRO-Edition statt im kostenlosen Plugin, was weiter unten behandelt wird.

Praktische Tipps für eine Schnellansicht, die verkauft

Ein Plugin liefert den Mechanismus; wie Sie es einrichten, entscheidet darüber, wie gut es funktioniert. Ein paar Hinweise:

• Beziehen Sie immer das Hinzufügen zum Warenkorb ein. Das ist die einzige Funktion, die eine Schnellansicht überhaupt lohnenswert macht. Wenn Sie das Warenkorb-Formular abschalten, um “das Modal aufgeräumt zu halten”, haben Sie einen langsameren Weg zur Produktseite gebaut. Lassen Sie es an.
• Halten Sie das Modal fokussiert. Zeigen Sie Galerie, Preis, Lagerstatus und das Warenkorb-Formular. Widerstehen Sie dem Drang, die gesamte Produktbeschreibung hineinzukippen. Die vollständige Seite ist über den “Produkt ansehen”-Link einen Klick entfernt für alle, die mehr wollen.

Tipp: Die Schnellansicht funktioniert, weil sie fokussiert ist. Zeigen Sie Galerie, Preis, Lagerstatus und das Warenkorb-Formular und überlassen Sie die vollständige Beschreibung der Produktseite, die über den “Produkt ansehen”-Link einen Klick entfernt ist.

• Passen Sie den Auslöser an Ihr Theme an. Ein Button mit nur Symbol passt zu einem dichten, bildgeführten Raster; ein Button mit Symbol plus Text ist auf einem dünn besetzten Katalog klarer. Wählen Sie den Stil, der auf einen Blick als Button erkennbar ist, denn eine Schnellansicht, die niemand bemerkt, ist eine Schnellansicht, die niemand nutzt.
• Gehen Sie bewusst mit dem Geltungsbereich um. Den Button nur in Shop- und Archiv-Schleifen zu laden hält die Dinge einfach. Ihn auf die Schleifen für ähnliche Produkte und Up-Sells auf Produktseiten auszuweiten kann Cross-Sells steigern, aber schalten Sie ihn nur dort ein, wo er der Kundschaft wirklich hilft, statt reflexartig überall.
• Legen Sie eine sinnvolle Anzahl an Galerie-Vorschaubildern fest. Ein paar Vorschaubilder geben einen Eindruck vom Produkt, ohne dass sich das Modal wie eine vollständige Galerie anfühlt. Stimmen Sie die Anzahl auf Ihre Produktfotos ab.

Peek im Vergleich zu Standard-WooCommerce

Der WooCommerce-Kern hat überhaupt keine Schnellansicht: Jedes Produkt erfordert einen vollständigen Seitenaufruf zur Begutachtung. Hier der Unterschied speziell für die Schnellansicht:

Funktion	Standard-WooCommerce	Peek
Produkt ansehen, ohne die Liste zu verlassen	Nein	AJAX-Modal aus den Shop- und Archiv-Schleifen
Galerie, Preis, SKU, Lagerstatus, Kurzbeschreibung im Modal	entfällt	Ja, jeder Teil schaltbar
In den Warenkorb legen im Modal	entfällt	Ja, mit dem nativen Formular von WooCommerce
Variable Produkte im Modal	entfällt	Ja, über das Varianten-Skript von WooCommerce
Laden bei Bedarf	entfällt	Ja (AJAX, ohne jQuery im Code des Plugins)
Layout-Sprung beim Öffnen	entfällt	Keiner; Modal bleibt bis zum Öffnen verborgen
Barrierefreies Modal	entfällt	Fokus-Falle, Escape, Schließen per Hintergrund, ARIA-Dialog
Manuelle Platzierung des Auslösers	entfällt	Shortcode [peek_quick_view] / [peek]
Zuletzt angesehen, Karussell, Swatches, Analysen	Nein	Ja (Peek Pro)
Kosten	Kostenlos (Kern, keine Schnellansicht)	Kostenlos (GPL); Pro ergänzt Merchandising und Analysen

Kostenlos im Vergleich zu PRO

Das kostenlose Peek-Plugin ist eine vollständige Schnellansicht, kein Appetithappen: das AJAX-Modal, das native Hinzufügen zum Warenkorb mit Varianten, die vollständige Einstellungsseite, der Shortcode und die Arbeit an der Barrierefreiheit sind alle enthalten. Peek Pro ist eine Erweiterung, die das kostenlose Plugin als installiert und aktiv voraussetzt, und baut auf dieser Grundlage mit Merchandising und Messung im Modal für Shops, die die Conversion weiter vorantreiben wollen. Sie ergänzt zuletzt angesehene Produkte (mit Cookie-Tracking, einem Shortcode [peek_recently_viewed] und einer Option zum automatischen Einfügen), ein Karussell mit ähnlichen Produkten am unteren Rand des Modals, Varianten-Swatches, die die Varianten-Dropdowns durch Farb-, Bild- oder Label-Chips ersetzen, individuelle Modal-Bereiche für Inhalte wie Versandinfos oder Vertrauenssiegel vor oder nach dem Warenkorb, eine Vor- und Zurück-Navigation zwischen Produkten innerhalb des Modals, Steuerungen für das Styling in der Markenfarbe sowie Schnellansicht-Analysen, die Modal-Öffnungen, Warenkorb-Aktionen aus dem Modal und Checkout-Conversions pro Produkt erfassen, mit einem Dashboard und CSV-Export. Peek Pro wird über Freemius statt über das WordPress.org-Verzeichnis ausgeliefert.

Die Kurzfassung

Die Schnellansicht beschleunigt das Stöbern, indem sie das Produkt zur Kundschaft bringt, statt die Kundschaft zum Produkt zu schicken. Sie funktioniert nur, wenn das Modal die Aufgabe tatsächlich zu Ende bringen kann, also sind die nicht verhandelbaren Punkte: echtes Hinzufügen zum Warenkorb mit Varianten, bei Bedarf geladener Inhalt ohne jQuery, kein Layout-Sprung und ein tastaturbedienbarer Dialog. Das kostenlose Peek-Plugin deckt all das mit einem barrierefreien AJAX-Modal, einer vollständigen Einstellungsseite und einem Shortcode zur manuellen Platzierung ab; Peek Pro ergänzt zuletzt angesehene Produkte, ein Karussell mit ähnlichen Artikeln, Varianten-Swatches, individuelle Bereiche, Modal-Navigation und -Styling sowie Schnellansicht-Analysen, wenn Sie bereit sind, im Modal zu merchandisen und zu messen.