So passen Sie Ihre WooCommerce-Shopseite ganz einfach an 

Als ich meinen WooCommerce-Shop zum ersten Mal einrichtete, war ich begeistert, mit dem Verkaufen zu beginnen, aber ich stellte schnell fest, dass die Standard-Shopseite schlicht aussah und überhaupt nicht zu meiner Marke passte.

Wenn Sie sich in der gleichen Situation befinden, machen Sie sich keine Sorgen. WooCommerce ist die beliebteste Methode, um E-Commerce-Funktionalität zu WordPress hinzuzufügen, und es gibt einfache Möglichkeiten, das Layout Ihres WooCommerce-Shops hervorzuheben, ohne eine einzige Zeile Code zu schreiben.

Sie können Ihre WooCommerce-Shopseite mit einem Drag-and-Drop-Builder wie SeedProd (kein Code erforderlich) oder dem integrierten WordPress-Editor anpassen. Beide Methoden dauern weniger als 30 Minuten und erfordern keinen Entwickler.

Dies sind die genauen Methoden, die ich verwendet habe, um meine Standard-Shopseite in etwas Klareres, ansprechenderes und viel Besseres zur Umwandlung von Besuchern in Käufer zu verwandeln.

Was ist die WooCommerce-Shopseite?

Die WooCommerce-Shopseite ist die Standard-Produktarchivseite, die alle Produkte Ihres Shops anzeigt. Wenn Sie WooCommerce installieren, erstellt es automatisch diese Seite mit den Layout-Einstellungen Ihres Themes.

Betrachten Sie sie als den Hauptkatalog oder das Schaufenster Ihres Shops. Hier stöbern Kunden normalerweise, bevor sie zu einzelnen Produktseiten wechseln.

Standardmäßig zieht die Shopseite Inhalte aus Ihren Produktlisten und zeigt an:

• Produktbilder
• Titel und kurze Beschreibungen
• Preise
• Produktkategorien und -tags
• Sternebewertungen und Rezensionen (falls aktiviert)

Sie wird dynamisch mithilfe Ihres WordPress-Themes und der WooCommerce-Template-Dateien generiert und kann angepasst werden, um zu Ihrer Marke zu passen und die Konversionen zu verbessern.

Eine gut gestaltete Shopseite hilft Besuchern, schnell zu finden, wonach sie suchen, reduziert Reibungsverluste im Kaufprozess und steigert den Umsatz.

Das direkte Bearbeiten der WooCommerce-Shopseite im WordPress-Editor funktioniert nicht wie erwartet. Die Shopseite wird aus einer Template-Datei namens archive-product.php generiert, die WooCommerce verwendet, um Ihr Produktarchiv dynamisch mithilfe von PHP-Hooks und Shortcodes anzuzeigen.

Deshalb gibt Ihnen das Klicken auf „Seite bearbeiten“ auf der Shop-Seite keine Kontrolle über die WooCommerce-Shop-Seiten-Vorlage oder das Produkt-Raster. Um es anzupassen, benötigen Sie ein Plugin wie SeedProd, das die Vorlage durch Ihr eigenes Design ersetzt, oder die integrierten Optionen von WooCommerce Customizer oder Site Editor.

Warum sollten Sie die WooCommerce-Shop-Seite anpassen?

Stellen Sie sich vor, Sie betreten ein physisches Geschäft, in dem alle Produkte zufällig auf den Regalen verstreut sind. Keine Schilder, keine Kategorien, keine hervorgehobenen Artikel. Sie würden wahrscheinlich schnell wieder gehen.

Genau das erleben viele Käufer, wenn sie auf einer Standard-WooCommerce-Shop-Seite landen. Ein einfaches Produkt-Raster ohne Kontext oder Richtung führt zu hohen Absprungraten und verpassten Verkaufschancen.

Die Anpassung Ihrer Shop-Seite hilft Ihnen dabei:

