Wie WooCommerce plus Gutenberg das Online-Einkaufserlebnis verändern wird

Der Trend zum E-Commerce ist seit vielen Jahren ungebrochen. Die kürzliche Pandemie hat diesen nur noch sprunghaft beschleunigt. Ebenso sind viele weitere Veränderungen, die mal klein angefangen haben, inzwischen groß geworden, ohne dass man sie wahrgenommen hat.  

Wenn man nach dem Gefühl fragt, wie viele Benutzer*innen mobil auf Website oder Shop zugreifen, sagen Betreiber und Agenturen gerne mal so etwas wie "vielleicht 10 Prozent". Doch hat sich der Anteil von "mobilen Geräten" beim Internet-Traffic im Jahr 2020 auf stolze 45 Prozent hochgeschraubt. Es wurde schon für viel viel kleinere Marktanteile optimiert, zum Beispiel für den Internet Explorer bei unter 5 Prozent. Auch sind Anbieter wie Wish, die ausschließlich mobil mit eigenen Apps arbeiten, inzwischen sehr erfolgreich. 

Um für die sich verändernden Erwartungen und technischen Möglichkeiten in der Zukunft gewappnet zu sein, wurde in WordPress der Block-Editor eingeführt. Dieser Artikel betrachtet den heutigen Stand von Produktseiten in Onlineshops und welche Möglichkeiten und Verbesserungen mit Gutenberg möglich werden, um den Einkauf online noch informierter und interessanter zu gestalten.  

Altbackende Shops 

Während klassische Onlineshops gerade scheinbar Ladengeschäfte revolutionieren, werden sie selber momentan von neuen E-Commerce-Angeboten überholt. 

Das klassische Layout einer Produkt-Detailseite enthält ein oder mehrere Produktbilder, daneben Name, Artikelnummer, Preis und Warenkorb-Button. Darunter die keyword-reiche Beschreibung. In Tabs oder im Akkordeon versteckt die technischen Daten und das Kleingedruckte. Jetzt noch die lange, langweilige Liste der Bewertungen. Abschließend die irgendwie verwandten Produkte automatisch verlinkt. 

Dieses Standardlayout wurde für den großen Bildschirm am Schreibtisch entwickelt und stumpf mit Farben und Schriftarten über alle Arten von Produkten und Branchen ausgebreitet. 

Egal, ob von der Baustelle oder dem Sofa aufgerufen, das Layout macht auf Smartphones keine gute Figur. Besonders der "Above the fold"-Ansatz sprengt jetzt den kleinen Bildschirm (plus Cookie-Banner und Newsletter-Pop-up). Oft werden alle Infos als super wichtig deklariert und ganz nach oben geschrieben. Alles, was die Hürde nicht nimmt, wird irgendwo noch knapp notiert oder einfach komplett weggelassen. 

Der neue Stil 

Ein Konzept, das sich im Online-Marketing schon lange erfolgreich etabliert hat, ist die "Verkaufsseite" oder auch "Landingpage" oder "Leadpage". Diese Seiten sind oft erstaunlich lang. Aber ihr Inhalt ist sehr genau auf eine Zielgruppe und ein einzelnes Produkt zugeschnitten. Wenn eine Interessentin über eine Anzeige oder das Long Tail Keyword direkt auf der Produktseite gelandet ist, ist auch die Bereitschaft zum Scrollen da. Der Finger ist vom minutenlangen Scrollen in Timelines meist gut trainiert. 

Die Motivation, den Personen hinter dem Shop/Angebot so viel Arbeit wie möglich zu ersparen, deckt sich mit dem Interesse des potentiellen Kunden. Es werden alle Vorteile des Produktes umfangreich heraus- und die Details klar dargestellt. Mögliche Fragen werden bewusst formuliert und samt der Antworten offensiv eingebaut. Das erklärte Ziel ist es, den Interessenten so gut zu informieren, dass keine Zweifel mehr am Produkt bestehen, damit am unteren Ende der Seite unverzüglich der Kauf vollzogen wird. Denn ein Interessent, der nochmal woanders nach einem Detail schauen oder auf die Antwort vom Support warten muss, ist oft ein verlorener Kunde. 

