So passen Sie Ihren Online-Shop mit WooCommerce-Blöcken an

Der Gutenberg-Blockeditor macht WordPress für Website-Besitzer aller Erfahrungsstufen noch zugänglicher, sodass Sie komplizierte Seiten erstellen können, indem Sie Inhaltsblöcke ziehen und ablegen. Mit WooCommerce-Blöcken können Sie Produkte, Kategorien, Filter und mehr praktisch überall auf Ihrer Website auswählen und anzeigen – Sie müssen keine Shortcodes verwenden oder Codezeilen bearbeiten!

Werfen wir einen Blick auf die verfügbaren WooCommerce-Blöcke und lernen, wie man sie verwendet.

Bevor Sie beginnen, aktualisieren Sie WordPress und WooCommerce auf die neueste Version. Hinweis: Demos für diesen Beitrag wurden mit dem Storefront-Design erstellt, sollten aber mit jedem WooCommerce-freundlichen Design Ihrer Wahl funktionieren.

Lernen Sie WooCommerce Blocks kennen

Sie können WooCommerce-Blöcke überall dort platzieren, wo der Blockeditor aktiviert ist: Beiträge, Seiten und benutzerdefinierte Beitragstypen. Navigieren Sie zunächst zu der Seite oder dem Beitrag, den Sie bearbeiten möchten, und klicken Sie dann auf das Symbol „ Block hinzufügen“ (das einem „Plus“-Symbol ähnelt) in der oberen linken Ecke.

Dies öffnet ein Menü mit allen verfügbaren Blöcken. Erweitern Sie die Registerkarte WooCommerce , um Blöcke anzuzeigen, die für Ihren Online-Shop spezifisch sind.

Profi-Tipp: Mit der Tastenkombination „/“ können Sie auch schnell Blöcke zu Inhalten hinzufügen. Beispielsweise können Sie verfügbare WooCommerce-Blöcke anzeigen, indem Sie „/woocommerce“ eingeben.

Wenn Sie auf einen Block klicken, wird er Ihrer Seite hinzugefügt und eine Reihe von Optionen werden angezeigt, die sich je nach ausgewähltem Block ändern.

Produktblöcke

Mit Produktblöcken können Sie Produkte auf der Seite anzeigen und Inhalte veröffentlichen. Dies ist eine großartige Möglichkeit, in einem Blogbeitrag auf empfohlene Produkte zu verlinken, Ihre neuesten Produkte auf einer Zielseite anzuzeigen oder eine benutzerdefinierte Shop-Seite zu erstellen. Es gibt eine Vielzahl von Produktblöcken, die einen bestimmten Bedarf erfüllen und im Folgenden näher erläutert werden:

Ausgewählter Produktblock

Dies ist ein vollständig anpassbarer Block, der ein einzelnes Produkt hervorhebt. Sie können einen Produkttitel und -preis anzeigen und eine Schaltfläche hinzufügen, um zum Kauf anzuregen. Es gibt auch viele Einstellungen für das Overlay, darunter:

• Farbe überlagern
• Deckkraft des Hintergrunds
• Bildschwerpunkt
• Positionierung im Hintergrund

Fügen Sie einer Zielseite einen Featured Product Block hinzu, um die Aufmerksamkeit Ihrer Kunden zu erregen und als Call-to-Action zu dienen, oder integrieren Sie ihn als visuellen Produktlink direkt in einen Blogbeitrag. Die Möglichkeiten sind endlos!

Alle Produkte blockieren

Der Block Alle Produkte zeigt alle Ihre Produkte an. Dies ist praktisch, wenn Sie andere Inhalte – Text, Bilder, Videos usw. – über oder unter Produkten einfügen möchten, und ist eine großartige Möglichkeit, einen visuellen Katalog zu erstellen. Es enthält die folgenden Optionen:

• Layouteinstellungen:
  • Anzahl der Spalten und Zeilen – Passen Sie das Layout des Produktrasters an
  • Schaltflächen ausrichten – Legen Sie Schaltflächen so fest, dass sie direkt unter dem Inhalt liegen, oder richten Sie sie aus
