Eine Anleitung zur Verwendung von Gutenberg-Blöcken für Ihren WooCommerce-Shop

Die Einführung des Gutenberg-Editors in WordPress hat maßgeblich dazu beigetragen, die Identität von WordPress neu zu gestalten. Von einem zentralen Content-Management-System mit Funktionen zum Hinzufügen von Medien und optional Plugins für verschiedene Anforderungen ist es jetzt zusätzlich ein reichhaltiger, medienzentrierter WYSIWYG-Editor und Webseiten-Ersteller, ohne Kompromisse bei der Flexibilität, die es immer bot. Tatsächlich erhöhen die von Gutenberg bereitgestellten Blöcke die Flexibilität, Seiten so zu erstellen, wie Sie es möchten.

Der beste Vorteil, den Gutenberg gegenüber dem vorherigen Editor (auch als TinyMCE-Editor bezeichnet) bietet, besteht darin, dass es nicht mehr erforderlich ist, zu wissen, wie man codiert, oder die WordPress-Struktur zu verstehen, um zu wissen, wie Sie Ihrer WordPress-Website oder WooCommerce mehr Funktionen hinzufügen können Laden. Wenn Sie jedoch mit dem alten WordPress-Editor vertrauter sind, können Sie jederzeit dieses kostenlose Plugin installieren, das von WordPress-Mitwirkenden als Classic Editor bezeichnet wird und Ihnen die Möglichkeit bietet, Gutenberg vollständig zu deaktivieren oder zwischen dem alten Editor und Gutenberg hin und her zu wechseln . Gutenberg bietet auch einen klassischen Editor-Block für Benutzer, um die klassischen Editor-Funktionalitäten innerhalb von Gutenberg zu nutzen! Klingt zu gut um wahr zu sein? Lassen Sie uns in diesen Beitrag eintauchen oder vielmehr in eine Anleitung zur Verwendung von Gutenberg-Blöcken für Ihren WooCommerce-Shop!

Auf Gutenberg-Blöcke kann über jede WordPress-Seite zugegriffen werden. Wenn du eine neue Seite hinzufügst oder eine vorhandene Seite in WordPress bearbeitest, siehst du ein „+“-Symbol, wenn du mit der Maus über den Inhaltsbereich oben links auf dem Bildschirm fährst.

Es gibt verschiedene Arten von Blöcken, die Gutenberg für unterschiedliche Zwecke bereitstellt:

Während die Blöcke zum Erstellen einer Vielzahl von Seiten verwendet werden können, sollten Sie sich als WooCommerce-Administrator oder Geschäftsleiter am meisten auf die Startseite oder die Shop-Seite konzentrieren. Lassen Sie uns daher für die Zwecke dieses Tutorials eine Homepage für Ihr Geschäft erstellen, die darauf ausgelegt ist, Ihren Umsatz zu steigern! Wir werden dafür am häufigsten WooCommerce-Blöcke verwenden. Diese Blöcke waren früher Teil eines Feature-Plugins von Automattic und wurden in WooCommerce Version 3.5 zusammengeführt.

WooCommerce-Blöcke enthalten verschiedene Funktionen oder „Blöcke“, die sich hauptsächlich auf die Anzeige von Produkten auf Ihrer Seite beziehen, die Sie zum Aufbau Ihres Shops verwenden können. Es folgt die Liste der Blöcke, die unter WooCommerce-Blöcken verfügbar sind:

• Produkte nach Kategorie
• Neueste Produkte
• Vorgestelltes Produkt
• Meistverkaufte Produkte
• Produkte im Angebot
• Handverlesene Produkte
• Bestbewertete Produkte
• Produkte nach Attributen

Beginnen wir mit dem Hinzufügen eines empfohlenen Produkts oben auf unserer Startseite. Dies kann jedes Produkt sein, das Sie Ihren Benutzern / Ihrem Publikum hervorheben möchten.

Wir haben ein Produkt namens „Store Membership“ hinzugefügt. Sobald ein Produkt hinzugefügt wird, werden dessen Bild, Beschreibung und Preis angezeigt. Sie können diese mithilfe der Optionen in der rechten Seitenleiste ausblenden. Ein „Jetzt einkaufen“-Button wird ebenfalls hinzugefügt; die Farbe, der Text und die URL, auf die es zeigt, sind alle bearbeitbare Attribute.

Die Overlay-Farbe ist eine interessante Funktion, mit der Sie die Farbe und Deckkraft des Produktbildes einstellen können, das Sie in diesem Fall als Featured-Produkt ausgewählt haben:

