Acht recht geile WooCommerce Blocks

Inhaltsverzeichnis

• WordPress Blocks
  • Weiterführende Links
• WooCommerce Blocks
  • Plugin Ratings
  • Landing Pages
  • Neuste Produkte
  • Ausgewählte Produkte
  • Bestseller Produkte
  • Produkte nach Kategorie
  • Aktionsprodukte
  • Bestbewertete Produkte
  • Produkte nach Eigenschaft
  • Hervorgehobenes Produkt
• Fazit

WordPress Blocks

Der neue WordPress Block Editor (Gutenberg) hat seit seiner Einführung in WordPress 5.0 im Dezember 2018 und auch schon davor die Gemüter der WordPress Community ordentlich erhitzt. Gutenberg will mehr sein als ein Editor, um Beiträge und Seiten in WordPress zu erstellen und bearbeiten. Er will auch das Fundament sein, um die Anpassung und Erstellungen von Webseiten in WordPress insgesamt zu revolutionieren. Dazu gibt es insgesamt 5 Gutenberg Entwicklungsphasen. Wir befinden uns aktuell in Phase 2.

Wenn man sich das 2-Sterne Rating des Gutenberg Plugins anschaut, mag man sich wundern, warum so viele Anwender Gutenberg so schlecht bewerten? Hierbei sollte man allerdings nicht ausser Acht lassen, dass es seit Beginn der Gutenberg Entwicklung insgesamt 814 (!) Gutenberg Releases gab. Die Ratings beziehen sich somit auf alle 814 Releases, die vor allem Phase 1 von Gutenberg betreffen und nicht nur auf die aktuellste Gutenberg Version beziehen.

Gutenberg ist wie auch WordPress Open Source, d.h. jeder kann die Weiterentwicklung (zumindest theoretisch) mit gestalten. Dem WordPress Mitgründer Matt Mullenweg wird von verschiedener Seite vorgeworfen, dass er mit Gutenberg nicht (nur) das «Wohl» des ganzen WordPress Ökosystems im Sinne hat, sondern auch seine eigenen kommerziellen Interessen als Geschäftsführer von Automattic, der Firma hinter der Managed WordPress Hosting Plattform WordPress.com (nicht zu verwechseln mit WordPress.org).

Hierüber könnte man sich lange auslassen und darüber philosophieren, ob Matt als Mitgründer von WordPress ein mehr oder weniger wohlwollender «Diktator» ist. Ich kenne Matt nicht persönlich, habe ihn aber schon öfters persönlich bei WordCamps und Community Summit als sympathische, smarte und engagierte Persönlichkeit erlebt. Vong Gefühl her würde ich ihm zumindest keinen Egoismus oder gar Böswilligkeit unterstellen wollen.

Weiterführende Links

• Sag Hallo zum neuen Editor – Infos zu Gutenberg mit direkter Möglichkeit Blöcke testweise zu bearbeiten
• Gutenberg Fibel – hilft dabei den neuen WordPress Editor zu verstehen und anzuwenden

WooCommerce Blocks

In diesem Artikel geht es aber vor allem um WooCommerce Blocks, die das einfache und flexible Einfügen von WooCommerce Produkten in WordPress Beiträge und Seiten ermöglicht. Um WooCommerce Blocks nutzen zu können, installierst du einfach das WooCommerce Blocks Plugin und prüfst am besten vorab, ob dein WordPress Theme WooCommerce Blocks auch unterstützt. Produkte sollten logischerweise bereits in WooCommerce erfasst sein.

Mit der am 17.01.2019 erschienenen Version 1.3.1 des WooCommerce Blocks Plugins wurden 6 neue Blöcke eingeführt, mit Version 1.4 vom 13.02.2019 ein weiterer Block, so dass jetzt insgesamt 8 WooCommerce Blocks zur Verfügung stehen.

1. Neuste Produkte
2. Ausgewählte Produkte
3. Bestseller Produkte
4. Produkte nach Kategorie
5. Aktionsprodukte
6. Bestbewertete Produkte
7. Produkte nach Eigenschaft
8. Hervorgehobenes Produkt

