Als ich das erste Mal einen WooCommerce-Shop einrichtete, war ich begeistert, mit dem Verkaufen zu beginnen, aber ich merkte schnell, dass die Standard-Shopseite sich schlicht anfühlte und überhaupt nicht zu meiner Marke passte. Sie zeigte nur ein einfaches Raster von Produkten, und ich hatte keine Ahnung, wie ich sie anpassen sollte, ohne einen Entwickler zu beauftragen.
Wenn Sie im selben Boot sitzen, machen Sie sich keine Sorgen. WooCommerce ist die beliebteste Art, eCommerce-Funktionen zu WordPress hinzuzufügen, und es gibt einfache Möglichkeiten, Ihre Shop-Seite hervorzuheben, ohne eine einzige Zeile Code zu schreiben.
In diesem Leitfaden zeige ich Ihnen Schritt für Schritt, wie das geht:
- Passen Sie das Layout Ihres WooCommerce-Shops visuell an
- Organisieren Sie Produkte nach Kategorie, Beliebtheit oder Tags
- Hinzufügen von Designelementen wie Erfahrungsberichten, Bannern und vorgestellten Produkten
- Verwenden Sie Tools wie SeedProd, um ein Schaufenster zu erstellen, das wie Ihres aussieht.
Dies sind genau die Methoden, die ich verwendet habe, um meine Standard-Shop-Seite in eine sauberere, ansprechendere Seite zu verwandeln, die viel besser dazu geeignet ist, Besucher in Käufer zu verwandeln.
Was ist die WooCommerce Shop-Seite?
Die WooCommerce-Shopseite ist die Standard-Produktarchivseite, auf der alle Produkte Ihres Shops angezeigt werden. Wenn Sie WooCommerce installieren, wird diese Seite automatisch mithilfe der Layout-Einstellungen Ihres Themes erstellt.
Betrachten Sie sie als den Hauptkatalog oder das Schaufenster Ihres Geschäfts. Hier stöbern die Kunden normalerweise, bevor sie sich zu bestimmten Produktseiten durchklicken.
Standardmäßig bezieht die Shop-Seite den Inhalt aus Ihren Produktlisten und zeigt ihn an:
- Produktbilder
- Überschriften und Kurzbeschreibungen
- Preise
- Produktkategorien und Tags
- Sterne-Bewertungen und Rezensionen (falls aktiviert)
Sie wird dynamisch aus Ihrem WordPress-Theme und den WooCommerce-Vorlagendateien generiert und kann an Ihre Marke angepasst werden, um die Konversionsrate zu erhöhen.
Eine gut gestaltete Shop-Seite kann Besuchern helfen, schnell zu finden, wonach sie suchen, die Reibung im Kaufprozess verringern und den Umsatz steigern. Deshalb ist die Anpassung des Standardlayouts der WooCommerce-Shopseite so wichtig.
Warum sollten Sie die WooCommerce Shop-Seite anpassen?
Stellen Sie sich vor, Sie betreten ein physisches Geschäft, in dem alle Produkte wahllos in den Regalen verstreut sind. Keine Schilder, keine Kategorien, keine besonderen Artikel. Sie würden wahrscheinlich schnell wieder gehen.
Das ist genau das, was viele Kunden erleben, wenn sie auf einer Standard-Shopseite von WooCommerce landen. Sie zeigt alle Ihre Produkte in einem einfachen Raster, mit wenig Kontext oder Orientierung. Das kann zu hohen Absprungraten und verpassten Verkaufschancen führen.
Die Anpassung Ihrer Shop-Seite hilft Ihnen dabei:
- Verbessern Sie die Benutzerfreundlichkeit (UX), indem Sie es den Kunden leichter machen, das Gewünschte zu finden.
- Steigern Sie die Konversionsrate, indem Sie Bestseller, Verkäufe oder Produkte mit hoher Gewinnspanne hervorheben.
- Verbesserung der Suchmaschinenoptimierung durch Hinzufügen von schlüsselwortreichen Inhalten und Schema-Markup
- Geringere Absprungraten durch eine bessere Navigation und visuelle Hierarchie
- Bauen Sie das Vertrauen in Ihre Marke durch Zeugnisse, Bewertungen oder nutzergenerierte Inhalte auf.
Ein gut optimiertes WooCommerce-Shop-Layout ist ein entscheidender Faktor, um Besucher in Käufer zu verwandeln.
Anpassen der WooCommerce Shop-Seite in WordPress
Es gibt mehrere Möglichkeiten, Ihre Shop-Seite in WordPress anzupassen. Sie können ein WooCommerce-Plugin, Seitenerstellungsprogramme verwenden oder die Anpassungen von Grund auf neu programmieren.
Da ich dieses Tutorial so einfach wie möglich halten möchte, werde ich mich auf 2 der einfachsten Möglichkeiten zur Anpassung von WooCommerce-Seiten konzentrieren.
Bei der ersten Methode wird ein leistungsstarkes WordPress-Plugin für den Website-Bau verwendet, das einfach zu bedienen ist und zahlreiche Anpassungsoptionen bietet. Dann zeige ich Ihnen, wie Sie den WooCommerce Customizer verwenden können, um das Layout Ihrer Shop-Seite zu ändern.
Methode 1: Verwenden Sie SeedProd zum Anpassen der WooCommerce Shop-Seite
Für die erste Methode werden wir SeedProd verwenden, um Anpassungen in Ihrem Online-Shop vorzunehmen.
SeedProd ist der beste Website-Builder für WordPress, mit über 1 Million Nutzern. Damit können Sie benutzerdefinierte WordPress-Themes, hoch konvertierende Landing Pages und responsive Website-Layouts ohne Code erstellen.
Mit diesem leistungsstarken Plugin können Sie dank der WooCommerce-Integration auch ganze Online-Shops erstellen. Infolgedessen können Sie Ihre WooCommerce-Shopseite, Produktseiten, Einkaufswagen, Kasse und mehr mit nur wenigen Klicks erstellen und anpassen.
SeedProd enthält über 150 professionelle Themen und Vorlagen zur Erstellung Ihrer Website. Von dort aus können Sie Ihr Design mit einfach zu verwendenden Inhaltsblöcken und Abschnitten anpassen.
Folgen Sie diesen Schritten, um Ihre WooCommerce-Shopseite mit SeedProd anzupassen.
Schritt 1. SeedProd Website Builder installieren
Der erste Schritt ist das Herunterladen einer Kopie des SeedProd Website Builder Plugins.
Hinweis: SeedProd bietet eine kostenlose Version zur Erstellung einfacher Landing Pages. 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 für die Installation 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 können Ihren Lizenzschlüssel finden, indem Sie sich auf der SeedProd-Website anmelden und ihn aus dem Bereich "Downloads" kopieren.
Geben Sie Ihren Lizenzschlüssel ein und klicken Sie auf die Schaltfläche Schlüssel überprüfen, bevor Sie zum nächsten Schritt übergehen.
Schritt 2. Erstellen Sie ein benutzerdefiniertes WooCommerce-Theme
Wir werden die Theme-Builder-Funktion von SeedProd verwenden, um Ihre WooCommerce-Shopseite anzupassen. Es wird Ihr bestehendes WordPress-Theme überschreiben und durch Ihre Anpassungen ersetzen.
Sie finden es, indem Sie in Ihrem WordPress-Dashboard zu SeedProd " Theme Builder gehen.
Es gibt 2 Möglichkeiten, Ihr eCommerce-Thema mit SeedProd zu erstellen:
- Erstellen Sie jeden Teil (Vorlage) Ihres Themas einzeln
- Erstellen Sie alle Ihre Themenvorlagen mit einer vorgefertigten WordPress-Themenvorlage
Wir werden die 2. Option für dieses Tutorial verwenden, da sie automatisch jeden Teil Ihrer WooCommerce-Website erstellt.
Klicken Sie auf die Schaltfläche " Themen" am oberen Bildschirmrand, um die Galerie der Themenvorlagen von SeedProd zu öffnen. Sie können aus vielen Themen wählen, darunter auch Designs für Online-Shops.
Für dieses Tutorial nehmen wir das Thema "Möbelhaus".
Um das Thema zu importieren, bewegen Sie den Mauszeiger über die Miniaturansicht und klicken Sie auf das Häkchensymbol.
Wie Sie im Screenshot unten sehen können, erstellt SeedProd alle Vorlagen für Ihr Thema automatisch, einschließlich:
- Kopfzeilen-Navigation
- Produktarchiv
- Produkt Seite
- Shop Seite
- Einzelne Seite
- Einzelner Posten
- Blog-Index, Archive, Suche
- Homepage
- Seitenleiste
- Fußzeile
Sie können jede Vorlage mit dem Drag-and-Drop-Builder von SeedProd anpassen. Wir zeigen Ihnen in Schritt 3, wie Sie die Vorlage für die Shop-Seite anpassen können.
Schritt 3. Anpassen der WooCommerce Shop-Seite
Um Ihre WooCommerce-Shopseite mit SeedProd anzupassen, bewegen Sie den Mauszeiger über die Vorlage "Shop-Seite" und klicken Sie auf den Link " Design bearbeiten".
Nachdem Sie auf den Link geklickt haben, wird Ihre Shop-Seitenvorlage im visuellen Drag-and-Drop-Seitenerstellungsprogramm von SeedProd geöffnet.
Auf der linken Seite finden Sie Blöcke und Abschnitte, die Sie Ihrer Seite hinzufügen können. Auf der rechten Seite sehen Sie eine Vorschau, wie Ihre Seite in Echtzeit aussieht.
Ihre Shop-Seite zeigt standardmäßig eine Liste aller Ihrer Produkte. Sie können dies jedoch leicht ändern, indem Sie neue Layouts, Inhaltsblöcke und Abschnitte hinzufügen.
Nehmen wir an, Sie möchten ein scrollendes Banner hinzufügen, das einen Verkauf oder eine Werbeaktion ankündigt. In diesem Fall können Sie den Bildkarussell-Block ziehen und benutzerdefinierte Bilder für das Banner hochladen.
Sie können dann Ihr Karussell in den Blockeinstellungen anpassen, indem Sie es auf ein dunkles oder helles Thema einstellen, den Schieberegler automatisch abspielen lassen und die Bildunterschriften anzeigen.
Was, wenn Sie Ihre vorgestellten oder meistverkauften Produkte hervorheben möchten? Fügen Sie dazu einen neuen Abschnitt zu Ihrer Seite hinzu, scrollen Sie dann nach unten zum WooCommerce-Blöcke-Panel 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 stärker hervorheben, indem Sie ihm eine eigene Hintergrundfarbe geben.
Im Block Erweiterte Einstellungen für meistverkaufte Produkte können Sie dann die Farbe, die Typografie und die Schaltflächen zum Hinzufügen zum Warenkorb ändern.
Mit dem WooCommerce-Block von SeedProd können Sie auch Produkte nach Kategorien anzeigen. Ziehen Sie dazu über den Block Product Grids, ändern Sie den "Abfragetyp" in Custom Query und klicken Sie auf die Option Select by Category.
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 Stärkung von Vertrauen und Glaubwürdigkeit
- Countdown-Timer zur Schaffung von Dringlichkeit für Ihren Verkauf
- Akkordeon zur Anzeige häufig gestellter Fragen
- Facebook- oder Twitter-Einbettungen zur Anzeige nutzergenerierter Inhalte
Sie können sogar den Titel Ihrer WooCommerce-Shopseite ganz einfach ä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.
Mit dem gleichen Verfahren können Sie nun auch die anderen Teile Ihres WooCommerce-Shops anpassen. Klicken Sie einfach auf "Design bearbeiten" in einer Ihrer Themenvorlagen und passen Sie das Layout und das Styling an Ihre Marke an.
Schritt 4. Veröffentlichen Sie Ihre Custom Shop-Seite
Wenn Ihre WooCommerce-Website so aussieht, wie Sie es wünschen, ist es an der Zeit, sie in Betrieb zu nehmen. Gehen Sie dazu zu SeedProd " Theme Builder, und schalten Sie in der oberen rechten Ecke den Schalter "SeedProd Theme aktivieren" auf "Ja".
Jetzt können Sie Ihre WooCommerce-Shopseite live auf Ihrer Website anzeigen.
Methode 2: Anpassen der WooCommerce Shop-Seite mit dem Theme Customizer
Wenn Sie es vorziehen, keinen Drittanbieter-Builder zu verwenden, bietet WooCommerce grundlegende Anpassungsoptionen über den WordPress Customizer.
Welche Anpassungsoptionen Sie sehen, hängt von dem WordPress-Theme ab, das Sie für Ihre Website verwenden. Wir verwenden für diesen Leitfaden das Standard-Theme Twenty Twenty-Two.
Um Ihre Shop-Seite mit dem Customizer anzupassen, klicken Sie in Ihrem WordPress-Dashboard auf Erscheinungsbild " Anpassen . Von dort aus klicken Sie auf WooCommerce " Produktkatalog, um die Anpassungsoptionen zu sehen.
Klicken Sie dann auf das Dropdown-Menü "Anzeige der Shop-Seite" und wählen Sie ein Layout aus.
Sie können zum Beispiel "Kategorien anzeigen" wählen, um nur Ihre Produktkategorien auf der Shop-Seite anzuzeigen.
Oder Sie können "Produkte anzeigen" wählen, um nur Produkte anzuzeigen.
Alternativ können Sie mit der Option "Kategorien und Produkte anzeigen" zuerst Ihre Produktkategorien und dann ein Produktgitter anzeigen.
Zusätzlich können Sie Produkte nach anzeigen:
- Popularität
- Durchschnittliche Bewertung
- Zuletzt
- Preis
Sie können auch wählen, wie viele Produkte pro Zeile und Zeile auf jeder Seite angezeigt werden sollen.
Denken Sie daran, Ihre Änderungen zu veröffentlichen, wenn Sie mit Ihrem Design zufrieden sind. Hier sehen Sie eine Vorschau auf eine Shop-Seite, die wir mit dem WooCommerce Customizer gestaltet haben.
FAQ: Anpassen der WooCommerce Shop-Seite
SeedProd - ein No-Code-Drag-and-Drop-Builder mit WooCommerce-Integration
WooCommerce Customizer - können Sie Layouts direkt in der WordPress Customizer
Elementor oder Divi (optional) - andere visuelle Seite Builder mit WooCommerce-Unterstützung
Ich hoffe, dieser Artikel hat Ihnen geholfen, zu lernen, wie Sie die WooCommerce Shop-Seite anpassen können.
Wie Sie sehen, ist es mit SeedProd ganz einfach, eine einzigartige und benutzerfreundliche WooCommerce-Website zu erstellen, ohne dass Sie Erfahrung mit Design oder Code haben müssen. Es ist so einfach wie Zeigen und Klicken, mit atemberaubenden Ergebnissen, die potenzielle Kunden lieben werden.
Sind Sie bereit, Ihren WooCommerce-Umsatz zu steigern?
Vielleicht gefällt Ihnen auch dieser Leitfaden zum Einrichten von WooCommerce Conversion Tracking, während Sie hier sind. Oder diese auf die besten WooCommerce Affiliate-Plugins.
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
