Vollständige Anleitung zum WooCommerce-Block

WooCommerce ist eines der beliebten Plugins zum Aufbau von E-Commerce-Websites auf WordPress. WooCommerce Blocks ist eines der Plugins in WooCommerce und wurde entwickelt, um es Nutzern zu erleichtern, Online-Shops auf WordPress zu erstellen. WooCommerce Blocks hilft dabei, personalisierte Shop-Seiten zu gestalten, Ihre Produkte anzuzeigen und erweiterte E-Commerce-Funktionen wie Produktfilterung und -suche hinzuzufügen – alles ohne eine einzige Zeile Code zu schreiben. 

Sie müssen das WordPress-Plugin WooCommerce Blocks installieren, um diese neuen Blöcke zu verwenden. Dieses Plugin ist ein Testfeld für experimentelle Funktionen, die zum Kern von WooCommerce hinzugefügt werden könnten.

In diesem praktischen Leitfaden besprechen wir die Funktionen von WooCommerce-Blöcken und wie man sie anpasst. 

Was ist der WooCommerce-Block?

WooCommerce Blocks sind eine Sammlung von Blöcken, die in den WordPress-Blockeditor (Gutenberg) integriert sind und es Ihnen ermöglichen, Ihren Seiten und Beiträgen ganz einfach verschiedene WooCommerce-Funktionen und -Funktionalitäten hinzuzufügen. Ohne Code zu schreiben, können Sie mit diesen Blöcken Produkte, Produktkategorien, Suchfilter, Warenkörbe, Kassen und mehr präsentieren.

Einfacher ausgedrückt sind WooCommerce Blocks vorgefertigte Komponenten, die Sie mit dem Block-Editor in Ihre WordPress-Website einfügen können und die eine einfache Möglichkeit bieten, E-Commerce-Funktionen von WooCommerce zu integrieren. Sie sind Teil des WooCommerce-Kernplugins, sodass Sie sie automatisch erhalten, wenn Sie WooCommerce auf Ihrer WordPress-Website installieren und aktivieren.

Außerdem integrieren sie sich nahtlos in den WordPress-Block-Editor, sodass du benutzerdefinierte Produktseiten, Kategorie-Layouts und Einkaufserlebnisse über eine vertraute Drag-and-Drop-Oberfläche erstellen kannst.ext here ...

Liste der Funktionen des WooCommerce-Blocks

Nachdem wir verstanden haben, was ein WooCommerce-Block ist, besprechen wir nun die einzelnen Funktionen nacheinander:

• Alle Produkte: Zeigt alle Shop-Produkte in einem Rasterformat an.
• Aktive Produktfilter: Zeigt aktive Produktfilter in Listenform oder als Chips (ähnlich wie Schaltflächen) an.
• Alle Bewertungen: Zeigt alle Produktbewertungen an.
• Meistverkauftes Produkt: Zeigt meistverkaufte Produkte in einem Rasterformat an.
• Kasse: Zeigt ein Formular an, mit dem Kunden ihre Bestellungen abschließen können.
• Warenkorb: Zeigt den Warenkorb an.
• Hervorgehobene Kategorie: Hebt bestimmte Produktkategorien zusammen mit Call-to-Action-Buttons hervor.
• Hervorgehobenes Produkt: Zeigt ausgewählte hervorgehobene Produkte an.
• Nach Preis filtern: Zeigt einen Preisbereich an, nach dem Kunden Produkte filtern können. Sie können auch einen bearbeitbaren Preisbereich aktivieren, indem Sie hier auf eine Schaltfläche oder einen Text klicken.
• Nach Lagerbestand filtern: Ermöglicht das Filtern von Produkten nach dem Lagerverfügbarkeitsstatus. Diese Funktion bietet Optionen, um Produkte auf Lager, nicht auf Lager oder in Nachbestellung anzuzeigen.
• Nach Bewertung filtern: Ermöglicht Kunden, Produkte basierend auf Bewertungen zu filtern.
• Nach Attribut filtern: Filtert Produkte basierend auf Größe oder Farbe.
• Handverlesene Produkte: Zeigt handverlesene Produkte in einem Rasterformat an, sodass Sie auswählen können, welche Produkte speziell angezeigt werden sollen.
• Mini-Warenkorb: Bietet eine kurze Ansicht des Warenkorbs.
• Neueste Produkte: Zeigt die neuesten Produkte in einem Rasterformat an. Sie können angepasst werden, indem Elemente wie Titel, Preis, Bewertung und Kaufbutton hinzugefügt/entfernt werden.
• Reduziertes Produkt: Zeigt Produkte an, die derzeit im Angebot sind, in einem Rasterformat an und kann durch Hinzufügen/Entfernen von Elementen wie Titel, Preis, Bewertung und Kaufbutton angepasst werden.
• Produktsuche: Fügt eine Suchleiste hinzu, damit Kunden Produkte leichter finden können.
• Produkt nach Schlagwort: Zeigt Produkte mit bestimmten Schlagwörtern/Etiketten in einem Rasterformat an.
• Produkt nach Attribut: Zeigt Produkte mit bestimmten Attributen (Farbe, Größe usw.) in einem Rasterformat an.
• Produkt nach Kategorie: Zeigt Produkte basierend auf Kategorien in einem Rasterformat an.
• Bewertungen nach Produkten: Zeigt Bewertungen gruppiert nach Produkt an.
• Bewertung nach Kategorie: Zeigt Produktbewertungen aus bestimmten Kategorien an.
• Einzelnes Produkt: Zeigt eine detaillierte Ansicht für ein einzelnes Produkt an.
• Bestbewertete Produkte: Zeigt Produkte mit den höchsten Bewertungen in einem Rasterformat an.