Dabei wird auf alles zurückgegriffen, was das moderne Web so kann, um Textwüsten zu vermeiden. 

• Mit Fotos, Visualisierungen und Videos wird das Produkt und der Hersteller/Lieferant ins rechte Licht gerückt. 
• Wer kann und hat, bietet 360-Grad-Ansichten oder "Erweiterte-Realitäts"-Elemente an. 
• Bewertungen von früheren Verkäufen werden mit Porträt und Name groß dargestellt. 
• Verschiedene Vertrauenselemente wie Siegel oder Auszeichnungen werden eingebunden. 
• Mit Icons, Animationen, Überschriften, Spalten und anderen Layoutmethoden werden optische Highlights erzeugt.

Auf dieser Art von Seite findet man bei manchen Anbietern auch Dark-Patterns oder psychologische Tricks. Diese sind aber nicht zwangsläufig, sondern bewusst eingesetzt. 

Beratermangel ausgleichen 

Im Ladengeschäft kann im persönlichen Gespräch auf Fragen direkt eingegangen werden. Diesen Mangel an direktem Kontakt muss mit größerem Informationsangebot begegnet werden. 

Fotos sagen vielleicht mehr als viele Worte. Das Produkt aber nur im unendlichem Weiß aus x Winkeln zu sehen, gibt kein Gefühl für Größe, Gewicht, Anmutung und Funktion. Mit einer Dokumentation, die schon fast als Bedienungsanleitung durchgehen könnte, kann sich ein deutlich besseres Bild gemacht werden. So lässt sich bei Möbelhäusern mit DIY-Konzept schon vor dem Kauf die echte Anleitung ansehen. 

Gerade Personen, für die der digitale Einkauf neu ist, benötigen dies, um unnötige Bestellungen zum "Nur mal angucken" zu vermeiden. 

Bonus-Vorteil: Wenn technisch gut gemacht, mögen diese Inhalte auch die Suchmaschine gerne. 

Neue Felder machen es vor 

Auch streben immer mehr neue Produktformen auf den Markt. So ist das Abo stark im Kommen. Egal, ob der Zugang zu Trainingsgeräten zum monatlichen Fixpreis, die Online-Community passend zum Brauerei-Hobby oder ein digitales Werkzeug für die Buchhaltung. 

Nicht ganz neu, aber auch vermehrt anzutreffen, sind Online-Buchungs- und Reservierungs-Produkte. Diese personalsparende Verkaufsform bietet unmittelbares Feedback und wird von Kunden zunehmend bevorzugt. 

Die neuen Produkte sind auch Teil des E-Commerce und können mittels WooCommerce verkauft werden. Die Produktseiten dieser Produkte sind umfangreich und rufen regelmäßig in ihrem Verlauf zum Kaufen auf. Ein Prozess, der unmittelbar mit dem nächsten Klick gestartet wird. Sie sind weit entfernt von den klassischen Shop-Layouts mit computer-generierten Boxen als Produktbild für eine Software oder andere virtuelle Güter. Waren diese nicht immer schon lächerlich? 

Schöne Fokussierung wagen 

Das Layout einer Produktseite muss neu erdacht werden. Klare und ansehnliche, untereinander angeordnete Informationen lassen sich viel besser konsumieren und sorgen für einen längeren Aufenthalt, da sich in Ruhe mit dem Produkt auseinandergesetzt werden kann. Dieser Vorteil gilt auch für größere Bildschirme. 

Wenn beim Lesen der Produktseite festgestellt wird, dass es das falsche Produkt ist, wird oft direkt die "Zurück"-Funktion genutzt, um wieder in der Suchmaschine oder Listenansicht zu landen. Mit gezielt platzierten Links kann dort, wo ein Interessent feststellt, dass es nicht passt, gezielt abgefangen werden. So ist ein "Nicht das passende Modell?" oder "Funktion X benötigt? Siehe hier" deutlich hilfreicher, führt schneller ans Ziel und verhindert den Absprung. Das visuelle Herumgezerre, doch unbedingt auf dieser Seite weiter zu lesen, ist einfach nur im Weg. 