• Inhaltseinstellungen:
  • Sortier-Dropdown anzeigen – Blenden Sie ein Dropdown-Menü mit Sortieroptionen ein oder aus
  • Produkte sortieren nach — Wählen Sie die Standardreihenfolge für Produkte basierend auf Preis, Bewertungen, Neuheit oder Verkauf
  • Bearbeiten Sie die für Produkte angezeigten Informationen – entfernen Sie Bewertungen, fügen Sie ein Verkaufsabzeichen hinzu, fügen Sie eine Beschreibung hinzu und vieles mehr

Blöcke filtern

Kombinieren Sie Filterblöcke mit dem Block Alle Produkte, damit Website-Besucher ihre Produktsuche eingrenzen können. Wenn Käufer einen Filter auswählen, werden die Produkte automatisch aktualisiert, um ihre Kriterien zu erfüllen, ohne die Seite neu zu laden. Es stehen drei Filterblöcke zur Verfügung:

• Filtern Sie nach Attributen wie Farbe oder Größe
• Filtern Sie nach Mindest- und Höchstpreis
• Aktive, ausgewählte Filter anzeigen

Das folgende Beispiel verwendet alle drei Blöcke:

Durch die Kombination dieser Blöcke können Sie in nur wenigen Minuten eine ansprechende, einfach zu navigierende Shop-Seite erstellen.

Handverlesener Produktblock

Der Block Handverlesene Produkte ermöglicht es Ihnen, die Produkte, die Sie anzeigen möchten, manuell auszuwählen. Wenn Sie einen Blog-Beitrag mit dem Titel „Geschenkideen zum Jahrestag“ schreiben, können Sie bestimmte Produkte, die am besten zu diesem Thema passen, direkt im Beitrag anzeigen.

Wählen Sie nach dem Hinzufügen des Blocks bestimmte Produkte aus einer Liste aus oder suchen Sie genau nach dem Produkt, nach dem Sie suchen.

Zu den Optionen für den Block „Handverlesene Produkte“ gehören:

• Anzahl der Spalten – wählen Sie bis zu sechs aus
• Schaltflächen ausrichten – Legen Sie Schaltflächen so fest, dass sie direkt unter dem Inhalt liegen, oder richten Sie sie aus
• Ein- oder ausblenden:
  • Produktname
  • Produktpreis
  • Produktbewertung
  • Schaltfläche zum Warenkorb hinzufügen

Produkte nach Kategorieblock

Mit diesem Block können Sie Produkte aus einer bestimmten Kategorie oder mehreren Kategorien anzeigen. Dies ist perfekt für gezielte Zielseiten oder Kategorieseiten, die zusätzlichen Inhalt erfordern. Zu den Einstellungen gehören:

• Produktkategorie — Wählen Sie die anzuzeigende(n) Kategorie(n) aus
• Anzahl der Spalten und Zeilen – Passen Sie das Layout des Produktrasters an
• Schaltflächen ausrichten – Ermöglicht Schaltflächen, Inhalten unmittelbar zu folgen oder sie vertikal auszurichten
• Ein- oder ausblenden:
  • Produktname
  • Produktpreis
  • Produktbewertung
  • Schaltfläche zum Warenkorb hinzufügen
• Sortieren nach:
  • Neuheit
  • Preis
  • Bewertung
  • Verkauf
  • Menübestellung

Das folgende Beispiel hat eine Zeile und fünf Spalten aus der Kategorie „Musik“:

Zusätzliche Produktblöcke

Es gibt einige zusätzliche Produktblöcke, die sehr ähnlich wie die oben genannten funktionieren:

• Produkte nach Tag – Zeigen Sie Produkte basierend auf Tags an
• Produkte nach Attributen – Zeigen Sie Produkte basierend auf Attributen an
• Am besten bewertete Produkte – Zeigen Sie Produkte mit den besten Bewertungen an
• Produkte im Angebot – Zeigen Sie reduzierte Produkte an
• Meistverkaufte Produkte – Zeigen Sie Ihre meistverkauften Produkte an