• Verbessern Sie die Benutzererfahrung (UX), indem Sie es den Kunden erleichtern, das zu finden, was sie wollen
• Steigern Sie die Konversionen, indem Sie Bestseller, Sonderangebote oder Produkte mit hoher Marge hervorheben
• Verbessern Sie die SEO, indem Sie inhaltsreiche Schlüsselwörter und Schema-Markup hinzufügen
• Senken Sie die Absprungraten, indem Sie eine bessere Navigation und visuelle Hierarchie bieten
• Bauen Sie Markenvertrauen auf mit Testimonials, Bewertungen oder nutzergenerierten Inhalten

Ein gut optimiertes WooCommerce-Shop-Design ist ein entscheidender Teil der Umwandlung von Besuchern in Käufer. Wenn Sie Ihren Shop noch von Grund auf neu aufbauen, ist dieser Leitfaden zum Einrichten eines Online-Shops in WordPress ein guter Ausgangspunkt.

So passen Sie die WooCommerce-Shop-Seite in WordPress an

Es gibt mehrere Möglichkeiten, Ihre WooCommerce-Shop-Seite in WordPress anzupassen. Hier ist ein kurzer Überblick über Ihre Optionen, bevor wir ins Detail gehen.

Methode	Am besten für	Code erforderlich?
SeedProd	Volle Designkontrolle, benutzerdefinierte Layouts, Banner, hervorgehobene Bereiche, markenkonformer WooCommerce-Shop	Nein
WordPress-Editor (Site-Editor / Customizer)	Schnelle Layoutänderungen, Produkt-Sortierreihenfolge, Spalten, kein zusätzliches Plugin erforderlich	Nein
Benutzerdefinierter Code	Erweiterte Modifikationen, die über die Möglichkeiten der Tools hinausgehen	Ja (Entwickler empfohlen)

Methode 1: SeedProd zur Anpassung der WooCommerce-Shop-Seite verwenden

Wir verwenden SeedProd, um einen benutzerdefinierten WooCommerce-Shop für die erste Methode zu erstellen.

SeedProd ist der beste Drag-and-Drop-Website-Builder für WordPress mit über 1 Million Nutzern. Er ermöglicht es Ihnen, benutzerdefinierte WordPress-Themes, hochkonvertierende Landingpages und responsive Website-Layouts ohne Code zu erstellen.

In Leistungstests lud SeedProd mit 556 ms im Vergleich zu Elementors 1.882 ms, mit der Hälfte der HTTP-Anfragen. Das macht es zu einer starken Wahl für jeden benutzerdefinierten WooCommerce-Shop, bei dem die Seitengeschwindigkeit wichtig ist.

Dieses Plugin ermöglicht es Ihnen auch, komplette Online-Shops mit seiner WooCommerce-Integration zu erstellen. Sie können Ihre Shop-Seite, Produktseiten, den Warenkorb, die Kasse und mehr mit nur wenigen Klicks anpassen.

SeedProd bietet über 300 professionelle Themes und Vorlagen. Von dort aus können Sie das Design Ihres WooCommerce-Shops mit einfach zu bedienenden Inhaltsblöcken und Abschnitten anpassen.

Befolgen Sie diese Schritte, um Ihre WooCommerce-Shop-Seite mit SeedProd anzupassen.

Schritt 1. SeedProd Website Builder installieren

Der erste Schritt ist der Download einer Kopie des SeedProd Website Builder Plugins.

Hinweis: SeedProd bietet eine kostenlose Version zum Erstellen einfacher Landingpages. Wir werden jedoch den SeedProd Elite Plan für die WooCommerce-Funktionen verwenden, die wir benötigen.

Als Nächstes müssen Sie SeedProd auf Ihrer WordPress-Website installieren. Wenn Sie Hilfe benötigen, können Sie diese Anweisungen zum Installieren eines WordPress-Plugins befolgen.

Nachdem Sie SeedProd installiert und aktiviert haben, gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren Plugin-Lizenzschlüssel ein.

Sie finden Ihren Lizenzschlüssel, indem Sie sich auf der SeedProd-Website anmelden und ihn aus dem Abschnitt „Downloads“ kopieren.

Geben Sie Ihren Lizenzschlüssel ein und klicken Sie auf die Schaltfläche Schlüssel überprüfen, bevor Sie mit dem nächsten Schritt fortfahren.

Schritt 2. Erstellen eines benutzerdefinierten WooCommerce-Themes