So verwenden Sie den Produktraster-Block in WooCommerce

Neben den Funktionen, die in WooCommerce-Blöcken verfügbar sind, wollen wir nun versuchen, ein Produktraster in WooCommerce zu verwenden oder hinzuzufügen. Stelle sicher, dass du das WooCommerce-Blöcke-Plugin auf deiner Website installiert hast. So fügst du es hinzu:

1. Öffne die Seite oder den Beitrag , auf der bzw. dem du das Produktraster anzeigen möchtest, und gib dann den Titel „Produkt“ ein.

2. Klicken Sie in der linken Navigation auf die Schaltfläche (+), scrollen Sie nach unten zum Abschnitt WooCommerce und wählen Sie „Produktraster“ aus.

3. Gehen Sie als Nächstes zum Konfigurieren des Blocks zum rechten Panel.

In diesem Bereich können Sie verschiedene Dinge anpassen, darunter:

• Layout-Einstellungen: Sie können die Anzahl der im Produktraster angezeigten Zeilen und Spalten anpassen. Wenn Sie beispielsweise beide auf 2 setzen, erhalten Sie eine ausgewogene Ansicht.
• Inhaltseinstellungen: Sie können ein Dropdown-Menü zum Sortieren von Produkten anzeigen. Diese Funktion ermöglicht es Kunden, Produkte nach ihren Vorlieben zu sortieren. Sie können sie deaktivieren, wenn sie nicht benötigt wird.
• Erweiterte Gestaltung: Sie können CSS-Klassen hinzufügen, um das Erscheinungsbild anzupassen.

So fügen Sie hervorgehobene Produkte zu Ihrer Seite hinzu

Der Block „Hervorgehobenes Produkt“ ermöglicht es Ihnen, bestimmte Produkte auf Ihrer Seite oder in Ihrem Beitrag zu präsentieren. Mit diesem Block können Sie Produkte auswählen, ihr Erscheinungsbild anpassen und sie in Ihren Inhalt einfügen, um Besucher auf die Artikel aufmerksam zu machen, die Sie bewerben möchten.

Um den Block „Hervorgehobenes Produkt“ hinzuzufügen, befolgen Sie diese Schritte:

1. Öffnen Sie die Seite oder den Beitrag, in dem Sie es hinzufügen möchten. Wenn Sie es beispielsweise über dem Produktraster platzieren möchten, schaffen Sie in diesem Bereich Platz und klicken Sie auf die Schaltfläche „+“, die erscheint.

2. Wähle die Schaltfläche „+“ in der Block-Symbolleiste, um die Blockliste zu öffnen, suche dann nach „Featured Product“ und wähle es aus.