Überprüfungsblöcke

63 % der Kunden kaufen eher ein Produkt auf einer Website mit Bewertungen. Die Bewertungsblöcke können Ihnen dabei helfen, Kundenbewertungen auf Ihrer Website hervorzuheben, um soziale Beweise zu liefern und den Verkauf je nach Ihren Bedürfnissen zu fördern.

Alle Bewertungen blockieren

Dies ist der Block, den Sie benötigen, wenn Sie alle Ihre Produktbewertungen auf einmal anzeigen möchten. Sie können diesen Block verwenden, um Bewertungen auf der Homepage hervorzuheben, sie auf einer Zielseite zu präsentieren oder eine Seite speziell für Testimonials zu erstellen. Zu den Optionen gehören:

• Ein- oder ausblenden:
  • Produktname
  • Produktbewertung
  • Name des Rezensenten
  • Bild — Produktbild oder Gravatar des Rezensenten
  • Prüfungsdatum
  • Überprüfen Sie den Inhalt
• Sortieren nach – Geben Sie Benutzern die Möglichkeit, Bewertungen zu ordnen nach:
  • Neueste
  • Höchste Bewertung
  • Niedrigste Bewertung
• Startanzahl der Bewertungen — die Anzahl der anzuzeigenden Bewertungen
• Mehr laden – Bieten Sie die Option, weitere Bewertungen zu laden

Bewertungen nach Produkt- und Kategorieblöcken

Diese Blöcke bieten die gleichen Optionen wie der Block „Alle Rezensionen“, aber Sie können ein bestimmtes Produkt oder eine bestimmte Kategorie auswählen. Sie sind eine großartige Möglichkeit, Rezensionen in Blog-Posts oder Seiten zu integrieren. Werbung für die Veröffentlichung eines neuen Albums? Zeigen Sie die fünf besten Rezensionen für dieses bestimmte Album an. Schreiben Sie einen Blogbeitrag über eine bestimmte Produktkategorie? Alle Bewertungen für diese Kategorie anzeigen. Dies ist eine wirkungsvolle Möglichkeit, Website-Besucher anzusprechen und zu zeigen, dass Sie Ihren Produkten vertrauen können.

Produktsuchblock

Wenn potenzielle Kunden Ihre Website besuchen, sollten sie sofort finden, wonach sie suchen. Wenn sie ein bestimmtes Produkt kaufen möchten, ist das Letzte, was Sie wollen, dass sie Seite für Seite mit nicht verwandten Artikeln navigieren müssen.

Der Produktsuchblock bietet ein einfaches Suchformular speziell für Produkte. Fügen Sie es an einer sichtbaren Stelle auf Ihrer Website hinzu – oben oder in der Seitenleiste Ihrer Shop- und Kategorieseiten – und ermöglichen Sie Käufern, genau nach dem zu suchen, was sie wollen.

Machen Sie mit WooCommerce Blocks das Beste aus Ihrem Online-Shop

Bringen Sie Ihr Content-Marketing auf die nächste Stufe, indem Sie Produkte direkt in Zielseiten, Blog-Posts und andere Arten von Medien einfügen. Benutzer können ohne zusätzliche Navigation Einkäufe im Zusammenhang mit den Inhalten tätigen, an denen sie interessiert sind.

Der Block-Editor gibt Benutzern ein enormes Maß an Flexibilität und Kontrolle über das Layout und Design ihres Online-Shops. In Kombination mit unseren WooCommerce-Blöcken können Sie eine wirklich individuelle Storefront erstellen – indem Sie alles von Produkten und Kategorien bis hin zu Filtern und Bewertungen praktisch überall dort hinzufügen, wo Sie es brauchen!

Bleiben Sie über die neuesten Blöcke für WooCommerce auf dem Laufenden