Sie können diesem Bild auch eine CSS-Klasse hinzufügen. In ähnlicher Weise kann auch die Schaltfläche Jetzt einkaufen bearbeitet werden:

Lassen Sie uns als Nächstes einige Neuankömmlinge und Bestseller des Geschäfts hinzufügen, damit sowohl neue als auch wiederkehrende Besucher etwas von dieser Seite mitnehmen können.

Dazu fügen wir zunächst einen Block namens Heading hinzu, der unter Common Blocks zu finden ist:

Sobald eine entsprechende Überschrift wie „Neuankömmlinge“ hinzugefügt wurde, können wir fortfahren und den entsprechenden Block dafür hinzufügen. Für unsere beiden Zwecke verwenden wir WooCommerce-Blöcke, die als meistverkaufte Produkte und neueste Produkte bekannt sind. Diese Blöcke sind wieder unter WooCommerce-Blöcke zu finden. Lassen Sie uns den Block „ Neueste Produkte “ hinzufügen.

Sie können sehen, dass der Block „Neueste Produkte“ die zuletzt hinzugefügten Produkte aus Ihrem WooCommerce-Shop enthält. Sie können für diesen Block so viele Produkte anzeigen, wie Sie möchten, indem Sie die Anzahl der anzuzeigenden Zeilen und Spalten festlegen und die Produkte mithilfe der Optionen in der rechten Seitenleiste nach Kategorie filtern:

Auf diese Weise haben wir nach der Zeile „Empfohlenes Produkt“ eine weitere Zeile für Neuankömmlinge hinzugefügt:

Als Nächstes fügen wir die meistverkauften Produkte auf ähnliche Weise hinzu (nachdem wir den Heading-Block dafür hinzugefügt haben):

Nachdem wir diese Zeilen sowohl für neue als auch für wiederkehrende Besucher erstellt haben, fügen wir auch eine Zeile mit Produkten hinzu, die im Angebot sind, um mehr Verkäufe zu erzielen. Wir werden dies erneut mit dem On Sale -Block unter WooCommerce Blocks tun (nachdem wir den Heading-Block verwendet haben, um eine Überschrift hinzuzufügen):

Es gibt viele weitere Blöcke, die Sie je nach Ihren Anforderungen unter WooCommerce-Blöcke hinzufügen können. Lassen Sie uns nun alle Produkte zur Shop-Seite hinzufügen. Dazu können Sie den Block Produkte nach Kategorie auswählen.

Oft finden Sie all diese Blöcke auch in der Blockkategorie Meistverwendet , aber für die Zwecke dieses Tutorials haben wir diese Blöcke aus der Kategorie ausgewählt, der sie zugewiesen wurden. Sie können alle Überschriften mit ihren jeweiligen Seiten verlinken, wie z. B. der Verkaufsseite, der Bestseller-Seite usw., damit Kunden die vollständige Liste der Produkte in diesem Abschnitt anzeigen können.

Auf unserer Shop-/Startseite können wir eine Schaltfläche mit der Aufschrift „Browse Store“ hinzufügen, die mit der Shop-Seite verknüpft ist.

Um eine Schaltfläche hinzuzufügen, müssen wir aus dem Layout-Elemente-Block auswählen.

Wir werden diesen Button mit der Shop-Seite verlinken.

In ähnlicher Weise können Sie Schaltflächen unter allen anderen von uns erstellten Blöcken wie dem Block „Bestseller“, dem Block „Im Angebot“ usw. erstellen und separate Seiten für all diese erstellen und die Schaltflächen mit ihren jeweiligen Seiten verknüpfen.

Um separate Seiten für verschiedene Produkttypen (Bestseller oder Sale-Produkte) zu erstellen, können Sie Shortcodes verwenden, die diese spezifischen Produkttypen auf den jeweiligen Seiten anzeigen. In diesem Beitrag haben wir darüber gesprochen, wie Sie mithilfe verschiedener Shortcodes verschiedene Produktkategorien auf der Homepage (oder einer beliebigen Seite) anzeigen können.

So sieht unsere Seite am Ende aus:

Klicken Sie jetzt einfach auf Anpassen (im Frontend, wenn Sie eine Vorschau Ihrer Seite anzeigen), um sie zu Ihrer Startseite zu machen, und Sie können loslegen! So einfach erstellen Sie mit Gutenberg ansprechende Startseiten für Ihren WooCommerce-Shop. Erkunden und experimentieren Sie mit den verschiedenen Blöcken, die Gutenberg zu bieten hat, um seine Funktionen optimal zu nutzen!