In der letzten Version von WooCommerce Blocks wurde zudem der Kategorie-Auswahlfilter verbessert. Wenn man zwei oder mehrere Kategorien auswählt, kann man jetzt einstellen, ob Produkte aus irgendeiner oder allen ausgewählten Kategorien angezeigt werden sollen. In Version 1.4 wurde ausserdem noch die Möglichkeit hinzugefügt, den Block «Ausgewählte Produkte» in der Grösse anzupassen. Die Standard Mindesthöhe kann durch das verwendete Theme gesetzt werden.

Plugin Ratings

Die erste Version des WooCommerce Blocks Plugin wurde im April 2018 veröffentlicht und erhielt bisher relativ schlechte Rezensionen. Seither wurden 7 weitere Versionen mit zahlreichen Fehlerbereinigungen und neuen Funktionen veröffentlicht, weshalb das zwei Sterne Rating ähnlich wie bei Gutenberg nicht unbedingt dem aktuellen Stand der Dinge entspricht, weshalb ich selbst ein 5-Sterne Rating abgegeben habe.

Ich habe das Plugin vor Kurzem auf Deutsch (de_DE und de_CH) übersetzt. Neben Englisch ist es auch auf Französisch, Spanisch, Japanisch und Dänisch verfügbar. Weitere Übersetzungen können auf translate.wordpress.org beigesteuert werden.

WooCommerce Landing Pages

Aber warum überhaupt Produkte in WordPress Artikeln oder Seiten einfügen? Der grosse Vorteil von WooCommerce als Shop-System ist ja, dass man die gesamte Internet-Präsenz inkl. Blog und Shop in einer einzigen benutzerfreundlichen Adminoberfläche verwalten kann.

Es ist somit eine sehr mächtige Plattform, um z.B. sog. Landing Pages zu erstellen und eine Content Commerce Strategie zu verfolgen. Magento als reine E-Commerce Plattform bietet diesbezüglich von Haus weniger benutzerfreundliche Möglichkeiten. Hier kann es manchmal Sinn machen, WordPress für den Content Bereich zusätzlich zu Magento zu verwenden. Dazu bräuchte man dann allerdings keine WooCommerce Blocks, sondern Magento Blocks. Sicherlich nur eine Frage der Zeit, bis es ein entsprechendes Plugin bzw. eine entsprechende Extension dafür gibt.

Die Bedeutung des Begriffs Landing Page ist eine Seite auf der ein Besucher oder eine Besucherin zuerst landet, wenn er oder sie auf eine Webseite oder einen Webshop kommen. Dabei ist es wichtig, Besuchern alle relevanten Informationen zur Verfügung stellt, um eine Kaufentscheidung zu treffen und nicht wieder direkt abzuspringen und die Seite zu verlassen.

Die Home Page ist oft die meistbesuchte Landing Page, über Suchmaschinen gelangen Besucher aber natürlich auch oft direkt auf eine Produktkategorieseite, Produktdetailseite, einem Blogartikel (Menüpunkt Beiträge im WordPress Admin) oder einer normalen Seite (Menüpunkt Seiten im WordPress Admin), die dann ebenfalls als Landing Page bezeichnet werden können.

Auf Produktkategorie-Ebene ist es aktuell noch nicht möglich den Block Editor zu nutzen, dort steht aktuell nur ein normales Textfeld zur Verfügung. In diesem Artikel gehe ich deshalb vorerst auf die Möglichkeiten mit dem neuen Gutenberg Block Editor in Bezug auf Beiträge und Seiten ein.

In dieser kurzen Bildschirmaufzeichnung sieht man eine bereits mit verschiedenen WooCommerce Blocks erstellte WordPress Seite und wie einfach es ist, die Layout Einstellungen zu ändern und in Echtzeit im Admin die Änderungen angezeigt bekommt.

Hier nun aber die verschiedenen WooCommerce Blocks einzeln vorgestellt:

WooCommerce Block: Neuste Produkte