Wir verwenden die Theme-Builder-Funktion von SeedProd, um Ihre WooCommerce-Shop-Seite anzupassen. Sie überschreibt Ihr vorhandenes WordPress-Theme und ersetzt es durch Ihre Anpassungen.

Sie finden es, indem Sie von Ihrem WordPress-Dashboard zu SeedProd » Theme Builder navigieren.

Es gibt 2 Möglichkeiten, Ihr E-Commerce-Theme mit SeedProd zu erstellen:

1. Erstellen Sie jeden Teil (Vorlage) Ihres Themes einzeln
2. Erstellen Sie alle Ihre Theme-Vorlagen mit einer vorgefertigten WordPress-Theme-Vorlage

Wir verwenden die 2. Option für dieses Tutorial, da sie automatisch jeden Teil Ihrer WooCommerce-Website erstellt.

Klicken Sie auf die Schaltfläche Themes oben auf Ihrem Bildschirm, um die Galerie der SeedProd-Theme-Vorlagen zu öffnen. Sie können aus vielen Themes wählen, einschließlich Designs für Online-Shops.

Für dieses Tutorial entscheiden wir uns für das Theme „Möbelgeschäft“.

Um das Theme zu importieren, fahren Sie mit der Maus über die Miniaturansicht und klicken Sie auf das Häkchen-Symbol.

Wie Sie in der folgenden Bildschirmansicht sehen können, erstellt SeedProd automatisch alle Vorlagen für Ihr Theme, einschließlich:

• Header-Navigation
• Produktarchive
• Produktseite
• Shop-Seite
• Einzelne Seite
• Einzelner Beitrag
• Blog-Index, Archive, Suche
• Startseite
• Seitenleiste
• Fußzeile

Sie können jede Vorlage mit dem Drag-and-Drop-Builder von SeedProd anpassen. Im 3. Schritt zeigen wir Ihnen, wie Sie die Shop-Seiten-Vorlage anpassen.

Schritt 3. WooCommerce-Shop-Seite anpassen

Um Ihre WooCommerce-Shop-Seite mit SeedProd anzupassen, fahren Sie mit der Maus über die Vorlage „Shop-Seite“ und klicken Sie auf den Link Design bearbeiten.

Nachdem Sie auf den Link geklickt haben, wird Ihre Shop-Seiten-Vorlage im visuellen Drag-and-Drop-Seitenersteller von SeedProd geöffnet.

Links befinden sich Blöcke und Abschnitte, die Sie Ihrer Seite hinzufügen können. Rechts sehen Sie eine Echtzeitvorschau, wie Ihre Seite aussieht.

Ihre Shop-Seite zeigt standardmäßig eine Liste aller Ihrer Produkte an. Sie können dies ändern, indem Sie neue Layouts, Inhaltsblöcke und Abschnitte hinzufügen.

Nehmen wir an, Sie möchten ein scrollendes Banner hinzufügen, das einen Sale oder eine Aktion anzeigt. In diesem Fall können Sie den Block Bilderkarussell herüberziehen und benutzerdefinierte Banner-Bilder hochladen.

Sie können dann Ihren Karussell in den Blockeinstellungen anpassen, indem Sie ihn auf ein dunkles oder helles Thema umstellen, den Schieberegler automatisch abspielen lassen und die Bildunterschriften anzeigen.

Was ist, wenn Sie Ihre empfohlenen Produkte oder meistverkauften Produkte hervorheben möchten? Fügen Sie dazu einen neuen Abschnitt zu Ihrer Seite hinzu, scrollen Sie dann zum Bedienfeld für WooCommerce-Blöcke und ziehen Sie den Block Meistverkaufte Produkte auf Ihre Seite.

Dieser Block zeigt Ihre meistverkauften Produkte in einem einheitlichen Raster an.

Sie können diesen neuen Seitenabschnitt hervorheben, indem Sie ihm eine benutzerdefinierte Hintergrundfarbe geben.

Dann können Sie in den erweiterten Einstellungen des Blocks „Meistverkaufte Produkte“ die Farbe, Typografie und die Schaltflächen In den Warenkorb legen ändern.

