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: Autorenavatar Stacey Corrin
Autorenavatar 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: Gutachter-Avatar Turner John
Gutachter-Avatar 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.

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.

Standard Woocommerce Shop Seite

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 Drag-and-drop WordPress website builder

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.

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

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.

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

FAQ: Customizing the WooCommerce Shop Page

Can I customize the WooCommerce shop page without coding?
Yes. You can customize the WooCommerce shop page without writing code using tools like SeedProd (a drag-and-drop builder) or the built-in WooCommerce Customizer.
Why should I customize the shop page layout?
Customizing your shop layout helps improve user experience, boost conversions, reduce bounce rates, and support SEO by highlighting bestsellers, product categories, and keyword-rich content.
Will customizing the shop page affect SEO?
Yes — positively, if done right. Adding structured content, keyword-optimized headings, internal links, and schema markup can improve your shop page’s visibility in search engines and AI search tools.
What tools can I use to customize the shop page?
Popular options include:

SeedProd – a no-code drag-and-drop builder with WooCommerce integration
WooCommerce Customizer – lets you modify layouts directly in the WordPress Customizer
Elementor or Divi (optional) – other visual page builders with WooCommerce support

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.

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.