So erstellen Sie eine schöne WooCommerce-Shop-Seite (in 5 Schritten)

Suchen Sie nach der einfachsten Möglichkeit, die WooCommerce-Shopseite anzupassen?

WordPress bietet eine große Auswahl an Blöcken, mit denen Sie professionelle Websites erstellen können. Wenn Sie WooCommerce verwenden, erhalten Sie auch Zugriff auf dedizierte WooCommerce-Blöcke, die Sie für Ihren Online-Shop verwenden können.

Daher fragen Sie sich vielleicht, wie Sie diese Elemente verwenden können, um eine WooCommerce-Shopseite zu erstellen, die Conversions fördert.

Glücklicherweise ist der Prozess sehr einfach. Mit diesen Blöcken können Sie mit WooCommerce Ihre Produkte auf unterschiedliche Weise anzeigen. Zusätzlich können Sie Filter und Suchfunktionen hinzufügen, um Benutzern das Durchsuchen Ihres Shops zu erleichtern.

In diesem Artikel zeigen wir Ihnen, wie Sie mithilfe von Blöcken eine schöne WooCommerce-Shopseite erstellen . Sie können unseren Richtlinien folgen und je nach Bedarf auswählen, welche Blöcke Sie verwenden möchten. Lass uns anfangen!

Inhaltsverzeichnis:

1. Platzieren Sie den Block Alle Produkte
2. Fügen Sie die Blöcke „Empfohlene Produkte“ und/oder „Handverlesene Produkte“ hinzu
3. Produktsuche auf der Shopseite aktivieren
4. Verwenden Sie die Blöcke der empfohlenen Kategorie
5. Fügen Sie eine Option hinzu, um Produkte nach Preis zu filtern

So passen Sie die WooCommerce-Shopseite mit Blöcken an

Öffnen Sie zunächst den Editor für die Shop-Seite Ihres Shops. Befolgen Sie dann diese Anweisungen, um den Inhalt anzupassen.

1. Platzieren Sie den Block Alle Produkte

Shopseiten gibt es in allen Formen und Größen. In einem Online-Shop zeigt diese Seite normalerweise alle Produkte an, die Sie zum Verkauf anbieten. Benutzer können einzelne Artikel anklicken, um ihre jeweiligen Produktseiten zu öffnen oder sie direkt in ihren Warenkorb zu legen (sofern der Shop dies zulässt):

Mit WordPress und WooCommerce haben Sie die volle Kontrolle darüber, welche Elemente in Ihre Shop-Seite aufgenommen werden sollen. Das Erscheinungsbild dieser Seite hängt von dem von Ihnen verwendeten Design und der Art und Weise ab, wie Sie es konfigurieren.

WooCommerce richtet automatisch eine Shop-Seite ein, wenn Sie mit der Verwendung des Plugins beginnen, sodass Sie weitermachen und überprüfen können, wie Ihre aussieht. Wenn Sie bereit sind, es zu bearbeiten, gehen Sie zu Pages und suchen Sie die Shop- Option.

Öffnen Sie diese Seite im Blockeditor, und Sie sollten so etwas sehen:

Standardmäßig enthält die Shop -Seite den Block Alle Produkte und eine Kopfzeile. Wenn Sie diesen Block nicht sehen, können Sie ihn der Seite hinzufügen, indem Sie auf das Pluszeichen (+) klicken und ihn aus der Liste der Optionen auswählen:

Der Block Alle Produkte zeigt ein Raster, das alle Produkte deines Shops enthält, geordnet von neu nach alt. Um die Anzeigereihenfolge für Ihre Produkte zu ändern, klicken Sie auf den Block und gehen Sie zum Einstellungsfeld auf der rechten Seite. Navigieren Sie dann zum Abschnitt Inhaltseinstellungen und wählen Sie Ihre Präferenz aus dem Menü Produkte bestellen nach:

In der Zwischenzeit können Sie unter Layouteinstellungen die Anzahl der Spalten und Zeilen auswählen, die Sie im Produktraster anzeigen möchten. Fühlen Sie sich frei, die anderen Optionen zu erkunden, die mit diesem Block verfügbar sind.

2. Fügen Sie die Blöcke „Empfohlene Produkte“ und/oder „Handverlesene Produkte“ hinzu

Viele Shop-Seiten heben bestimmte Produkte hervor. Dies sind in der Regel Artikel, auf die Ladenbesitzer aufmerksam machen möchten, z. B. neue oder reduzierte Lagerbestände oder kürzlich hinzugefügte Produkte. WooCommerce wird mit einem Featured Product -Block geliefert, mit dem Sie jeden Artikel in Ihrem Geschäft präsentieren können.

Sobald Sie diesen Block auf Ihrer Seite platziert haben, müssen Sie das Produkt auswählen, das Sie vorstellen möchten, und auf Fertig klicken:

Dann zeigt WooCommerce das Bild, den Namen, den Preis, die Beschreibung und einen Call-to-Action (CTA) des Produkts an. Der Block sollte in etwa so aussehen:

Sie können diesen Block dann nach Ihren Wünschen anpassen. Sie können beispielsweise das Bild ändern und die CTA-Schaltfläche ändern.

Der Nachteil des Hinzufügens des Featured Product -Blocks zu Ihrer WooCommerce-Shopseite besteht darin, dass er Benutzer von den restlichen Produkten ablenken kann. Um dem entgegenzuwirken, empfehlen wir die Verwendung von Spalten, um mehrere vorgestellte Produkte nebeneinander anzuzeigen:

Eine Alternative zum Block " Empfohlene Produkte " ist die Option " Handverlesene Produkte ". Mit diesem Block können Sie mehrere Produkte auswählen und nebeneinander anzeigen. Es verwendet denselben Stil wie der Block Alle Produkte :

Sowohl die Blöcke „Empfohlene Produkte“ als auch „Handverlesene Produkte“ erfüllen ähnliche Zwecke. Idealerweise wählen Sie eine der beiden Optionen, um die Besucher nicht mit zu vielen vorgestellten Artikeln zu überfordern. Wir empfehlen außerdem, diese Blöcke oben auf der Seite zu platzieren, damit Benutzer sie nicht übersehen können.

3. Produktsuche auf der Shopseite aktivieren

Wenn Sie einen Shop mit einem großen Produktkatalog haben, müssen Sie eine Suchfunktion anbieten. Auf diese Weise können Benutzer nach bestimmten Artikeln suchen, die sie im Auge haben, ohne den gesamten Shop durchsuchen zu müssen.

Wenn Sie Ihrer Shop-Seite einen Suchblock hinzufügen, sollten Sie nach der Option Produktsuche suchen , nicht nach dem standardmäßigen WordPress-Suchblock. Die Produktsuche beschränkt die Ergebnisse auf WooCommerce-Produkte, während der andere Suchblock alle anderen Seiten Ihrer Website umfasst.

So sieht die Suchfunktion von WooCommerce aus:

Denken Sie daran, dass der Produktsuchblock nicht im Editor funktioniert, also müssen Sie ihn am Frontend testen. Außerdem bietet der Block keine automatische Vervollständigungsfunktion, sodass Benutzer eine vollständige Abfrage eingeben und eine neue Seite laden müssen, um die Ergebnisse anzuzeigen.

4. Verwenden Sie die Featured Category-Blöcke

Abgesehen davon, dass Sie Benutzer auf handverlesene Produkte hinweisen, möchten Sie vielleicht auch bestimmte Produktkategorien hervorheben. Dies kann besonders nützlich sein, wenn Sie mehrere Arten von Produkten verkaufen, da es den Benutzern ermöglicht, nach Artikeln in einer bestimmten Abteilung zu suchen.

Beginnen Sie, indem Sie den Block „ Empfohlene Kategorie “ zu Ihrer WooCommerce-Shopseite hinzufügen. Wählen Sie dann die Produktkategorie aus, die Sie hervorheben möchten, und klicken Sie auf Fertig :

So sieht der Featured Category -Block aus:

Mit dem Block können Sie die Farbe des Hintergrunds und des Textes ändern, aber er bietet nicht viele zusätzliche Anpassungsoptionen. Da der Block viel Platz einnimmt, empfehlen wir außerdem, mehrere vorgestellte Kategorien mithilfe von Spalten nebeneinander zu platzieren:

Da der Featured Product Category -Block sehr einfach ist, empfehlen wir Ihnen, sich Plugins wie Otter Blocks für weitere Anpassungen anzusehen.

Mit Otter Blocks können Sie WooCommerce-Blöcke ändern, indem Sie Animationen und andere Sichtbarkeitseinstellungen hinzufügen:

Darüber hinaus fügt Otter Blocks eine Vielzahl neuer Blöcke hinzu, die Sie in Ihrem Online-Shop verwenden können. Dazu gehören Optionen wie Pop-ups (die sich perfekt zum Sammeln von E-Mail-Anmeldungen eignen) und Produktbewertungen.

5. Fügen Sie eine Option hinzu, um Produkte nach Preis zu filtern

Bisher verfügt Ihr Geschäft über eine Suchleiste, handverlesene Produkte, vorgestellte Kategorien und Ihren gesamten Produktkatalog. Alles, was Sie vermissen, ist eine Möglichkeit für Benutzer, Produkte zu filtern.

Der Block Produkte nach Preis filtern ermöglicht Kunden genau das. Der Block zeigt einen Schieberegler an, mit dem Kunden die Mindest- und Höchstpreise für die Produkte festlegen können, die sie sehen möchten:

Die Preiswerte können nicht bearbeitet werden – sie hängen von den Preisen Ihrer Produkte ab. Besucher können entweder die gewünschten Werte eingeben oder den Schieberegler verwenden, um sie zu ändern.

Wenn Sie Änderungen am Preisschieberegler vornehmen, wird der Block Alle Produkte aktualisiert, um die Produkte anzuzeigen, die die Kriterien erfüllen. Dies geschieht, ohne dass Benutzer die Seite neu laden müssen.

In Bezug auf die Platzierung empfehlen wir Ihnen, den Block Produkte nach Preis filtern über Ihrem Produktkatalog hinzuzufügen. Auf diese Weise sehen Benutzer es, wenn sie die Seite nach unten scrollen.

Sie können Benutzern auch ermöglichen, Produkte nach Größe, Farbe und anderen Merkmalen zu filtern. Mit dem Block Produkte nach Attribut filtern können Sie Produkte durchsuchen, die ein ausgewähltes Attribut erfüllen, basierend auf den in Ihrem Geschäft verfügbaren Optionen.

Und das ist so ziemlich alles! Wenn Sie fertig sind, speichern Sie Ihre Änderungen und Ihre neue Shop-Seite wird sofort funktionieren.

Richten Sie noch heute Ihre WooCommerce-Shopseite ein

Ihr ultimatives Ziel ist es, eine Seite zu erstellen, die Conversions maximiert, indem sie Benutzern alle Optionen bietet, die sie suchen, in einem Layout und einer sinnvollen Reihenfolge.

Sobald Sie Ihre WooCommerce-Shopseite eingerichtet haben, können Sie Ihre Aufmerksamkeit auf Ihre einzelnen Produktseiten richten. Lesen Sie dazu unbedingt unseren Leitfaden zur Optimierung der WooCommerce-Produktseite.

Haben Sie Fragen zur Erstellung einer WooCommerce-Shopseite mit Blöcken? Lassen Sie es uns im Kommentarbereich unten wissen!