So passen Sie die WooCommerce-Shop-Seite an (Code-frei)

Suchen Sie nach einer Möglichkeit, die WooCommerce-Shopseite anzupassen? In dieser Schritt-für-Schritt-Anleitung lernen Sie drei 100 % codefreie Methoden kennen, um die Shop-Seite Ihres Shops anzupassen.

Die Shop-Seite Ihres Shops, auch Katalogseite genannt, ist die Seite, die mehrere Produkte auflistet. Das können alle Ihre Produkte (auf der „Hauptseite“ des Shops) oder Produkte mit einer bestimmten Produktkategorie oder einem bestimmten Tag sein.

Technisch gesehen handelt es sich um das Archivdesign für den Beitragstyp „Produkte“ in einem WooCommerce-Shop.

Da Ihre Shop-Seite den Besuchern hilft, Ihre Produkte zu durchsuchen und zu entdecken, ist es wichtig, sie richtig zu machen. In diesem Beitrag erfahren Sie, wie!

Im Folgenden lernen Sie am Beispiel unseres Botiga-Themes drei verschiedene Möglichkeiten kennen, die WooCommerce-Shopseite ohne Code anzupassen:

• Eingebaute Optionen im nativen WordPress Theme Customizer
• Der native WordPress-Blockeditor
• Das Elementor Page Builder Plugin (mit dieser Methode können Sie die kostenlose Version von Elementor verwenden)

Hinweis – Wenn Sie Ihren WooCommerce-Shop noch nicht erstellt haben, können Sie zu unserer Anleitung zum Erstellen eines WooCommerce-Shops gehen. Sobald Sie einen funktionierenden Shop haben, kommen Sie hierher zurück, um mit der Anpassung der Shop-Seite zu beginnen!

Eine schnelle Einführung in das Anpassen der WooCommerce-Shop-Seite

Wenn Sie Ihre WooCommerce-Shop-Seite vollständig anpassen möchten, sollten Sie ein WooCommerce-Design auswählen, das Ihnen Flexibilität bietet.

Während die allgemeinen Prinzipien, die Sie in diesem Tutorial lernen, auf jedes WooCommerce-Thema angewendet werden können, werden wir das Botiga-Thema aus einigen Gründen verwenden:

• Es enthält detaillierte Optionen im WordPress Customizer, mit denen Sie die Shop-Seite anpassen können, ohne dass Sie alles von Grund auf neu entwerfen müssen.
• Wenn Sie alles von Grund auf neu entwerfen möchten , verfügt Botiga Pro über eine integrierte Funktion, mit der Sie alles mit dem nativen WordPress-Blockeditor oder der kostenlosen Version von Elementor anpassen können.

Abgesehen von seinen vielen Anpassungsoptionen ist Botiga auch eines der schnellsten WooCommerce-Themen, sodass Ihr Geschäft auch in anderen Bereichen erfolgreich sein wird.

Trotzdem finden Sie dieses Tutorial immer noch nützlich, wenn Sie ein anderes WooCommerce-Theme verwenden.

Beispielsweise bieten Ihnen die meisten WooCommerce-Designs zumindest einige Optionen im Customizer.

Ebenso funktioniert die allgemeine Elementor-Methode, die wir vorstellen, mit jedem Thema. Der einzige Unterschied besteht darin, dass Sie Elementor Pro kaufen müssen, wenn Sie Botiga nicht verwenden, während Sie mit Botiga alles mit der kostenlosen Version von Elementor erledigen können.

Wenn Sie mehr über Botiga erfahren möchten, können Sie auf die Botiga-Themenseite gehen.

Methode 1 – Anpassung der Shop-Seite mit dem WordPress Customizer

Für die meisten Menschen ist der einfachste Weg, die WooCommerce-Shopseite zu bearbeiten, die Verwendung der Optionen Ihres Themes im WordPress Customizer.