Dieser Block fügt eine beliebige Anzahl von zuletzt erfassten Produkten in einem Beitrag oder einer Seite ein.

WooCommerce Block: Ausgewählte Produkte

Mit diesem Block kann man verschiedene Produkte einzeln auswählen und in einen Beitrag oder eine Seite einfügen.

WooCommerce Block: Bestseller Produkte

Obwohl in unserer lokalen WordPress Testinstallation noch keine Bestellungen durchgeführt wurden, fügt dieser WooCommerce Block Produkte ein. Richtig Sinn macht, das aber natürlich erst, wenn auch Bestellungen eingegangen und geliefert wurden.

WooCommerce Block: Produkte nach Kategorie

Auch dieser Block ist eigentlich selbsterklärend. Neben den Standard Kategorieseiten in WooCommerce, kann man diesen Block dazu verwenden, um eigene gemischte Kategorieseiten als Landing Pages zu erstellen oder in einem Blog-Artikel Produkte aus bestimmten Kategorien einzufügen.

WooCommerce Block: Aktionsprodukte

Alle WooCommerce Produkte, die mit einem Angebotspreis versehen sind, können mit dem Block Aktionsprodukte eingefügt und wunschgemäss sortiert, sowie nach Produktkategorie gefiltert werden.

WooCommerce Block: Bestbewertete Produkte

Mit diesem Block können bestbewertete Produkte in eine Seite oder einen Beitrag eingefügt werden und wie gewohnt in der Anzahl Spalten und Zeilen eingestellt und nach Produktkategorien gefiltert werden.

WooCommerce Block: Produkte nach Eigenschaft

Dieser Block ist gerade erst dazu gekommen und deshalb noch nicht auf Deutsch übersetzt. Auf Englisch heisst er Products by Attribute. Wenn die im WooCommerce Shop erfassten Produkte Eigenschaften wie z.B. Farbe oder Grösse hinterlegt haben, können mit diesem Block Produkte nach diesen Eigenschaften gefiltert und angezeigt werden.

In diesem Beispiel mit den WooCommece Beispieldaten hat sich eine blaue Mütze eingeschlichen, die wir über einen kleinen Trick ausblenden. Alternativ kann man natürlich auch einfach die entsprechende Eigenschaft im Produkt korrigieren.

WooCommerce Block: Hervorgehobenes Produkt

Mit diesem Block kann man ein einzelnes Produkt hervorheben. Es gibt diverse Farbeinstellungen für den «Jetzt einkaufen» Button, sowie eine Überlagerungsfarbe und Hintergrundopazität für das ganze Blockelement.

Fazit

Wie bereits geschrieben, habe ich der aktuellen Version des WooCommerce Block Plugins eine 5-Sterne Bewertung gegeben, da ich von den Möglichkeiten begeistert bin.

Tested this the other day with WordPress 5.0.3, WooCommerce 3.5.4, Storefront 2.4.2 and really like it. Not sure why others are having so many problems, but it seems to work fine with me overall.

I also translated this for 2 new locales: de_DE and de_CH.

Die Benutzerfreundlichkeit von WordPress Blocks lässt sich sicher noch verbessern, aber bereits jetzt finde ich die Bedienung äussert intuitiv und die Performance ist seit WordPress 5.1 nochmal stark verbessert worden.

Ich habe zur Erstellung der Bildschirmaufzeichnungen mit den WooCommerce Beispieldaten gearbeitet, welche einem eher kleinen WooCommerce Shop entsprechen. Wenn man hunderte oder gar tausende von Produkten in seinem Webshop hat, mag die Performance anders aussehen, aber mit dem geeigneten Hosting lässt sich das sicherlich auch auf ein akzeptables Niveau bringen, um sehr flott umfangreiche Landing Pages komplett ohne Programmierkenntnisse zu erstellen.

Hast du Gutenberg schon aktiv im Einsatz? Wie findest du das neue WooCommerce Blocks Plugin? Würdest du dein aktuelles WordPress Theme wechseln, um WooCommerce Blocks nutzen zu können, falls dein Theme noch keine Unterstützung bietet?