3. Wählen Sie die Produkte aus, die Sie hervorheben möchten, und klicken Sie dann auf „Fertig“.
4. Um das Erscheinungsbild des Blocks anzupassen, klicken Sie auf „Einstellungen“. Im Einstellungsbereich können Sie verschiedene Dinge anpassen, darunter:

• Produktbeschreibung und Preis anzeigen oder ausblenden.
• Konfigurieren Sie die Medienanzeige (Bild und Video).
• Alternativen Text für Produktbilder hinzufügen.
• Wählen Sie die Überlagerungsfarbe des Blocks.
• Deckkraft des Blocks anpassen.

5. Nach der Anpassung kannst du die Seite veröffentlichen oder aktualisieren, um die Anzeige deines hervorgehobenen Produktblocks zu sehen.

So fügen Sie Filterblöcke in WooCommerce hinzu

Der WooCommerce-Filterblock erleichtert es Kunden, Produkte zu finden, die ihren Suchkriterien entsprechen. Durch die Bereitstellung von Filteroptionen können Kunden die Suchergebnisse schnell auf für sie relevante Produkte eingrenzen.

Um den Filterblock hinzuzufügen, befolgen Sie diese Schritte:

1. Öffnen Sie die Seite oder den Beitrag, in dem Sie den Filterblock platzieren möchten.
2. Bestimmen Sie die gewünschte Position für den Filterblock.
3. Klicken Sie in der Symbolleiste des Block-Editors auf die Schaltfläche „+“ und suchen Sie nach WooCommerce-Filteroptionen wie Preisfilter, Bestandsfilter, Attributfilter und Bewertungsfilter.

Nun besprechen wir jeden verfügbaren Filtertyp. 

Filter nach Preis hinzufügen

Der Preis-Filter-Produktblock ermöglicht es Ihnen, eine Filterfunktion hinzuzufügen, mit der Benutzer den gewünschten Preisbereich auswählen können. Der Preisbereich kann als bearbeitbare Schaltflächen oder als regulärer Text angezeigt werden. Sie können bei Bedarf Schaltflächen hinzufügen und deren Überschriftenebene anpassen.

Filter nach Attribut hinzufügen

Der Produktattributfilter-Block ermöglicht es Benutzern, Produkte anhand von Attributen wie Farbe und Größe zu filtern. Sie können die Attribute, die Sie verwenden möchten, aus der verfügbaren Liste auswählen. Die Anzeige kann in Form einer Liste oder eines Dropdown-Menüs erfolgen. Sie können den Abfragetyp auch auf AND oder OR konfigurieren. Weitere Funktionen umfassen die Anzeige der Anzahl der Produkte, die Auswahl der Überschriftenebene, das Hinzufügen von Schaltflächen und die Auswahl des Filters.

Filter nach Lagerbestand hinzufügen

Der Block „Produktfilter nach Lagerstatus“ ermöglicht es Benutzern, Produkte basierend auf ihrem Verfügbarkeitsstatus anzuzeigen. Sie können verfügbare Produkte (auf Lager), nicht vorrätige Produkte (nicht auf Lager) oder Produkte im Rückstand anzeigen. Sie können ihn auch so konfigurieren, dass die Anzahl der Produkte angezeigt, die Überschriftenebene ausgewählt und Schaltflächen hinzugefügt werden. Dieser Block kann mit anderen WooCommerce-Blöcken wie „Alle Produkte“ verwendet werden. Leider bietet dieser Block keine Vorschau, wenn er zur Seite hinzugefügt wird.

Warenkorb- und Kassenblöcke

Der Warenkorb-Block fügt deiner Seite eine Warenkorb-Anzeige hinzu. Du kannst einen Versandkostenrechner einbinden, einen Link für die Checkout-Schaltfläche auswählen und eine Dark-Mode-Anzeige festlegen. Dieser Block bietet außerdem einen Hinweis darauf, dass du die Seite in den WooCommerce-Einstellungen als Standard-Warenkorbseite festlegen kannst. Ein Link für Feedback ist ebenfalls enthalten.