Eine Zukunft mit Blöcken 

Dank der Blöcke, die mit Gutenberg eingeführt wurden, ist die Erstellung von schöneren Inhalten direkt mit dem WordPress-Core deutlich einfacher geworden. Aktuell noch in der Entwicklung, wird der Block-Editor auch bald für Produkte in WooCommerce verfügbar sein. 

Der aus meiner Sicht größte Vorteil, den WordPress und WooCommerce haben, ist die Kombination aus CMS und Shop-System in einem Werkzeug. So lassen sich durch das CMS schöne Inhalte bauen, die auch gleichzeitig die Produktseite sind. Das ist die große Schwachstelle von bisherigen Landingpage-Angeboten. Die Verkaufsseite wurde auf einem System nur für hübsche Seiten gebaut. Der eigentliche Verkauf muss aber bei einem weiteren Anbieter vollzogen werden. Datenschutz mal ganz beiseite gelassen. Selbst große Elektronik-Konzerne schaffen es nicht, die emotionalen Marketing-Seiten direkt im Shop-System umzusetzen. Wenn einen die Produktpräsentation überzeugt hat und man auf "Jetzt Kaufen" klickt, landet man allzu oft in einem recht unschönen Shop-Bereich auf einer Subdomain. Dies ist eine Bruchkante, an der Vertrauen und Nutzer*innen verloren gehen. 

Kontrolle vs. Emotionen 

Der Grund für die unterschiedlichen Systeme bei vielen Anbietern sind die unterschiedlichen Wünsche der Shop-Verantwortlichen und der Marketing-Abteilung. Die technische Seite möchte ein langlebiges System, um Zahlungsanbieter, Logistik und Buchhaltung stabil anbinden zu können. Schließlich ist Downtime im Shop bares Geld wert. Im Marketing-Bereich will man sich schnell bewegen können, um Kampagnen und Aktionen schnell und regelmäßig anzupassen. 

Die Lösung waren bisher meist separate Websites für beide Bereiche oder technisch labile iFrame- sowie Embed-Lösungen. Hier können die Gutenberg-Blöcke einen echten Unterschied machen. 

Kontrollierte Flexibilität 

Mit dem Block-Editor lässt sich ein "In den Warenkorb"-Bereich in einer Produktseite einbinden und flexibel platzieren. Durch Block-Templates lassen sich so Pflichtblöcke festlegen und gleichzeitig viel Layout-Freiraum gewähren. Diese Pflichtblöcke sind vor dem Entfernen geschützt. Sie werden bei der Anlage eines neuen Produktes automatisch platziert und können so nicht vergessen werden. So kann eine tolle Produktseite gelayoutet werden, ohne dass vorher alle Positionen festgelegt sind. Mit etwas Schulung kann große Freiheit an die Gestaltenden gegeben werden, so lange sie z.B. keine Preise direkt eingeben, sondern "Variablen" oder spezielle Blöcke verwenden. 

Durch diese speziellen Blöcke können auch rechtliche Vorgaben (wie etwa die Steuerinformation bei Preisen in Shops für den deutschen Raum) code-basiert sichergestellt werden. Gerade für Shops, die an Warenwirtschaftssysteme oder andere Schnittstellen angeschlossen sind, haben derartige Platzhalter, die Post-Meta-Feldern oder Produkteigenschaften ausgeben, eine große Bedeutung. Das automatische Ändern von Produktdetails oder Lagerbeständen ist eine wichtige Funktion für effiziente und zuverlässige Prozesse. 

Neben Pflichtblöcken kann der Block-Editor noch weitere Aufpasserfunktionen übernehmen. So können Blöcke, die z.B. im Blog-Post erlaubt sind, für Produkte verboten sein. Auch die Nachbarschaft oder Verschachtelung von bestimmten Blöcken kann erzwungen oder unterbunden werden. 