Mit Botiga erhalten Sie eine detaillierte Reihe von Optionen, mit denen Sie das Layout, den Stil und den Inhalt der Shop-Seite Ihres Geschäfts anpassen können.

Ein anderes Thema bietet möglicherweise nicht ganz so viele Optionen, aber Sie sollten in der Lage sein, zumindest einige im Customizer zu finden.

So verwenden Sie die Optionen des Botiga-Designs, um die WooCommerce-Shop-Seite anzupassen.

1. Wählen Sie aus, was auf Ihrer Shop-Seite angezeigt werden soll

Zu Beginn sollten Sie auswählen, welche Inhalte auf Ihrer Shop-Seite angezeigt werden sollen. Standardmäßig werden nur Produkte angezeigt, aber Botiga bietet Ihnen auch die Möglichkeit, Kategorien zu präsentieren.

Um auf diese Einstellungen zuzugreifen, öffnen Sie den WordPress Customizer, indem Sie in Ihrem WordPress-Dashboard zu Aussehen → Anpassen gehen.

Wählen Sie dann Allgemein unter WooCommerce aus:

Verwenden Sie nun das Dropdown- Menü Anzeige der Shop-Seite, um auszuwählen, ob nur Produkte, nur Kategorien oder beides angezeigt werden soll.

Sie können auch eine ähnliche Auswahl für Ihre Kategoriearchivseiten treffen, indem Sie das Dropdown- Menü „Kategorieanzeige“ verwenden. In diesem Fall entscheiden Sie, ob Unterkategorien angezeigt werden sollen.

2. Öffnen Sie die Shopseiten-Einstellungen im WordPress Customizer

Gehen Sie als Nächstes zurück zur Hauptmenüliste im Customizer und wählen Sie die Produktkatalogoptionen aus, um Ihre Shop-Seite vollständiger anzupassen.

Sie sehen nun eine Reihe von Optionen in der Seitenleiste, die in zwei Registerkarten unterteilt sind – Allgemein und Stil :

• Allgemein – Steuern Sie das Layout und den Inhalt von Elementen auf Ihrer Shop-Seite.
• Stil – Passen Sie das Design von Elementen auf Ihrer Shop-Seite an, z. B. das Ändern von Farben/Schriftarten oder das Hinzufügen von Rändern.

3. Passen Sie das allgemeine Layout an

Erweitern Sie zunächst die Layout- Einstellungen, um das allgemeine Layout Ihrer Shop-Seite anzupassen.

Zuerst sollten Sie den Layouttyp auswählen, der drei allgemeine Optionen bietet:

• Netz
• Aufführen
• Mauerwerk

Sie können auch allgemeine Layoutoptionen steuern, z. B. wie viele Zeilen und Spalten verwendet werden sollen.

Darunter können Sie auswählen, welchen Header-Stil Sie auf Ihrer Shop-Seite verwenden möchten und welche Inhalte in den Header aufgenommen werden sollen, z. B. ob Produktkategorien angezeigt werden sollen oder nicht.

Weiter unten im Customizer-Menü erhalten Sie Optionen zum Steuern des Seitenleisten-Layouts, der Seitenelemente und der Paginierung:

• Seitenleisten-Layout – Sie können eine vertikale oder horizontale Seitenleiste hinzufügen. Sie können dann den Inhalt der Seitenleiste mithilfe von Widgets steuern. Dies kann wirklich großartig sein, um Produktfilter hinzuzufügen, damit Besucher Ihre Produkte durchsuchen können.
• Seitenelemente – Sie können verschiedene Elemente auf der Seite ein-/ausblenden.
• Paginierung – Sie können normale Paginierung, endloses Scrollen oder eine Ajax-gestützte Schaltfläche „Mehr laden“ verwenden, die neue Produkte lädt, ohne die Seite neu zu laden.

4. Passen Sie die Produktkarte an

Als Nächstes können Sie den Abschnitt Produktkarte öffnen, um anzupassen , wie einzelne Produkte auf der Shop-Seite angezeigt werden.

