Letzte SeedProd Nachrichten

WordPress-Tutorials, -Tipps und -Ressourcen für das Wachstum Ihres Unternehmens

Anpassen der Woocommerce-Shopseite

Wie Sie Ihre WooCommerce Shop-Seite leicht anpassen können 

Geschrieben von: Autorenbild Stacey Corrin
Autorenbild Stacey Corrin
Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.
     Bewertet von: Turner John
Kritikerbild Turner John
John Turner ist der Mitbegründer von SeedProd. Er verfügt über mehr als 20 Jahre Geschäfts- und Entwicklungserfahrung und seine Plugins wurden über 25 Millionen Mal heruntergeladen.

Suchen Sie nach einer einfachen Möglichkeit, Ihre WooCommerce-Shopseite anzupassen?

WooCommerce wird von über 29,35 % aller Online-Shops genutzt und ist damit eine beliebte eCommerce-Plattform für WordPress-Websitebesitzer. Allerdings ist es nicht ganz einfach, Ihren WooCommerce-Shop einzigartig zu machen, wenn Sie keine Entwicklungskenntnisse haben.

Klingt das nach Ihnen? Machen Sie sich keine Sorgen.

Dieser Artikel zeigt Ihnen, wie Sie Ihre WooCommerce-Shopseite anpassen können, ohne eine einzige Zeile Code zu schreiben.

Was ist die WooCommerce Shop-Seite?

Die WooCommerce-Shopseite ist eine Archivseite, auf der Ihre Produkte für potenzielle Kunden angezeigt werden. WooCommerce holt sich die Details über Ihre Produkte, einschließlich:

Diese Informationen werden dann in einem Raster oder einer Liste auf Ihrer Shop-Seite angezeigt.

Standard Woocommerce Shop Seite

Warum sollten Sie Ihre WooCommerce Shop-Seite anpassen?

Stellen Sie sich vor, Sie betreten ein Geschäft und sehen nur Reihen über Reihen von ungeordneten Waren. Wahrscheinlich würden Sie weggehen, weil es schwer ist, das zu finden, wonach Sie suchen.

Das Gleiche gilt für Online-Shops. Wenn Ihre Shop-Seite eine Wand von Produkten ohne Organisation zeigt, werden die Kunden abspringen und zur nächsten Website weitergehen.

Das ist das Problem mit dem Standardlayout der WooCommerce-Shopseite. Es zeigt nur eine einfache Liste von Produkten an, was es für Besucher schwierig macht, die gewünschten Waren zu finden.

Zum Glück gibt es Möglichkeiten, die WooCommerce-Shopseite zu bearbeiten, die Ihrem Shop die folgenden Vorteile bringen können:

  • Heben Sie sich von Ihren Mitbewerbern durch ein einzigartiges Design ab
  • Verbessern Sie das Kundenerlebnis, indem Sie die Produkte nach Kategorien organisieren
  • Steigern Sie den Umsatz durch die Anzeige von Sonderangeboten, Sonderangeboten und meistverkauften Produkten
  • Verbessern Sie Ihr SEO, indem Sie Inhalte hinzufügen, die auf häufig gesuchte Schlüsselwörter abzielen
  • Steigern Sie das Vertrauen, indem Sie Erfahrungsberichte, Sternebewertungen und nutzergenerierte Inhalte (UGC) anzeigen.

Der Schlüssel zur Gestaltung einer hochkonvertierenden WooCommerce-Shopseite ist ein benutzerfreundliches Design, das den Kauf Ihrer Produkte erleichtert.

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 wir dieses Tutorial so einfach wie möglich halten wollen, konzentrieren wir uns auf 2 der einfachsten Möglichkeiten zur Anpassung von WooCommerce-Seiten.

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 zeigen wir Ihnen, wie Sie den WooCommerce Customizer verwenden, um das Layout Ihrer Shop-Seite zu ändern.

