Ein Überblick über das neue WooCommerce Blocks Plugin

Wenn Sie WooCommerce installieren oder aktualisieren, enthält es ein neues Plugin namens WooCommerce Blocks. Dadurch werden dem WordPress-Blockeditor neue Blöcke hinzugefügt, mit denen Sie WooCommerce-Produkte zu Ihren Seiten und Beiträgen hinzufügen können. In diesem Artikel werfen wir einen Blick auf WooCommerce-Blöcke und sehen, was sie tun können.

WooCommerce Blocks Plugin

WooCommerce Blocks ist ein neues Add-on für WooCommerce, das Gutenberg 7 Blöcke hinzufügt:

1. Vorgestelltes Produkt
2. Handverlesene Produkte
3. Meistverkaufte Produkte
4. Am besten bewertete Produkte
5. Neueste Produkte
6. Produkte im Angebot
7. Produkte nach Kategorie

Jeder der Blöcke wird in einem einstellbaren Raster angezeigt und ist sortierbar oder filterbar. Mit den Rastern können Sie die Anzahl der Spalten im Layout festlegen. Sie wählen zwischen 1 und 6 Spalten, indem Sie einen Schieberegler einstellen. Bei einigen Blöcken können Sie auch die Anzahl der Zeilen anpassen. 4 ist die Standardeinstellung für alle Blöcke mit Spalten oder Zeilen. Es enthält keine Paginierung, daher wird nur die von Ihnen festgelegte Nummer angezeigt.

Mit den Filtern können Sie die Kategorien auswählen. Einige enthalten eine Sortierfunktion, mit der Sie nach Neuheit, Preis, Bewertung, Verkauf, Titel oder Menüreihenfolge sortieren können.

Die Blöcke enthalten auch die standardmäßige Registerkarte Gutenberg Advanced mit benutzerdefinierten CSS-Feldern.

Aktivieren Sie den Produktblock

Wenn Sie WooCommerce aktualisieren oder aktivieren, sehen Sie das neue Plugin in Ihrer Plugin-Liste. Wenn Sie es hier nicht sehen, können Sie im Tab Neu hinzufügen unter Plugins nach WooCommerce-Blöcken suchen.

Sie können den Block in der Plugin-Liste aktivieren oder indem Sie auf die Schaltfläche oben im WordPress-Dashboard klicken.

Verwenden der WooCommerce-Blöcke

Der neue Tab namens WooCommerce wird der Liste der verfügbaren Blöcke im Gutenberg-Editor hinzugefügt. In dieser Registerkarte befindet sich der Satz von 7 WooCommerce-Blöcken. Jeder der Blöcke hat ein Symbol, das zu seiner Funktion passt, damit Sie sie auf einen Blick erkennen können.

Wenn Sie die Blöcke zur Seite hinzufügen, werden die Symbole auf der Seite angezeigt, auf die Sie klicken können, um sie schnell hinzuzufügen.

Schauen wir uns jeden Block an.

Vorgestelltes Produkt

Mit Featured Product können Sie ein einzelnes Produkt aus der Liste auswählen, das angezeigt werden soll. Sie können den Text ausrichten, die Überlagerung bearbeiten und das Bild bearbeiten. Es hat auch das Feld Zusätzliche CSS-Klasse.

Dieser Block bietet die meisten verfügbaren Anpassungen aller WooCommerce-Blöcke. Stellen Sie die Textausrichtung mit den Textschaltflächen oben ein. Wenn Sie auf Bearbeiten klicken, werden die Anpassungen für das Overlay geöffnet. Hier können Sie das Produkt auswählen, die Beschreibung anzeigen, den Preis anzeigen, die Farbe für das Overlay auswählen und die Deckkraft einstellen.

Sie können eine zu verwendende Farbe auswählen oder eine benutzerdefinierte Farbe auswählen, indem Sie auf den mehrfarbigen Kreis klicken. Hier können Sie den Hex-Code, RGB-Code eingeben oder die Farbe mit dem Schieberegler und Farbwähler anpassen. Ich mag die Overlay-Anpassungen. Um den Text oder die Schaltfläche anzupassen, müssen Sie CSS verwenden.

Handverlesene Produkte

Mit handverlesenen Produkten können Sie die Produkte auswählen, die angezeigt werden. Sie können im Block selbst oder in der rechten Spalte danach suchen. Stellen Sie die Anzahl der Spalten von 1-6 ein. Sortieren Sie nach Neuheit, Preis, Bewertung, Verkauf, Titel oder Menüreihenfolge.

Durch die Auswahl der Produkte werden diese dem Layout innerhalb des Rasters hinzugefügt.

Meistverkaufte Produkte

Bei den meistverkauften Produkten können Sie nichts aus dem Block auswählen, aber Sie können alle Ihre Anpassungen in den Einstellungen rechts vornehmen. Hier können Sie die Anzahl der Spalten und Zeilen auswählen (jeweils 1-6 auswählen), nach Kategorie filtern und CSS anpassen.

In diesem Beispiel habe ich 6 Spalten, 2 Zeilen und die Kategorie Kleidung ausgewählt.