Erstens können Sie verschiedene Kartenlayouts und Platzierungen der „In den Einkaufswagen“-Schaltflächen auswählen.

Im Screenshot unten können Sie beispielsweise sehen, dass wir die Schaltfläche „Zum Warenkorb hinzufügen“ so verschoben haben, dass sie über dem Produktbild in der unteren linken Ecke schwebt.

Weiter unten in den Einstellungen können Sie einige andere wichtige Entscheidungen treffen:

• Passen Sie das Verhalten der Produktschnellansicht an oder deaktivieren Sie es.
• Aktivieren/deaktivieren Sie bestimmte Inhaltselemente – zum Beispiel, ob die Bewertungszahlen auf der Shop-Seite angezeigt werden sollen oder nicht.
• Passen Sie Ausrichtung und Abstand an.

5. Passen Sie das Sale-Tag und die Kategorien an

Als Nächstes können Sie die Abschnitte „Sale-Tag“ und „Kategorien “ erweitern, um diese Bereiche Ihrer Shop-Seite zu konfigurieren.

Mit den Sale-Tag- Einstellungen können Sie die Platzierung und den Text des Sale-Badges steuern. Es gibt auch eine Option, um stattdessen den Verkaufsprozentsatz anzuzeigen, wodurch der richtige Rabatt für jedes Produkt dynamisch eingefügt wird.

Mit den Kategorieneinstellungen können Sie das Layout von Kategoriekarten steuern, wenn Sie sich in Schritt 1 dieser Anleitung für die Anzeige von Kategorien entschieden haben:

6. Passen Sie die Stiloptionen nach Bedarf an

Sobald Sie mit dem Layout und Inhalt Ihrer Shop-Seite zufrieden sind, können Sie zur Registerkarte Stil wechseln, um den Stil von allem nach Bedarf anzupassen.

Auch hier können Sie Farben ändern, Schriftarten anpassen, Rahmen hinzufügen und so weiter.

Hier müssen Sie nichts ändern. Aber wenn Sie ein paar Änderungen vornehmen möchten, ist dies eine gute Gegend zum Erkunden.

7. Entdecken Sie andere Customizer-Optionen

Neben dem dedizierten Produktkatalog-Bereich im Customizer bietet Botiga auch einige andere Optionen, die Ihre Shop-Seite beeinflussen können.

Sie können beispielsweise die Farbe der Schaltflächen „Zum Warenkorb hinzufügen“ und „Schnellansicht“ (sowie aller anderen Schaltflächen auf Ihrer Website) anpassen, indem Sie die Schaltflächeneinstellungen öffnen.

Wenn Sie ein bestimmtes Detail ändern möchten, lohnt es sich, diese anderen Optionen zu untersuchen. Aber wenn Ihnen das Aussehen Ihrer Shop-Seite bereits gefällt, brauchen Sie nicht weiter zu graben.

8. Veröffentlichen Sie Ihr Shop-Seitenlayout

Sobald Sie mit dem Aussehen Ihrer Shop-Seite zufrieden sind, müssen Sie nur noch auf die Schaltfläche Veröffentlichen klicken, um sie in Ihrem Shop live zu schalten.

Methode 2 – Anpassung der Shop-Seite mit dem WordPress Block Editor

Für die meisten Shops bieten die integrierten Customizer-Optionen von Botiga genügend Flexibilität, wenn es darum geht, eine benutzerdefinierte Shop-Seite in WooCommerce zu erstellen.

Es kann jedoch Situationen geben, in denen Sie ein wirklich individuelles Design von Grund auf neu erstellen möchten.

Um dies ohne Code zu erreichen, können Sie die Templates Builder- Funktion in Botiga Pro verwenden, um die Shop-Seite mit dem nativen WordPress-Blockeditor oder Elementor (sogar der kostenlosen Version) anzupassen.

In diesem Abschnitt zeigen wir Ihnen, wie es mit dem Blockeditor funktioniert. Dann zeigen wir Ihnen im nächsten Abschnitt, wie es mit Elementor funktioniert. Wenn Sie bereits wissen, dass Sie Elementor verwenden möchten, klicken Sie auf diesen Link, um zu diesem Abschnitt zu springen.

1. Aktivieren Sie das Botiga Pro Template Builder-Modul

Um den Vorlagenersteller zu aktivieren, gehen Sie zu Darstellung → Design-Dashboard → Design-Features .

Scrollen Sie dann nach unten und aktivieren Sie das Templates Builder- Modul.

Sie benötigen Botiga Pro, um dieses Modul zu aktivieren – wenn Sie es noch nicht haben, können Sie es kaufen, indem Sie hier klicken.

2. Erstellen Sie ein neues Shop-Seitenlayout

Gehen Sie als Nächstes zu Aussehen → Botiga-Vorlagen → Vorlage hinzufügen, um eine neue Vorlage für die Shop-Seite zu erstellen.

Vergeben Sie in der Template-Oberfläche einen Namen (z. B. „Shop-Seite“) und wählen Sie als Template-Typ Shop-Katalog .

3. Gestalten Sie Ihre Shop-Seite mit Blöcken

Jetzt können Sie mit dem Editor Ihr Shopseiten-Layout mit Blöcken gestalten.

Sie können jeden der vorhandenen WordPress-Blöcke (oder Blöcke aus anderen Plugins) verwenden.

Botiga fügt auch eine Reihe eigener WooCommerce-Blöcke für wichtige dynamische Inhalte hinzu, wie z. B. die Archivdetails des Shops und Produktdetails.

Um bestimmte Arten von Produkten tatsächlich aufzulisten, können Sie den Produktabfrageblock verwenden.

Wenn Sie den Produktabfrageblock hinzufügen, wird zunächst ein Raster Ihrer Produkte angezeigt.

Sie können dann die Einstellungen des Blocks verwenden, um verschiedene Produkttypen zu filtern, das Layout anzupassen, die Produktkarte anzupassen, Stile zu ändern und vieles mehr.

Schauen Sie sich für einen detaillierteren Blick auch dieses Video an:

4. Veröffentlichen Sie Ihre Vorlage

Wenn Sie mit dem Design Ihrer Shopseite zufrieden sind, brauchen Sie nur noch auf die Schaltfläche Veröffentlichen zu klicken.

Wenn Sie die Shop-Seite Ihres Shops im Frontend öffnen, sollten Sie Ihre benutzerdefinierte Shop-Seitenvorlage sehen.

Methode 3 – Anpassung der Shop-Seite mit dem Elementor-Plugin

Wenn Sie Elementor anstelle des Blockeditors bevorzugen, können Sie auch einen ähnlichen Ansatz verfolgen, um die WooCommerce-Shopseite anzupassen.

Normalerweise benötigen Sie Elementor Pro, um die Shop-Seite Ihres Shops anzupassen. Mit Botiga Pro können Sie Ihre Shop-Seite jedoch mit der kostenlosen Version von Elementor vollständig anpassen.

Sie können dies erreichen, weil Botiga Pro seine eigenen benutzerdefinierten Elementor-Widgets hinzufügt, mit denen Sie Ihre Shop-Seite einrichten können.

Abgesehen davon ist Botiga Pro immer noch vollständig kompatibel mit Elementor Pro. Wenn Sie also bereits eine Elementor Pro-Lizenz haben, können Sie trotzdem von all den zusätzlichen Designfunktionen profitieren, die sie hinzufügt.

So bearbeiten Sie die WooCommerce-Shopseite mit Elementor und Botiga.

1. Aktivieren Sie das Botiga Pro Template Builder-Modul

Um den Vorlagenersteller zu aktivieren, gehen Sie zu Darstellung → Design-Dashboard → Design-Features .

Scrollen Sie dann nach unten und aktivieren Sie das Templates Builder- Modul.

Sie benötigen Botiga Pro, um dieses Modul zu aktivieren – wenn Sie es noch nicht haben, können Sie es kaufen, indem Sie hier klicken.

2. Erstellen Sie ein neues Shop-Seitenlayout und starten Sie Elementor

Gehen Sie als Nächstes zu Aussehen → Botiga-Vorlagen → Vorlage hinzufügen, um eine neue Vorlage für die Shop-Seite zu erstellen.

In der Vorlagenoberfläche:

1. Geben Sie ihr einen internen Namen – zB „Shop Page“.
2. Wählen Sie als Vorlagentyp Shop-Katalog .
3. Klicken Sie auf die Schaltfläche Entwurf speichern , um ihn in der Datenbank zu speichern (dies ist hilfreich für die Verwendung von Elementor).

Sobald Sie dies getan haben, können Sie auf die Schaltfläche Mit Elementor bearbeiten klicken, um die Elementor-Oberfläche zu starten.

3. Verwenden Sie die Botiga-Widgets, um Ihr Shop-Seiten-Design zu erstellen

Jetzt können Sie die reguläre Elementor-Oberfläche verwenden, um Ihre Shop-Seite zu gestalten.

Um Ihnen bei der Einrichtung des Designs mit der kostenlosen Version von Elementor zu helfen, fügt Botiga eine Reihe eigener Widgets im Bereich Botiga WooCommerce hinzu.

Für die Shop-Seite ist das wichtigste Widget das Produktabfrage- Widget, mit dem Sie eine Liste einiger/aller Ihrer Produkte anzeigen können.

Es gibt auch andere nützliche Widgets, wie z. B. Archivtitel , Archivbeschreibung und andere mit Archiv gekennzeichnete Widgets.

In den Einstellungen des Produktabfrage- Widgets können Sie auswählen, welche Produkte angezeigt werden sollen, das Layout anpassen, die Produktkarte ändern und vieles mehr.

Sie können auch alle normalen Stil- und erweiterten Optionen nutzen, die Elementor bietet.

Neben der Verwendung der Botiga WooCommerce-Widgets zur Gestaltung Ihrer Shop-Seite können Sie auch alle anderen Elementor-Widgets verwenden, einschließlich Widgets von Elementor-Add-Ons von Drittanbietern.

4. Veröffentlichen Sie Ihre Shop-Seite

Wenn Sie mit dem Design Ihrer Shop-Seite zufrieden sind, klicken Sie in Elementor auf die Schaltfläche „Veröffentlichen“ , um sie live zu schalten.

Sobald Sie es veröffentlicht haben, können Sie Ihre Shop-Seite im Frontend öffnen, und Sie sollten das benutzerdefinierte Design sehen, das Sie mit Elementor erstellt haben.

Fazit: Erstellen Sie noch heute eine benutzerdefinierte WooCommerce-Shopseite

Damit ist unser Leitfaden zum Anpassen der WooCommerce-Shopseite ohne Code abgeschlossen.

Für die meisten Menschen bieten die integrierten Optionen von Botiga im Customizer bereits genügend Flexibilität, um eine benutzerdefinierte WooCommerce-Shopseite zu erstellen.

Wenn Sie noch mehr Kontrolle wünschen, können Sie mit der Template Builder-Funktion in Botiga Pro jeden Teil Ihrer Shop-Seite vollständig anpassen, indem Sie den nativen WordPress-Blockeditor oder Elementor (sogar die kostenlose Version) verwenden.

Wenn Sie Botiga noch nicht verwenden, sollten Sie noch heute zu Botiga wechseln, um auf all diese Anpassungsoptionen zugreifen zu können – und noch viel mehr!

Haben Sie noch Fragen zum Anpassen der WooCommerce-Shopseite? Lass es uns in den Kommentaren wissen.