Mit WooCommerce Blocks kannst du individuelle Shop-Seiten erstellen, deine Produkte präsentieren und erweiterte E-Commerce-Funktionen wie Filtern und Suchen hinzufügen – und das alles, ohne eine einzige Zeile Code zu schreiben.
Viele Blöcke werden standardmäßig mit WooCommerce ausgeliefert, aber einige neue Blöcke nicht. Du kannst diese neuen Blöcke in deinem WooCommerce-Shop verwenden, indem du das WooCommerce Blocks WordPress Plugin installierst. Dieses Plugin ist ein Testfeld für experimentelle Angebote und potenzielle zukünftige Ergänzungen zu den WooCommerce-Blöcken.
Die Integration von WooCommerce Blocks in WordPress ist mit Kinsta ganz einfach: Du kannst WooCommerce während des Einrichtungsprozesses durch Aktivieren eines Kästchens einbinden. Diese Integration ermöglicht die schnelle und mühelose Erstellung eines Onlineshops.
In dieser praktischen Anleitung erfährst du, wie du mit den WooCommerce-Blöcken WooCommerce-Funktionen zu deiner WordPress-Website hinzufügen kannst.
Voraussetzungen
Um diesem Leitfaden folgen zu können, musst du Folgendes mitbringen
- WooCommerce ist in deinem WordPress-Dashboard installiert und aktiviert
- Vertrautheit mit WordPress
Wenn du noch keine WordPress-Website hast, kannst du über das Dashboard von Kinsta oder über DevKinsta lokal eine WordPress-Website einrichten. Sobald du deine Website hast, importiere die Beispielprodukte für deinen WooCommerce-Shop.
WooCommerce-Blöcke erforschen
Der Standard-Blockeditor von WordPress, der mit Version 5.0 eingeführt wurde, ist der Gutenberg-Editor. Er hat den klassischen Editor durch ein blockbasiertes System ersetzt, mit dem du visuell ansprechende Inhalte erstellen und anpassen kannst, ohne umfangreiche Kenntnisse im Frontend-Coding zu haben.
WooCommerce Blocks fügt sich nahtlos in die intuitive Drag-and-Drop-Oberfläche des Gutenberg-Editors ein und bietet eine Reihe spezieller Blöcke für die Produktanzeige, die Verwaltung des Warenkorbs, den Checkout-Prozess und vieles mehr.
Dank dieser Integration kannst du die Flexibilität und Einfachheit des Block-Editors voll ausnutzen und deine WordPress-Website für eine optimale E-Commerce-Leistung anpassen.
Um WooCommerce-Blöcke zu nutzen, öffnest du zunächst eine Seite oder einen Beitrag. Klicke auf die Schaltfläche + in der oberen Leiste, um alle Blöcke anzuzeigen, und navigiere dann zum Abschnitt WOOCOMMERCE. Hier findest du einen kurzen Überblick über die verschiedenen Blöcke:
- Produktsuche – Fügt eine Suchleiste hinzu, mit der Kunden schnell nach Produkten suchen können.
- Alle Produkte – Zeigt alle Produkte des Shops in einem Raster an.
- Alle Bewertungen – Listet alle Produktbewertungen auf.
- Klassischer Checkout – Zeigt den klassischen Checkout-Shortcode an.
- Klassischer Warenkorb – Zeigt den klassischen Warenkorb-Shortcode an.
- Kundenkonto – Ermöglicht das An- und Abmelden von Kunden.
- Hervorgehobene Kategorie – Hebt eine Produktkategorie und einen Call-to-Action (CTA) hervor, um schnelle Reaktionen zu fördern.
- Hervorgehobenes Produkt – Hebt ein Produkt oder eine Variante und einen CTA hervor.
- Aktive Filter – Zeigt die derzeit aktiven Filter an.
- Nach Preis filtern – Zeigt eine Preisspanne an, nach der Kunden Produkte filtern können.
- Nach Lagerbestand filtern – Ermöglicht das Filtern von Produkten nach Bestandsstatus.
- Nach Attributen filtern – Ermöglicht das Filtern von Produkten nach Attributen wie Größe oder Farbe.
- Nach Bewertung filtern – Ermöglicht es den Kunden, die Produkte nach ihrer Bewertung zu filtern.
- Handverlesene Produkte – Zeigt eine Auswahl von handverlesenen Produkten in einem Raster an.
- Mini-Warenkorb – Bietet eine Schaltfläche zur schnellen Warenkorbansicht.
- Store Notices – Zeigt kundenorientierte Benachrichtigungen an, die von WooCommerce oder anderen Erweiterungen generiert wurden.
- Meistverkaufte Produkte – Zeigt eine Übersicht der meistverkauften Produkte deines Shops an.
- Liste der Produktkategorien – Zeigt alle Produktkategorien als Liste oder als Dropdown an.
- Produkte nach Kategorie – Zeigt ein Raster mit Produkten aus den ausgewählten Kategorien an.
- Produktsammlung (Beta) – Zeigt Produkte aus einer bestimmten Sammlung an.
- Neueste Produkte – Zeigt die neuesten Produkte in einem Raster an.
- Verkaufte Produkte – Zeigt die aktuellen Verkaufsprodukte in einem Raster an.
- Produkte nach Tag – Zeigt Produkte mit dem ausgewählten Tag in einem Raster an.
- Top bewertete Produkte – Zeigt die am besten bewerteten Produkte in einem Raster an.
- Produkte nach Attributen – Zeigt die Produkte mit den ausgewählten Attributen in einem Raster an.
- Bewertungen nach Kategorie – Zeigt die Produktbewertungen aus bestimmten Kategorien an.
- Bewertungen nach Produkt – Zeigt die Bewertungen nach Produkten geordnet an.
- Einzelprodukt – Zeigt ein einzelnes Produkt an.
- Warenkorb – Zeigt den Einkaufswagen an.
- Kasse – Zeigt das Formular an, mit dem Kunden Bestellungen aufgeben können.
Du weißt jetzt, wofür die einzelnen Blöcke stehen. Lass uns einige dieser Blöcke verwenden, um ein E-Commerce-Erlebnis zu schaffen.
Produktrasterblock in WooCommerce verwenden
Der Produktrasterblock ist ein vielseitiges Werkzeug, um die Produkte deines Shops in einem übersichtlichen Rasterformat auf deiner WordPress-Website zu präsentieren. Hier erfährst du, wie du einen Produktraster-Block hinzufügst und anpasst:
- Navigiere zu der Seite oder dem Beitrag, auf der/dem du die Produkte anzeigen möchtest. Gib einen Titel wie „Produkte“ ein
- Klicke auf die Schaltfläche + in der oberen Navigationsleiste, um alle Blöcke anzuzeigen. Scrolle runter zum Abschnitt WOOCOMMERCE und wähle Alle Produkte. Diese Aktion zeigt deine Produkte in einem Raster auf der Seite an.
Verwendung des WooCommerce-Blocks „Alle Produkte“ zur Anzeige von Produkten in einem Raster - Um diesen Block zu konfigurieren, verwende das Blockeinstellungsfeld auf der rechten Seite. Du kannst auf die Einstellungen zugreifen, indem du auf das Symbol Einstellungen klickst (das zweite Symbol ganz rechts in der oberen Navigationsleiste).
Einstellungsfeld zur Anpassung des Blocks Alle Produkte Hier kannst du das Layout, den Inhalt und das Styling des Rasters anpassen:
- Layout-Einstellungen: Passe die Anzahl der Zeilen und Spalten an. Setze zum Beispiel beide auf 2, um ein ausgewogenes Aussehen zu erreichen.
- Inhaltseinstellungen: Entscheide, ob du ein Sortier-Dropdown-Menü für Kunden einfügen möchtest. Mit dieser Funktion können die Kunden die Produkte in einer bestimmten Reihenfolge sortieren. Du kannst diese Funktion auch deaktivieren, wenn du das möchtest.
- Erweitertes Styling: Bei Bedarf kannst du CSS-Klassen für ein ausgefeilteres Styling hinzufügen.
- Zeig eine Vorschau der Seite an, sobald du die Konfigurationen abgeschlossen hast, um sicherzustellen, dass alles wie gewünscht aussieht. Klicke dann auf die Schaltfläche Veröffentlichen. In diesem Schritt kannst du festlegen, ob die Seite öffentlich, privat oder passwortgeschützt zugänglich sein soll, je nachdem, was du möchtest.
Die aktualisierte Seite Produkte zeigt die Produkte in einem 2-mal-2-Raster an und enthält eine Navigationsleiste
Füge deiner Seite oder deinem Beitrag einen Block mit einem besonderen Produkt hinzu
Mit dem Block „Herausragendes Produkt“ kannst du ein Produkt auf deiner Seite oder in deinem Beitrag hervorheben. Du kannst ein Produkt auswählen, seine Anzeigeeinstellungen anpassen und es zu deinem Inhalt hinzufügen, um die Aufmerksamkeit auf einen bestimmten Artikel zu lenken, den du hervorheben möchtest.
Befolge diese Schritte, um einen Block mit einem hervorgehobenen Produkt hinzuzufügen:
- Beginne damit, zu der Seite oder dem Beitrag zu navigieren, auf der du das Produkt vorstellen möchtest. Stell dir vor, du gestaltest ein Produktraster und möchtest das vorgestellte Produkt ganz oben platzieren. Erstelle einen Bereich an dieser Stelle und du wirst links einen + Button sehen.
Wenn du einen bestehenden Block in der Nähe der gewünschten Stelle hast, kannst du auch auf die drei vertikalen Punkte klicken, damit sich ein Menü öffnet. Du kannst Vorher hinzufügen oder Nachher hinzufügen wählen.
Hinzufügen des Blocks „Featured Product“ vor dem Block „Alle Produkte“ - Wähle die Schaltfläche „+ “ in der oberen Navigationsleiste, um alle Blöcke anzuzeigen und suche nach Featured Product.
Wähle ein Produkt als Featured Product mit dem Block Featured Product aus - Wähle das Produkt aus, das du anzeigen möchtest. Klicke dann auf Fertig.
- Um deinem Produktblock ein einzigartiges Aussehen zu geben, klicke auf Einstellungen. In den Blockeinstellungen kannst du:
- Entscheiden, ob die Produktbeschreibung und der Preis angezeigt werden sollen.
- Konfiguriere, wie deine Medien (Bilder und Videos) angezeigt werden sollen.
- Den Alt-Text für das Produktbild festlegen.
- Die Farbe für die Überlagerung des Blocks wählen.
- Stelle die Deckkraft des Blocks ein.
Anpassen der Einstellungen für den Featured Product-Block - Wenn du alle notwendigen Anpassungen vorgenommen hast, kannst du deine Seite veröffentlichen oder aktualisieren, wenn sie bereits live ist. So kannst du den Block in Aktion sehen und sicherstellen, dass er genau so aussieht, wie du ihn haben willst.
Vorschau auf die aktualisierte Produktseite, auf der die Mütze über dem Produktgitter angezeigt wird
Verwendung von Filterblöcken in WooCommerce
Mit Filterblöcken können deine Kunden die Produktsuche nach bestimmten Kriterien verfeinern und so schnell die Produkte finden, die ihren Vorlieben oder Anforderungen entsprechen.
- Navigiere zu der Seite oder dem Beitrag, zu dem du die Blöcke hinzufügen möchtest. In dieser Anleitung wird dieselbe Produktseite wie in den vorherigen Schritten verwendet.
- Wähle aus, wo du die Filter hinzufügen möchtest.
- Klicke auf die Schaltfläche + in der oberen Navigationsleiste, um alle Blöcke anzuzeigen. Scrolle nach unten zum Abschnitt WOOCOMMERCE, um eine Filteroption für Preis, Bestand, Attribut und Bewertung zu sehen. Wenn du zum Beispiel Filter nach Preis wählst.
Hinzufügen des Blocks Nach Preis filtern
Wenn du diesen Block auswählst, kannst du eine Preisspannenleiste anzeigen, mit der die Nutzer/innen die Produkte auf der Seite nach ihrer gewünschten Preisspanne filtern können. Du kannst die Einstellungen des Blocks auf der rechten Seite an deine Bedürfnisse anpassen.
Hinzufügen des Blocks Filter nach Attribut
Du kannst auch den Block Nach Attributen filtern verwenden.
Du kannst ein bestimmtes Attribut auswählen, z. B. Farbe, und dann die Einstellungen entsprechend konfigurieren. Du kannst z.B. Produktanzahl anzeigen aktivieren, um die Anzahl der in jeder Farbe verfügbaren Produkte anzuzeigen.
Anschließend kannst du die Live-Seite anzeigen und die Funktionalität der Filterschaltflächen testen.
Wenn du diese Schritte befolgst, kannst du deinen Kundinnen und Kunden ein nahtloses Einkaufserlebnis bieten, indem du ihnen die Möglichkeit gibst, ihre Produktsuche nach verschiedenen Kriterien zu verfeinern, was ihre Zufriedenheit erhöht und ihnen hilft, die gewünschten Produkte zu finden.
Warenkorb und Kassenseiten
Die Einkaufswagen- und Kassenfunktionen deines Webshops müssen intuitiv und voll funktionsfähig sein, damit der Einkauf für deine Kunden reibungslos verläuft. Um ein hervorragendes Kundenerlebnis zu gewährleisten, müssen die Artikel im Warenkorb effektiv verwaltet werden und der Bestellvorgang muss mühelos vonstattengehen.
WooCommerce erstellt die Seiten Warenkorb und Kasse standardmäßig mit den entsprechenden Blöcken. Kunden können Produkte in ihren Warenkorb legen und über die Navigationsleiste darauf zugreifen.
Nachdem dein Kunde den Inhalt seines Warenkorbs bestätigt hat, kann er auf die Schaltfläche Zur Kasse gehen klicken, die erforderlichen Angaben ausfüllen und seine Bestellung aufgeben.
Wie du eine eigene Shop-Seite erstellst
Nachdem du nun gelernt hast, wie du bestimmte WooCommerce-Blöcke verwenden kannst, geht es im nächsten Schritt darum, sie zu kombinieren, um eine benutzerfreundliche Shop-Seite mit den folgenden Blöcken zu erstellen:
- Produktsuche
- Nach Preis filtern
- Produktkategorien
- Ausgewähltes Produkt
- Alle Produkte
Um dieses benutzerdefinierte Shop-Layout zu erstellen, erstelle eine neue Seite und befolge die unten stehenden Schritte.
- Gib „Shop“ als Seitentitel ein.
Die Shop-Seite im Bearbeitungsmodus - Füge mit denselben Schritten wie beim Hinzufügen eines Blocks den Block Produktsuche hinzu. Wenden Sie keine Konfigurationen an.
Hinzufügen des Blocks Produktsuche - Hinzufügen des Blocks Produktkategorienliste.
Hinzufügen des Blocks Produktkategorien-Liste Setze auf der Blockeinstellungsseite den DISPLAY STYLE auf Dropdown.
Anpassen der Einstellungen des Blocks Produktkategorienliste - Als Nächstes fügst du den Block Filter nach Preis hinzu. Für diesen Block musst du nichts konfigurieren.
- Füge den Block Featured Product hinzu und wähle das Produkt aus, das angezeigt werden soll. Nimm die gleichen Einstellungen vor wie für den Block Featured Product, den du zuvor erstellt hast.
Auf der Shop-Seite wird das vorgestellte Produkt mit einigen Einstellungen für das vorgestellte Produkt angezeigt - Füge den Block Alle Produkte hinzu.
Hinzufügen des Blocks „Alle Produkte“ Setze bei den Einstellungen dieses Blocks die Werte COLUMNS und ROWS auf 2 und entferne die Option Show Sorting Dropdown.
Anpassen der Einstellungen des Blocks „Alle Produkte“ - Veröffentliche die Seite und sieh dir die Ergebnisse an.
Vorschau auf die Shop-Seite 
Vorschau auf die Shop-Seite
Wie man die Leistung der Blöcke überwacht und analysiert
Die robusten Tools von Kinsta überwachen und analysieren die Leistung von Seiten, die WooCommerce-Blöcke verwenden.
Das APM-Tool von Kinsta
Mit dem Application Performance Monitoring (APM) Tool von Kinsta kannst du die Leistung von Seiten überwachen, die WooCommerce-Blöcke enthalten. Es erfasst mit Zeitstempeln versehene Informationen über PHP-Prozesse, MySQL-Datenbankabfragen und andere wichtige Metriken, mit denen du die von WooCommerce unterstützten Transaktionen verfolgen und analysieren kannst.
So kannst du z. B. die Dauer und Häufigkeit von Interaktionen und mögliche Engpässe im Zusammenhang mit diesen Seiten analysieren. Mit diesen Informationen kannst du die Fehlerbehebung und Leistungsoptimierung genau vornehmen.
Das Analysetool von Kinsta
Um die Auswirkungen von WooCommerce-Blöcken auf das Nutzerengagement und den Umsatz zu bewerten, ist ein vielseitiger Ansatz erforderlich. Die umfassenden Analysetools von Kinsta spielen dabei eine entscheidende Rolle. Mit den WordPress-Analysefunktionen im MyKinsta-Dashboard erhältst du wertvolle Einblicke in verschiedene Leistungskennzahlen, die sich direkt auf das Nutzererlebnis – und damit auf den Umsatz – auswirken.
- Im Bereich Ressourcen des MyKinsta-Dashboards kannst du die Gesamtbesuche, den Speicherplatz und die Bandbreitennutzung deiner Website verfolgen. So erhältst du einen quantitativen Überblick über den Website-Verkehr und die Ressourcennutzung.
- Der Bereich Leistung enthält Kennzahlen wie die durchschnittliche PHP- und MySQL-Antwortzeit und die AJAX-Nutzung. Diese Statistiken helfen dir, die Reaktionsfähigkeit und Interaktivität der Seiten mit WooCommerce Blöcken zu verfolgen.
- Der Abschnitt Antwort enthält Aufschlüsselungen der Antwortcodes und Fehleranalysen, die dir helfen, die Interaktionen der Nutzer und mögliche Hindernisse, auf die sie stoßen können, besser zu verstehen.
- Im Bereich Geo & IP kannst du die Nutzung des Content Delivery Network (CDN), die Cache-Effizienz und geografische Daten verfolgen. Diese Informationen helfen dir, deine Website anhand von Nutzerverhalten, Standort und Leistungsdaten zu optimieren.
Wenn du diese Analysen genau beobachtest, kannst du potenzielle Engpässe erkennen und deine Seiten mit WooCommerce Blocks optimieren, um ein nahtloses, ansprechendes Nutzererlebnis zu gewährleisten.
Weitere Tipps findest du in unserem ultimativen Leitfaden über 18 Möglichkeiten, deinen WooCommerce-Shop zu beschleunigen. Geschwindigkeit ist für Online-Shops entscheidend, denn langsam ladende Seiten führen zu Frustration bei den Nutzern und zu Umsatzeinbußen.
Zusammenfassung
In diesem Leitfaden wurden die Möglichkeiten von WooCommerce-Blöcken erläutert, vom Hinzufügen von Produktrastern und vorgestellten Produkten bis hin zur Implementierung leistungsstarker Filterblöcke. Außerdem wurde die Bedeutung von Einkaufswagen und Kassenboxen erläutert, die für ein reibungsloses Einkaufserlebnis entscheidend sind.
Die strategische Kombination verschiedener WooCommerce-Blöcke ermöglicht ein intuitives und visuell ansprechendes Layout. Dabei müssen die Blöcke sorgfältig ausgewählt, konfiguriert und angeordnet werden, um bestimmte Funktionen und Kundenwünsche zu erfüllen.
Wenn du dich für den WordPress-Hosting-Dienst von Kinsta entscheidest, kannst du die Leistung und Zuverlässigkeit deiner WooCommerce-Websites erheblich steigern. Mit optimierten Serverkonfigurationen, robusten Sicherheitsmaßnahmen und nahtloser Skalierbarkeit sorgt Kinsta dafür, dass dein Online-Shop mit höchster Effizienz arbeitet.
Egal, ob du WooCommerce-Blöcke für Produktanzeigen, Filter oder Warenkorbfunktionen verwendest, die Hosting-Infrastruktur von Kinsta bietet die Geschwindigkeit und Stabilität, die du brauchst, um deinen Kunden ein außergewöhnliches Einkaufserlebnis zu bieten.
Hast du schon Erfahrung mit WooCommerce-Blöcken? Wenn ja, welcher Block ist dein Favorit und welchen neuen Block würdest du gerne hinzufügen? Teile uns deine Meinung in den Kommentaren mit.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar