Anleitungen

Schnellansicht in WooCommerce: ein Produkt-Modal, das die Suche beschleunigt

By Mariusz Szatkowski · Aktualisiert: 2026-06-20

Das Stöbern in einem WooCommerce-Katalog bedeutet oft eine ermüdende Schleife: ein Produkt anklicken, die Seite ansehen, zurückgehen, das nächste anklicken. Die Schnellansicht durchbricht diese Schleife. Sie öffnet das Wesentliche in einem Modal direkt aus der Listenansicht, sodass Kunden vergleichen und kaufen können, ohne das ständige Hin und Her. Dieser Leitfaden erklärt, wie die Schnellansicht funktioniert, wann sie hilft und was eine gute Lösung braucht.

Was die Schnellansicht ist

Die Schnellansicht zeigt die wichtigsten Details eines Produkts in einem Modal, das aus der Listenansicht geöffnet wird, ohne zur vollständigen Produktseite zu navigieren. Eine nützliche Schnellansicht umfasst:

  • die Produkt-Galerie
  • den Preis und einen etwaigen Aktionspreis
  • die SKU und kurze Angaben
  • das Hinzufügen zum Warenkorb, einschließlich Variantenauswahl

Die Kundschaft öffnet sie, prüft das Produkt, legt es in den Warenkorb oder schließt sie und stöbert genau dort weiter in der Liste, wo sie aufgehört hat.

Warum sie hilft

Die Schnellansicht beseitigt Navigationsreibung genau an der Stelle, an der Kunden Optionen vergleichen:

  • Schnellerer Vergleich. Mehrere Produkte in Modals zu prüfen ist besser, als vollständige Seiten einzeln zu laden und wieder zu verlassen.
  • Weniger Absprünge. In der Listenansicht zu bleiben hält die Kundschaft im Stöber-Fluss, statt sie über mehrere Seiten zu zerstreuen.
  • Ein kürzerer Weg zum Warenkorb. Wenn das Hinzufügen zum Warenkorb im Modal liegt, kauft die Kundschaft ohne zusätzlichen Seitenaufruf.

Der Haken ist: Die Schnellansicht muss den Kauf abschließen können. Ein Modal, das nur Informationen anzeigt, ohne Warenkorb-Funktion oder ohne Variantenauswahl, fügt lediglich einen Schritt hinzu, bevor es die Kundschaft am Ende doch auf die vollständige Seite schickt.

Was eine gute Schnellansicht braucht

  • Echtes Hinzufügen zum Warenkorb mit Varianten. Die Kundschaft sollte eine Größe oder Farbe wählen und sie hinzufügen können, ohne das Modal zu verlassen.
  • Laden bei Bedarf. Der Modal-Inhalt sollte erst beim Öffnen per AJAX geladen werden, damit die Listenseite leicht bleibt. Der Verzicht auf jQuery hält den Ressourcenbedarf gering.
  • Barrierefrei. Tastaturunterstützung und eine saubere Fokussteuerung machen das Modal für alle nutzbar.

Peek for WooCommerce öffnet ein AJAX-Produkt-Modal mit Galerie, Preis, SKU und dem Hinzufügen zum Warenkorb einschließlich Varianten, ohne jQuery. Zuletzt angesehene Produkte, ein Karussell mit ähnlichen Produkten, Varianten-Swatches, individuelle Modal-Bereiche und Analysen sind die Stellen, an denen Peek PRO das kostenlose Plugin erweitert.

Peek im Vergleich zu Standard-WooCommerce

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

FunktionStandard-WooCommercePeek
Produkt ansehen, ohne die Liste zu verlassenNeinAJAX-Modal aus der Listenansicht
Galerie, Preis, SKU im ModalentfälltJa
In den Warenkorb legen im ModalentfälltJa, einschließlich Varianten
Laden bei BedarfentfälltJa (AJAX, ohne jQuery)
Barrierefreies ModalentfälltTastatur- und Fokussteuerung
Zuletzt angesehen, Swatches, AnalysenNeinJa (PRO)
KostenKostenlos (Kern)Kostenlos (GPL); PRO ergänzt Karussell und Analysen

Die Kurzfassung

Die Schnellansicht beschleunigt das Stöbern, indem sie das Produkt zur Kundschaft bringt, statt die Kundschaft zum Produkt zu schicken. Stellen Sie sicher, dass sie das Hinzufügen zum Warenkorb mit Varianten ermöglicht, bei Bedarf ohne jQuery lädt und barrierefrei bleibt. Beginnen Sie mit den kostenlosen Grundfunktionen und ergänzen Sie Swatches, zuletzt angesehene Produkte und Analysen, wenn Sie wachsen.

Peek for WooCommerce