Methode 1: Erstellen einer individuellen Shop-Seite mit SeedProd

Für die erste Methode werden wir SeedProd verwenden, um Anpassungen in Ihrem Online-Shop vorzunehmen.

Seedprod zum Anpassen der Woocommerce-Shopseite verwenden

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 für die 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.

Ihren Lizenzschlüssel eingeben

Sie können Ihren Lizenzschlüssel finden, indem Sie sich auf der SeedProd-Website anmelden und ihn aus dem Bereich "Downloads" kopieren.

Finden Sie Ihren SeedProd-Lizenzschlüssel

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.

SeedProd Themenerstellung

Es gibt 2 Möglichkeiten, Ihr eCommerce-Thema mit SeedProd zu erstellen:

  1. Erstellen Sie jeden Teil (Vorlage) Ihres Themas einzeln
  2. 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.

eine Themenvorlage hinzufügen

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.

Wählen Sie ein benutzerdefiniertes SeedProd-Woocommerce-Theme

Wie Sie im Screenshot unten sehen können, erstellt SeedProd alle Vorlagen für Ihr Thema automatisch, einschließlich:

SeedProd Thema Builder Vorlage Teile

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 ".

Design der WooCommerce-Shopseite 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.

WooCommerce Shop Seite Drag and Drop Builder

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.

SeedProd Bildkarussell-Block

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

Bildkarussell-Blockeinstellungen seedprod

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.

SeedProd-Raster der meistverkauften Produkte

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

WooCommerce-Raster der meistverkauften Produkte

Sie können diesen neuen Seitenabschnitt stärker hervorheben, indem Sie ihm eine eigene Hintergrundfarbe geben.

Benutzerdefinierte Hintergrundfarbe des Abschnitts

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.

Erweiterte Einstellungen des Produktrasters

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.

WooCommerce Produktkategorie Gitter

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.

Speichern Sie Ihre benutzerdefinierte Woocommerce-Shopseite

Auf die gleiche Weise können Sie nun auch die anderen Bereiche 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".

seedprod-Thema aktivieren

Jetzt können Sie Ihre WooCommerce-Shopseite live auf Ihrer Website anzeigen.

Anpassen der Woocommerce-Shopseite

Methode 2: Anpassen Ihrer Shop-Seite mit WooCommerce Customizer

Wenn Sie eine einfachere Möglichkeit benötigen, die WooCommerce-Shopseite anzupassen, können Sie dies mit dem integrierten WooCommerce-Customizer tun. Der Customizer verwendet den WordPress-Live-Theme-Customizer, um Ihre Shop-Seite in Echtzeit mit einer Live-Vorschau zu bearbeiten.

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.

Anpassen der Woocommerce-Shopseite mit dem Woocommerce Customizer

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.

Produkte und Kategorien auf der Woocommerce-Shopseite anzeigen

Zusätzlich können Sie Produkte nach anzeigen:

  • Popularität
  • Durchschnittliche Bewertung
  • Jüngste
  • Preis

Sie können auch wählen, wie viele Produkte pro Zeile und Zeile auf jeder Seite angezeigt werden sollen.

Wählen Sie, wie viele Produkte pro Zeile auf Ihrer WooCommerce-Shop-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.

wie man woocommerce Shop-Seite mit WordPress WooCommerce Customizer anpassen

Das war's!

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man die WooCommerce Shop-Seite anpasst.

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 hinterlassen Sie einen Kommentar mit Ihren Fragen und Ihrem Feedback.

Sie können uns auch auf YouTube, X (früher Twitter) und Facebook folgen, um weitere hilfreiche Inhalte für Ihr Unternehmen zu erhalten.

Autorenavatar
Stacey Corrin Autorin
Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.

Offenlegung: Unser Inhalt wird von den Lesern unterstützt. Das heißt, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Wir empfehlen nur Produkte, von denen wir glauben, dass sie einen Mehrwert für unsere Leser darstellen.