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

When I first set up a WooCommerce store, I was excited to start selling, but I quickly realized the default shop page felt plain and didn’t match my brand at all. It just showed a basic grid of products, and I had no idea how to customize it without hiring a developer.

If you’re in the same boat, don’t worry. WooCommerce is the most popular way to add eCommerce functionality to WordPress, and there are easy ways to make your shop page stand out without writing a single line of code.

In this guide, I’ll show you step-by-step how to:

• Customize your WooCommerce shop layout visually
• Organize products by category, popularity, or tags
• Add design elements like testimonials, banners, and featured products
• Use tools like SeedProd to build a storefront that feels like yours

These are the exact methods I used to turn my default shop page into something cleaner, more engaging, and much better at converting visitors into buyers.

Was ist die WooCommerce Shop-Seite?

The WooCommerce shop page is the default product archive page that displays all of your store’s products. When you install WooCommerce, it automatically creates this page using your theme’s layout settings.

Think of it as your store’s main catalog or storefront. It’s where customers typically browse before clicking through to specific product pages.

By default, the shop page pulls content from your product listings and displays:

• Produktbilder
• Titles and short descriptions
• Preise
• Product categories and tags
• Star ratings and reviews (if enabled)

It’s generated dynamically using your WordPress theme and the WooCommerce template files, and it can be customized to match your brand and improve conversions.

A well-designed shop page can help visitors quickly find what they’re looking for, reduce friction in the buying process, and increase sales. That’s why customizing the default WooCommerce shop page layout is so important.

Why Should You Customize the WooCommerce Shop Page?

Imagine walking into a physical store where all the products are randomly scattered on shelves. No signs, no categories, no featured items. You’d probably walk out fast.

That’s exactly what many shoppers experience when they land on a default WooCommerce shop page. It shows all your products in a plain grid, with little context or direction. This can lead to high bounce rates and missed sales opportunities.

Customizing your shop page helps you:

• Improve user experience (UX) by making it easier for customers to find what they want
• Increase conversions by highlighting bestsellers, sales, or high-margin products
• Improve SEO by adding keyword-rich content and schema markup
• Lower bounce rates by offering better navigation and visual hierarchy
• Build brand trust with testimonials, reviews, or user-generated content

A well-optimized WooCommerce shop layout is a critical part of turning visitors into buyers.

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.

Because Iwant to keep this tutorial as simple as possible, I’ll focus on 2 of the easiest ways to customize WooCommerce pages.

The first method will use a powerful WordPress website builder plugin that’s easy to use and packed with customization options. Then I’ll show you how to use the WooCommerce customizer to change the layout of your shop page.

Method 1: Use SeedProd to Customize WooCommerce Shop Page

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.

This powerful plugin also allows you to create entire online stores with its WooCommerce integration. As a result, you can make and customize your WooCommerce shop page, product pages, shopping cart, checkout, and more with just a few clicks.

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.

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:

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.

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

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.

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

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

Method 2: Customize WooCommerce Shop Page Using Theme Customizer

If you prefer not to use a third-party builder, WooCommerce includes basic customization options via the 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
• Jüngste
• 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: Customizing the WooCommerce Shop Page

I hope this article helped you learn how to customize the WooCommerce Shop page.

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.