Am besten bewertete Produkte

Produkte mit der höchsten Bewertung fügt die Produkte auch hinzu, wenn Sie den Block auswählen. Die Einstellungen umfassen das Standardlayout für 1-6 Spalten und Zeilen, Filtern nach Kategorie und CSS. Dieser zeigt die Standardeinstellungen.

Neueste Produkte

Neueste Produkte fügt die Produkte auch automatisch hinzu, wenn Sie den Block auswählen. Die Einstellungen umfassen das Standardlayout, den Kategoriefilter und CSS. In diesem Beispiel habe ich 5 Spalten und 3 Zeilen gewählt. Ich habe den Kategoriefilter standardmäßig belassen, der jede Kategorie einschließt.

Produkte im Angebot

On Sale Products lädt automatisch alle Produkte, die im Angebot sind. Es enthält auch die Layoutoptionen für Spalten und Zeilen, den Produktfilter und CSS. Dieser fügt eine Bestellen nach-Option hinzu, sodass Sie nach Neuheit, Preis, Bewertung, Verkauf, Titel oder Menüreihenfolge bestellen können. In diesem Beispiel habe ich die Spalten auf 2 und die Zeilen auf 4 gesetzt. Ich habe die Produktkategorie auf der Standardeinstellung belassen.

Produkte nach Kategorie

Mit Produkte nach Kategorie können Sie die Kategorien innerhalb des Blocks auswählen und enthalten einen Selektor, um die Auswahl zu verfeinern. Für mein Beispiel gab es nur eine Option (Alle ausgewählten Kategorien). Es enthält auch die Layoutoptionen, die Kategorieauswahl, die Sortierung nach und die CSS-Einstellungen.

In diesem Beispiel habe ich meine Kategorien ausgewählt, die Spalten auf 4, die Zeilen auf 2 gesetzt und die Produkte alphabetisch sortiert.

Beispielseiten mit WooCommerce-Blöcken

Hier ist ein Blick auf jeden Block im Frontend. Ich habe ein Label hinzugefügt, um sie zu identifizieren. Ich habe jede auf eine andere Anzahl von Spalten eingestellt, aber alle haben 1 Zeile, um zu verhindern, dass das Bild außer Kontrolle gerät. Mit diesen Blöcken können Sie ganz einfach eine Shop-Seite für jede Kategorie erstellen.

Zum Beispiel habe ich eine Seite erstellt, nur um Zubehör zu präsentieren. Ich habe ein Titelbild und einen Titel hinzugefügt und den Block Produkte nach Kategorie so eingestellt, dass er 3 Spalten und 6 Zeilen anzeigt.

Es erstellt eine saubere Seite mit einem schönen Design und zeigt natürlich nur die Produkte für die Kategorie Zubehör. Damit können alle Arten von Produktseiten erstellt werden.

Hier ist ein kurzer CTA, der einen handverlesenen Block und einen Textblock in einer Doppelspalte hinzufügt.

Die Seite ist einfach, aber funktional.

Für diese Seite habe ich die meistverkauften Produkte in einem Blogpost-Layout hinzugefügt. Ich habe es auf 4 Spalten und 1 Zeile gesetzt und Kleidung als Kategorie ausgewählt.

Der Beitrag sieht toll aus. Vor der Veröffentlichung würde ich wahrscheinlich etwas Platz, ein Label für die Produkte und vielleicht etwas Auffüllen in den Text einfügen, aber das Potenzial ist leicht zu erkennen.

Für dieses habe ich ein zweispaltiges Layout hinzugefügt und einen Textblock und den Block mit den meistverkauften Produkten mit 2 Spalten und 2 Zeilen hinzugefügt.

Gedanken beenden

WooCommerce Blocks ist ein interessantes Plugin. Die Blöcke sind einfach zu verwenden und bieten einige nützliche Kategorie-, Layout- und Filterwerkzeuge. Ich mag die Schieberegler für das Spalten- und Zeilenlayout. Wenn Sie Text, Schaltflächen, Hover-Overlays usw. anpassen möchten, müssen Sie CSS verwenden, aber zumindest ist benutzerdefiniertes CSS eine Option. Die Blöcke eignen sich hervorragend zum Erstellen von Verkaufsseiten oder zum Hinzufügen von Produkten zu Ihren Inhalten.

Ich hätte gerne noch mehr Styling-Features (insbesondere für die Schaltflächen, den Text und die Hover-Overlays). Ich wollte immer wieder anpassen, wie ich es bei Divi tun würde (ich glaube, Divi hat mich verwöhnt). Es enthält die CSS-Klassenfelder, die denen helfen, die CSS verwenden. Auch ohne viele Anpassungen habe ich die Blöcke gerne verwendet. Wenn Sie WooCommerce-Produkte in Ihre Gutenberg-Seiten und -Beiträge aufnehmen möchten, sollten Sie WooCommerce Blocks ausprobieren.

Wir wollen von dir hören. Hast du WooCommerce-Blöcke ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über Jomic / shutterstock.com