Sie können Produkte auch nach Kategorie mit den WooCommerce-Blöcken von SeedProd anzeigen. Ziehen Sie dazu den Block Produktgitter, ändern Sie den „Abfragetyp“ auf Benutzerdefinierte Abfrage und klicken Sie auf die Option Nach Kategorie auswählen.

Von dort aus können Sie auswählen, welche Kategorien in das Produktgitter aufgenommen werden sollen.

Einige andere Blöcke, die Sie zu Ihrer Shop-Seite hinzufügen können, sind:

• Testimonials zur Steigerung von Vertrauen und Glaubwürdigkeit
• Countdown-Timer, um Dringlichkeit für Ihren Verkauf zu schaffen
• Akkordeon zur Anzeige häufig gestellter Fragen
• Facebook- oder Twitter-Einbettungen zur Anzeige von nutzergenerierten Inhalten

Sie können sogar ganz einfach den Titel Ihrer WooCommerce-Shop-Seite ändern.

Wenn Sie mit Ihrer Shop-Seite zufrieden sind, klicken Sie auf die grüne Schaltfläche Speichern in der oberen rechten Ecke Ihres Bildschirms.

Sie können nun den gleichen Prozess befolgen, um die anderen Teile Ihres WooCommerce-Shops anzupassen. Klicken Sie auf „Design bearbeiten“ bei einer beliebigen Ihrer Theme-Vorlagen und passen Sie das Layout und Styling an Ihre Marke an.

Schritt 4. Veröffentlichen Sie Ihre benutzerdefinierte Shop-Seite

Wenn Ihre WooCommerce-Website so aussieht, wie Sie es möchten, ist es an der Zeit, sie live zu schalten. Gehen Sie dazu zu SeedProd » Theme Builder und schalten Sie in der oberen rechten Ecke den Umschalter „SeedProd Theme aktivieren“ auf die Position „Ja“.

Jetzt können Sie Ihre WooCommerce-Shop-Seite live auf Ihrer Website in der Vorschau anzeigen.

Methode 2: WooCommerce-Shop-Seite mit dem WordPress-Editor anpassen

Wenn Sie keinen Drittanbieter-Builder verwenden möchten, bieten WordPress und WooCommerce integrierte Tools zur Anpassung Ihres Shop-Layouts. Welche Option Sie verwenden, hängt von Ihrem aktiven E-Commerce-Theme ab.

Verwendung des Site-Editors (Block-Themes)

Wenn Ihre Website ein Block-Theme verwendet (wie Twenty Twenty-Four oder Twenty Twenty-Five), können Sie die WooCommerce-Shop-Seiten-Vorlage direkt im Website-Editor bearbeiten.

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Editor. Öffnen Sie die Liste Vorlagen und suchen Sie die Vorlage Produktkatalog (manche Themes nennen sie Shop). Klicken Sie darauf, um den Vorlagen-Editor zu öffnen.

Von dort aus können Sie Blöcke hinzufügen, entfernen oder neu anordnen, um Ihr WooCommerce-Shop-Layout zu ändern. Wenn Sie fertig sind, klicken Sie auf Speichern.

Verwendung des klassischen Customizers (klassische Themes)

Wenn Ihre Website ein klassisches Theme verwendet, fügt WooCommerce die Anzeigeoptionen direkt zum WordPress Customizer hinzu.

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Anpassen. Klicken Sie dann auf WooCommerce » Produktkatalog, um die Anpassungsoptionen anzuzeigen.

Klicken Sie auf das Dropdown-Menü „Shop-Seitenanzeige“ und wählen Sie ein Layout aus.

Wählen Sie zum Beispiel „Kategorien anzeigen“, um nur Ihre Produktkategorien auf der Shop-Seite anzuzeigen.

Oder wählen Sie „Produkte anzeigen“, um nur Produkte anzuzeigen.

Sie können auch zuerst Ihre Produktkategorien und dann ein Raster von Produkten mit der Option „Kategorien und Produkte anzeigen“ anzeigen.

Zusätzlich können Sie Produkte anzeigen nach:

• Beliebtheit
• Durchschnittliche Bewertung
• Die neuesten
• Preis

Sie können auch festlegen, wie viele Produkte pro Zeile und Zeilen auf jeder Seite angezeigt werden sollen.

