Kompletter Leitfaden WooCommerce Block

WooCommerce ist eines der beliebten Plugins zum Erstellen von E-Commerce-Websites auf WordPress. WooCommerce Blocks ist eines der Plugins in WooCommerce, das darauf ausgelegt ist, es den Benutzern einfacher zu machen, Online-Shops auf WordPress zu erstellen. WooCommerce Blocks unterstützt bei der Erstellung von personalisierten Shop-Seiten, der Darstellung Ihrer Produkte und dem Hinzufügen fortschrittlicher E-Commerce-Funktionen wie Produktfilterung und -suche – alles ohne eine einzige Codezeile zu schreiben. 

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

In diesem praktischen Leitfaden werden wir die Funktionen von WooCommerce-Blöcken und deren Anpassung besprechen. 

Was ist ein WooCommerce-Block?

WooCommerce-Blöcke sind eine Sammlung von Blöcken, die in den WordPress-Blockeditor (Gutenberg) integriert sind und es Ihnen ermöglichen, verschiedene WooCommerce-Funktionen und -Funktionalitäten auf Ihren Seiten und Beiträgen hinzuzufügen. Ohne Code zu schreiben, ermöglichen diese Blöcke es Ihnen, Produkte, Produktkategorien, Suchfilter, Einkaufswagen, Kassen und mehr anzuzeigen.

Vereinfacht gesagt sind WooCommerce-Blöcke vorgefertigte Komponenten, die Sie mithilfe des Blockeditors in Ihre WordPress-Website einfügen können. Sie bieten eine einfache Möglichkeit, E-Commerce-Funktionalität von WooCommerce zu integrieren. Dies ist Teil des WooCommerce-Kernplugins, sodass Sie diese automatisch erhalten, wenn Sie WooCommerce auf Ihrer WordPress-Website installieren und aktivieren.

Außerdem integrieren sie sich nahtlos in den WordPress-Blockeditor und ermöglichen es Ihnen, benutzerdefinierte Produktseiten, Kategorieslayouts und Einkaufserlebnisse mit einer vertrauten Drag-and-Drop-Oberfläche zu erstellen. Hier weiter ...

Funktionen des WooCommerce Blocks

Nachdem wir verstanden haben, was ein WooCommerce-Block ist, werden wir als nächstes jede bereitgestellte Funktion einzeln besprechen:

• Alle Produkte: Zeigt alle Store-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.
• Bestseller-Produkt: Zeigt bestverkaufte Produkte in einem Rasterformat an.
• Kasse: Zeigt ein Formular an, mit dem Kunden ihre Bestellungen abschließen können.
• Warenkorb: Zeigt den Warenkorb an.
• Vorgestellte Kategorie: Hebt bestimmte Produktkategorien zusammen mit Call-to-Action-Buttons hervor.
• Vorgestellte Produkte: Zeigt ausgewählte vorgestellte Produkte an.
• Filtern nach Preis: Zeigt einen Preisfilter, mit dem Kunden Produkte filtern können. Sie können auch einen bearbeitbaren Preisfilter aktivieren, indem Sie auf eine Schaltfläche oder einen Text klicken.
• Nach Lagerbestand filtern: Ermöglicht das Filtern von Produkten basierend auf dem Lagerbestandsstatus. Diese Funktion bietet Optionen, um Produkte auf Lager, nicht auf Lager oder nachbestellte Produkte anzuzeigen.
• Filtern nach Bewertung: Ermöglicht Kunden, Produkte basierend auf Bewertungen zu filtern.
• Filtern nach Attribut: Filtert Produkte nach Größe oder Farbe.
• Ausgewählte Produkte: Zeigt ausgewählte Produkte in einem Rasterformat an, sodass Sie auswählen können, welche Produkte speziell angezeigt werden sollen.
• Mini-Warenkorb: Bietet eine kurze Ansicht des Einkaufswagens.
• Neueste Produkte: Zeigt die neuesten Produkte in einem Rasterformat an. Sie können durch Hinzufügen/Entfernen von Elementen wie Titel, Preis, Bewertung und Kaufbutton angepasst werden.
• Im Angebot befindliche Produkte: Zeigt aktuell im Angebot befindliche Produkte 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, um Kunden bei der Suche nach Produkten zu unterstützen.
• Produkte nach Schlagwort: Zeigt Produkte mit bestimmten Schlagworten/Labels in einem Rasterformat an.
• Produkte nach Attribut: Zeigt Produkte mit bestimmten Attributen (Farbe, Größe usw.) in einem Rasterformat an.
• Produkte nach Kategorie: Zeigt Produkte basierend auf Kategorien in einem Rasterformat an.
• Produktbewertungen: Zeigt Bewertungen, gruppiert nach Produkt, an.
• Überprüfung nach Kategorie: Zeigt Produktbewertungen aus bestimmten Kategorien an.
• Einzelnes Produkt: Zeigt eine detaillierte Ansicht für ein einzelnes Produkt an.
• Top-bewertete Produkte: Zeigt Produkte mit den höchsten Bewertungen in einem Rasterformat an.