Der Checkout-Block stellt unterdessen ein Checkout-Formular für Ihren Warenkorb bereit. Sie werden darüber informiert, dass diese Seite in den WooCommerce-Einstellungen als Standard-Checkout-Seite festgelegt werden kann. Es gibt außerdem eine Option für die Anzeige im Dark Mode. Dieser Block besteht aus mehreren Elementen, die Sie individuell anpassen können. Leider bietet dieser Block keine Vorschau, sobald er zur Seite hinzugefügt wurde.

So passen Sie die Shop-Seite in WooCommerce an

Nachdem du gelernt hast, wie du verschiedene WooCommerce-Blöcke verwendest, kannst du mehrere kombinieren, um eine benutzerfreundliche individuelle Shop-Seite zu erstellen. Um dieses spezifische Shop-Seitenlayout zu erstellen, folge diesen Schritten.

1. Erstellen Sie eine neue Seite und nennen Sie sie „Shop“.

2. Fügen Sie den Produktsuche-Block hinzu.

3. Fügen Sie den Block „Produktkategorien-Liste“ hinzu

Stelle dann den Anzeigestil auf das Dropdown-Menü ein.

4. Fügen Sie den Preisfilter Block hinzu.
5. Fügen Sie den Hervorgehobene Produkte -Block hinzu und wählen Sie die Produkte aus, die Sie hervorheben möchten. Konfigurieren Sie nach Bedarf.

6. Fügen Sie den Block „Alle Produkte“ hinzu.

Stellen Sie die Anzahl der Spalten und Zeilen auf 2 ein und deaktivieren Sie die Option für das Sortier-Dropdown.

7. Veröffentlichen Sie abschließend die Seite, um das endgültige Layout der von Ihnen erstellten Shop-Seite zu sehen.

Erstellen Sie Ihren Online-Shop mit WooCommerce Block & verkaufen Sie Ihr Produkt

Nachdem Sie erfolgreich eine benutzerdefinierte Shop-Seite mit WooCommerce Blocks erstellt haben, können Sie nun mit dem Verkauf Ihrer physischen und digitalen Produkte beginnen. Besonders bei digitalen Produkten ist es entscheidend, ein Datei-Download-Plugin wie WP File Download Addon hinzuzufügen.

Dieses Plugin ermöglicht es Ihnen, digitale Download-Produkte in WooCommerce zu verkaufen. WP File Download Addon macht die Verwaltung von Dateien und Dateikategorien für WooCommerce digitale Produkte einfach. Sie können schnell viele digitale Download-Produkte erstellen, die mit einer oder mehreren Dateien verknüpft sind.

Darüber hinaus lässt sich dieses Plugin mit Dropbox, Google Drive, Microsoft OneDriveund der Social Locker -Funktion integrieren. Sie können Dateien aus diesen Cloud-Diensten als WooCommerce-Digitaldownloads mit stark eingeschränktem Zugriff über Cloud-API-Konnektoren bereitstellen.

Mit dem WP File Download Addon ist der Verkauf digitaler Produkte in Ihrem WooCommerce-Onlineshop einfacher und effizienter geworden. Nachdem Sie Ihren Shop mit WooCommerce Blocks erstellt haben, ergänzt dieses Plugin den Verkauf Ihrer digitalen Inhalte perfekt.

Fazit

WooCommerce Blocks ist ein Plugin, mit dem du einen kompletten Online-Shop in WordPress erstellen kannst, ohne Code zu schreiben. Mit verschiedenen Blöcken wie Produktrastern, Filtern und Produkt-Highlights kannst du ganz einfach ein ansprechendes und benutzerfreundliches Einkaufserlebnis schaffen. Die vertraute Drag-and-Drop-Oberfläche macht die Entwicklung eines Online-Shops schneller und effizienter.

Nachdem Sie Ihren Online-Shop erstellt haben, besteht der nächste Schritt darin, physische und digitale Produkte zu verkaufen. Sie können das WP File Download Addon-Plugin nutzen, um digitale Produkte mit WooCommerce zu verkaufen, wie E-Books, Software oder Multimedia-Inhalte.

WP File Download Addon ist ab 49 $ pro Jahr erhältlich und wird von über 60.000 Mitgliedern genutzt. Worauf warten Sie also? Schließen Sie sich uns an für bessere Verkäufe digitaler Produkte!