Hier ist eine Vorschau einer Shop-Seite, die mit dem WooCommerce Customizer gestaltet wurde.

FAQ: Anpassung der WooCommerce-Shop-Seite

Warum kann ich meine WooCommerce-Shop-Seite nicht direkt in WordPress bearbeiten?

Die WooCommerce-Shop-Seite wird aus einer Vorlagendatei namens archive-product.php generiert und nicht als regulärer Seiteninhalt gespeichert. Wenn Sie auf „Seite bearbeiten“ klicken, erhalten Sie Zugriff auf das Seitenobjekt, aber das Produktgitter und das Layout stammen aus dem PHP-Vorlagensystem von WooCommerce, nicht aus dem Block-Editor. Um das Design zu ändern, benötigen Sie ein Tool, das die Vorlage überschreibt, wie SeedProd, oder die integrierten Optionen des Customizers und Site Editors.

Wie ändere ich, welche Produkte auf der WooCommerce-Shop-Seite angezeigt werden?

Sie können die Sichtbarkeit von Produkten in den einzelnen Produkteinstellungen in WordPress steuern. Setzen Sie ein Produkt auf „Hervorgehoben“, um es hervorzuheben, passen Sie seinen Veröffentlichungsstatus an, um es anzuzeigen oder auszublenden, oder verwenden Sie Produktkategorien und -tags, um zu organisieren, was angezeigt wird. Der WooCommerce Customizer ermöglicht es Ihnen auch, die Standard-Sortierreihenfolge (Beliebtheit, durchschnittliche Bewertung, neueste, Preis) unter Darstellung » Anpassen » WooCommerce » Produktkatalog zu ändern.

Wie heißt die Vorlagendatei der WooCommerce-Shop-Seite?

Die WooCommerce-Shop-Seite verwendet die Vorlagendatei archive-product.php. Sie finden sie im WooCommerce-Plugin-Ordner unter woocommerce/templates/. Um sie mit Code anzupassen, kopieren Sie sie in den woocommerce/-Ordner Ihres Themes und ändern Sie sie dort. Dies verhindert, dass Ihre Änderungen bei Plugin-Updates überschrieben werden.

Wie füge ich ein Banner oder einen hervorgehobenen Bereich zu meiner WooCommerce-Shop-Seite hinzu?

Der einfachste Weg ist die Verwendung des Drag-and-Drop-Builders von SeedProd. Öffnen Sie Ihre Shop-Seiten-Vorlage in SeedProd und ziehen Sie dann einen Bildkarussell-Block über das Produktgitter, um ein scrollendes Banner zu erstellen. Für einen Bereich mit hervorgehobenen Produkten fügen Sie einen neuen Bereich hinzu und platzieren Sie den Block „Bestseller-Produkte“ oder „Hervorgehobene Produkte“. Sie können jeden Bereich unabhängig mit benutzerdefinierten Hintergründen, Farben und Typografie gestalten.

Was ist der Unterschied zwischen der WooCommerce-Shop-Seite und den Produktseiten?

Die Shop-Seite (auch Produktarchiv genannt) ist eine Auflistungsseite, die alle Ihre Produkte in einem Raster anzeigt. Produktseiten sind einzelne Seiten für jeden Artikel, die detaillierte Beschreibungen, Bilder, Preise und die Schaltfläche „In den Warenkorb“ anzeigen. Kunden landen normalerweise zuerst auf der Shop-Seite, stöbern und klicken dann zu einzelnen Produktseiten. Beide können mit SeedProd angepasst werden.

Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihre WooCommerce-Shopseite anpassen können.

SeedProd gibt Ihnen die volle Kontrolle über Ihr WooCommerce-Shop-Layout, ohne eine Zeile Code anfassen zu müssen. Der Drag-and-Drop-Builder macht es einfach, selbst wenn Sie noch nie einen WooCommerce-Shop angepasst haben.

Bereit, Ihre WooCommerce-Verkäufe zu steigern?

Vielleicht gefällt Ihnen auch dieser Leitfaden zur Einrichtung des WooCommerce-Conversion-Trackings während Sie hier sind. Oder dieser über die besten WooCommerce-Affiliate-Plugins.

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.