So verwenden Sie den Produktgitterblock in WooCommerce

Neben dem Lernen über die in WooCommerce-Blöcken verfügbaren Funktionen können wir versuchen, ein Produktgitter in WooCommerce zu verwenden oder hinzuzufügen. Stellen Sie sicher, dass Sie das WooCommerce-Blocks-Plugin auf Ihrer Website installiert haben. Hier erfahren Sie, wie Sie es hinzufügen:

1. Öffnen Sie die Seite oder den Beitrag, auf der/dem Sie das Produktgitter anzeigen möchten, und geben Sie dann den Titel "Produkt" ein.

2. In der linken Navigation, klicken Sie auf die (+)-Schaltfläche > scrollen Sie nach unten zum WooCommerce-Bereich > wählen Sie "Produktraster".

3. Als nächstes gehen Sie zur Konfiguration des Blocks und navigieren zum rechten Panel.

In diesem Panel können Sie verschiedene Dinge anpassen, einschließlich:

• Layout-Einstellungen: Sie können die Anzahl der Zeilen und Spalten anpassen, die im Produktgrid angezeigt werden. Zum Beispiel können Sie beide auf 2 setzen, um eine ausgewogene Ansicht zu erhalten.
• Inhalts-Einstellungen: 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 es deaktivieren, wenn es nicht benötigt wird.
• Erweitertes Styling: Sie können CSS-Klassen hinzufügen, um das Erscheinungsbild anzupassen.

So fügen Sie Ihrer Seite vorgestellte Produkte hinzu

Der Block für empfohlene Produkte ermöglicht es Ihnen, bestimmte Produkte auf Ihrer Seite oder in Ihrem Beitrag vorzustellen. Mit diesem Block können Sie Produkte auswählen, ihr Erscheinungsbild anpassen und sie in Ihren Inhalt einfügen, um Besucher für die Produkte zu gewinnen, die Sie bewerben möchten.

Um den Block für hervorgehobene Produkte hinzuzufügen, folgen Sie diesen Schritten:

1. Öffnen Sie die Seite oder den Beitrag, wo Sie es hinzufügen möchten. Wenn Sie es beispielsweise über dem Produktgrid platzieren, erstellen Sie in diesem Bereich Platz und klicken Sie auf die erscheinende "+"-Schaltfläche.

2. Wählen Sie die "+"-Schaltfläche in der Block-Symbolleiste, um die Blockliste zu öffnen, und suchen Sie dann nach "Hervorgehobenes Produkt" und wählen Sie 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 ein- oder ausblenden.
• Medienanzeige konfigurieren (Bild und Video).
• Fügen Sie alternativen Text für Produktbilder hinzu.
• Block-Überlagerungsfarbe auswählen.
• Block-Deckkraft anpassen.

5. Nach der Anpassung können Sie die Seite veröffentlichen oder aktualisieren, um Ihren vorgestellten Produktblock anzuzeigen.

Wie man Filterblöcke in WooCommerce hinzufügt

Der WooCommerce-Filterblock erleichtert Kunden das Finden von Produkten, die ihren Suchkriterien entsprechen. Durch die Bereitstellung von Filteroptionen können Kunden die Suchergebnisse schnell auf relevante Produkte eingrenzen.

Um den Filterblock hinzuzufügen, folgen Sie diesen Schritten:

1. Öffnen Sie die Seite oder den Beitrag, auf dem Sie den Filterblock platzieren möchten.
2. Bestimmen Sie den gewünschten Ort, an dem der Filterblock platziert werden soll.
3. Klicken Sie in der Symbolleiste des Blockeditors auf die "+"-Schaltfläche und suchen Sie nach WooCommerce-Filteroptionen wie Preis-Filter, Lager-Filter, Attribut-Filter und Bewertungs-Filter.

Nun lassen Sie uns jeden verfügbaren Filtertyp besprechen. 

Hinzufügen eines Preisfilters

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 regulärer Text angezeigt werden. Sie können Schaltflächen hinzufügen, wenn Sie möchten, und deren Überschriftenebene anpassen.

Filter nach Attribut hinzufügen