Auch wenn es im ersten Moment so aussieht, das der Block-Editor dazu führt, dass die Shop-Technik Kontrolle abgibt, ist die Realität anders. Es bestand vorher nur geringe Kontrolle über das, was in der Produktbeschreibung stattfindet. HTML-Snippets oder Shortcodes waren schwer zu beeinflussen und wurden deswegen gerne mal knallhart weggefiltert. Mit der Unterteilung der Beschreibung bzw. der Produktseite in Blöcke lässt sich deutlich einfacher programmatisch zwischen oder auf einzelne Elemente zugreifen und Änderungen mittels Plugins vornehmen. 

Typografie im Griff 

Gerade Nutzer*innen, die von Page-Buildern kommen, sind es gewohnt, jede Kleinigkeit von jedem einzelnen Element/Block einstellen zu können. Eine Vielzahl der Möglichkeiten bietet Gutenberg inzwischen auch. Diese Freiheit ist in manchen Shops gewünscht und in anderen Shops eine gruselige Vorstellung. Zum Glück bietet der Block-Editor die Möglichkeit, hier sehr granular Einstellungsmöglichkeiten freizugeben bzw. sie zu unterbinden. 

Somit kann nicht nur eine Balance beim Layout, sondern auch bei der Typografie zwischen Corporate-Identity und Gestaltungsfreiraum ganz an die Bedürfnisse des Projekts angepasst werden. In dem Zusammenhang ist die Zukunft der Themes auch noch ein interessantes offenes Thema. 

Wiederholen mit System 

Eigentlich ist das Kernprinzip eines CMS "Einmal eingeben | x-fach ausspielen". Doch in vielen WordPress-Websites ist dies bisher nicht bewusst genutzt worden. In größeren Projekten musste man es durch komplizierte Lösungen mit Plugin-Abhängigkeiten umsetzen. WordPress realisiert nun eine wichtige Funktion auf einem visuellen und gut nutzbaren Weg. 

Es lassen sich aus beliebigen Inhalten mit zwei Klicks "wiederverwendbaren Blöcke" erstellen, die anschließend in andere Seiten oder Produkte 1:1 wiederverwertet werden können. Dabei bleiben die Inhalte aber verbunden. Eine Änderung in einem der platzierten Instanzen aktualisiert auch die anderen. Dabei richtet sich die Spiegelung nur nach innen. Die Platzierung auf der Seite ist frei wählbar. 

Dies ist eine Funktion, die Produktseiten deutlich besser wartbar macht. Es gibt Inhalte, z.B. Versanddetails oder Werbeflächen, die auf einigen oder allen Produktseiten identisch sein sollen. Ihre Position auf der Seite aber nicht. 

Volle Bandbreite 

Als das am schnellsten wachsende Shop-System ist WooCommerce aktuell im Bereich von "kleineren Shops" weit verbreitet. Diese tendieren zu einer geringen Anzahl an Produkten, die aber mit Blöcken und deren Möglichkeiten um so liebevoller und detailreicher von ihren Produzierenden präsentiert werden können. 

Für Shops mit vielen Produkten bedeutet es aber noch lange nicht das Aus oder dass der Block-Editor ihnen komplett das Leben schwer macht. Mit den Fähigkeiten der Entwicklungsabteilung, die bei jedem großen Shop-Projekt so oder so Pflicht ist, lassen sich ebenfalls tolle Funktionen herausholen. Die Bandbreite mit wenigen Produkten zu starten und damit richtig groß werden zu können, macht das Content-Management-System mit dem Shopping-Plugin sehr attraktiv. 

Tolle Kombination: WooCommerce plus Gutenberg 

Ähnlich wie für Entwickler*rinnen im WordPress-Bereich steht den selbigen mit der Spezialisierung auf WooCommerce einiges an neuer Technik und veränderten Konzepten ins Haus. Auch ist ein gewisser Kampf um Bedeutung und Bewahrung von Altem absehbar. Wie viel von den alten Templates oder bisherigen Hooks und Filtern weiter Bestand haben werden, ist noch nicht klar. 

Die kommenden Gutenberg-Blöcke für WooCommerce sind eine Änderung, auf die sich Shop-Betreibende und Käufer gleichermaßen freuen können. Sie macht die Erstellung von schöneren, individuellen und informativen Produktseiten deutlich leichter – egal wie groß der Shop. 

Titelmotiv: Pixabay