Der Produktattribut-Filterblock 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 auch den Abfragetyp auf UND oder ODER konfigurieren. Zu den weiteren Funktionen gehören 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 Produktfilterblock für den 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 Nachbestellungen anzeigen. Sie können es auch konfigurieren, um die Anzahl der Produkte anzuzeigen, die Überschriftenebene auszuwählen und Schaltflächen hinzuzufügen. Dieser Block kann mit anderen WooCommerce-Blöcken wie Alle Produkte verwendet werden. Leider bietet dieser Block keine Vorschau, wenn er der Seite hinzugefügt wird.

Warenkorb- und Checkout-Blöcke

Der Warenkorb-Block fügt Ihrer Seite eine Warenkorbanzeige hinzu. Sie können einen Versandkostenrechner einfügen, einen Link für die Schaltfläche "Zur Kasse" auswählen und eine dunkle Anzeigeeinstellung vornehmen. Dieser Block bietet auch eine Benachrichtigung, dass Sie die Seite als Standard-Warenkorbseite in den WooCommerce-Einstellungen festlegen können. Ein Link zur Bereitstellung von Feedback ist ebenfalls enthalten.

Inzwischen bietet der Checkout-Block ein Checkout-Formular für Ihren Warenkorb. Sie werden darauf hingewiesen, dass diese Seite als Standard-Checkout-Seite in den WooCommerce-Einstellungen festgelegt werden kann. Es gibt auch eine Option für die Darstellung im Dunkelmodus. Dieser Block besteht aus mehreren Elementen, die Sie individuell anpassen können. Leider bietet dieser Block keine Vorschau, sobald er der Seite hinzugefügt wurde.

Wie man die Shop-Seite in WooCommerce anpasst

Nachdem Sie gelernt haben, wie Sie verschiedene WooCommerce-Blöcke verwenden, können Sie mehrere kombinieren, um eine benutzerfreundliche benutzerdefinierte Shop-Seite zu erstellen. Um dieses spezielle Shop-Seitenlayout zu erstellen, folgen Sie diesen Schritten.

1. Erstellen Sie eine neue Seite und nennen Sie sie "Shop".

2. Fügen Sie den Produkt-Such-Block hinzu.

3. Fügen Sie den Block "Produktkategorienliste" hinzu

Dann stellen Sie den Anzeigestil auf das Dropdown-Menü ein.

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

6. Fügen Sie den Alle Produkte-Block hinzu.

Setzen Sie die Anzahl der Spalten und Zeilen auf 2 und deaktivieren Sie die Sortier-Dropdown-Option.

7. Schließlich veröffentlichen Sie die Seite, um das endgültige Layout der von Ihnen erstellten Shop-Seite zu sehen.

Bauen Sie Ihren Online-Shop mit WooCommerce Block und verkaufen Sie Ihre Produkte

Nachdem Sie erfolgreich eine benutzerdefinierte Shop-Seite mit WooCommerce-Blöcken erstellt haben, können Sie nun damit beginnen, Ihre physischen und digitalen Produkte zu verkaufen. Besonders für digitale Produkte ist es wichtig, ein Dateidownload-Plugin wie WP File Download Addon hinzuzufügen.

Mit diesem Plugin können Sie digitale Download-Produkte in WooCommerce verkaufen. WP File Download Addon erleichtert die Verwaltung von Dateien und Dateikategorien für WooCommerce-Digital-Produkte. Sie können schnell viele digitale Download-Produkte erstellen, die mit einer oder mehreren Dateien verknüpft sind.

Zusätzlich integriert dieses Plugin mit Dropbox, Google Drive, Microsoft OneDriveund der Social Locker -Funktion. Sie können Dateien von diesen Cloud-Diensten als WooCommerce-Digital-Downloads mit stark eingeschränktem Zugriff über Cloud-API-Konnektoren bereitstellen.

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

Schlussfolgerung

WooCommerce Blocks ist ein Plugin, mit dem Sie ohne Programmieren einen vollständigen Online-Shop in WordPress erstellen können. Mit verschiedenen Blöcken wie Produktgittern, Filtern und hervorgehobenen Produktdarstellungen können Sie leicht eine ansprechende und benutzerfreundliche Einkaufserfahrung 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 verwenden, um digitale Produkte mit WooCommerce zu verkaufen, wie z.B. E-Books, Software oder Multimedia-Inhalte.

WP File Download Das Addon ist ab 49 $ pro Jahr erhältlich und wurde von über 60.000 Mitgliedern verwendet. Worauf warten Sie also? Kommen Sie zu uns für bessere digitale Produktverkäufe!