Als ich versuchte, das Aussehen meiner WooCommerce-Kategorie-Seiten zu ändern, stieß ich auf eine Wand. Ich wollte Dinge verschieben, Bilder hinzufügen und das Layout mehr wie den Rest meiner Website gestalten, aber es gab keinen einfachen Weg, dies zu tun.
WooCommerce bietet Ihnen ein Standard-Layout für Kategorie-Seiten, aber es ist nicht für die Anpassung ausgelegt. Sie können nicht einfach Blöcke ziehen oder Ihren eigenen Stil hinzufügen, es sei denn, Sie sind mit der Bearbeitung von Theme-Dateien vertraut, und das bin ich nicht.
In diesem Leitfaden zeige ich Ihnen, wie Sie eine Produktkategorie-Seite in WooCommerce anpassen und bearbeiten, von der Anpassung des Layouts bis zur Gestaltung Ihrer eigenen benutzerdefinierten WooCommerce-Kategorie-Vorlage, ganz ohne Code.
Was Sie lernen werden:
- Wie Sie ein benutzerdefiniertes WooCommerce-Kategorie-Layout erstellen
- Welche Vorlage Sie für kategoriespezifische Änderungen bearbeiten müssen
- Tipps zum Hinzufügen von Bannern, Testimonials und mehr
- Zwei Möglichkeiten, Produktkategorien auf Ihrer Shop-Seite anzuzeigen
Warum Produktkategorie-Seiten in WooCommerce anpassen?
Es gibt mehrere Gründe, Ihre WooCommerce-Kategorie-Seiten anzupassen:
- Umsatz steigern: Rund 70 % der Verkäufe stammen von Kategorie-Seiten, was bedeutet, dass sie direkt zum Erfolg Ihres Unternehmens beitragen. Das Erstellen benutzerdefinierter Kategorie-Seiten, die auf die Bedürfnisse der Käufer zugeschnitten sind, kann zu hohen Konversionsraten führen.
- SEO verbessern: Die Optimierung von Kategorie-Seiten kann Ihre Rankings in Suchergebnissen verbessern. Da viele Online-Shops nur minimale Inhalte auf Kategorie-Seiten haben, ist dies eine ideale Gelegenheit, Produktkategorien und Unterkategorien für Schlüsselwörter zu optimieren, nach denen Ihre Zielgruppe sucht.
- Aufmerksamkeit erregen: Suchmaschinen leiten Benutzer oft eher zu Produktkategorie-Seiten als zu Shop-Seiten, da sie sich auf spezifische Ergebnisse konzentrieren. Sie können diese Seiten mit benutzergenerierten Inhalten, besseren Produktbildern und Bewertungen anpassen, um Aufmerksamkeit zu erregen und Käufer zum Auschecken zu überzeugen.
Letztendlich kann die Anpassung von Produktkategorie-Seiten in WooCommerce Ihnen helfen, Käufer besser zu bedienen, Suchmaschinen-Rankings zu verbessern und Ihre Verkäufe zu steigern.
Bevor wir Ihnen zeigen, wie Sie Ihre Kategorie-Seiten anpassen, sehen wir uns an, wie Sie sie zu Ihrem WooCommerce-Shop hinzufügen.
Produktkategorien in WooCommerce hinzufügen
Das Hinzufügen von Produktkategorie-Seiten in WooCommerce ist ziemlich einfach. Gehen Sie in Ihrem WordPress-Dashboard zu Produkte » Kategorien, und Sie sehen mehrere Eingabefelder.
Sie können so viele Kategorien hinzufügen, wie Sie möchten, aber denken Sie daran, die folgenden Informationen einzugeben, um die Anzeige von Kategorie-Daten auf Produktseiten zu erleichtern:
- Name
- Kategorie-Slug
- Übergeordnete Kategorie
- Beschreibung
- Anzeigetyp
- Miniaturansicht
Nachdem Sie Kategorien zu Ihrem Online-Shop hinzugefügt haben, sind Sie bereit, Ihre Kategorie-Seiten zu erstellen und anzupassen.
Zuerst zeigen wir Ihnen, wie Sie mit SeedProd eine benutzerdefinierte Produktkategorie-Seite in WooCommerce erstellen. Danach teilen wir Ihnen mehrere Möglichkeiten mit, Produktkategorien in WooCommerce anzuzeigen.
Anpassen und Bearbeiten von Produktkategorie-Seiten in WooCommerce
Während WooCommerce Ihnen mehrere Möglichkeiten bietet, Kategorieseiten anzuzeigen, gibt es Ihnen nicht viel Kontrolle über das eigentliche Layout oder Design. Wenn Sie das Layout Ihrer Produktkategorieseite in WooCommerce bearbeiten möchten, ist mein Top-Vorschlag die Verwendung eines visuellen Builders wie SeedProd.
SeedProd ist der beste Website-Builder für WordPress. Mit über 1 Million aktiven Installationen ist es der einfachste Weg, benutzerdefinierte WordPress-Themes, Layouts und Landingpages ohne Code zu erstellen.
Es ist außerdem schnell, leichtgewichtig und unterstützt WooCommerce vollständig, sodass Sie mit seinem einfachen Drag-and-Drop-Builder komplette Online-Shops erstellen können.
Befolgen Sie die nachstehenden Schritte, um benutzerdefinierte Kategorieseiten mit SeedProd zu erstellen.
Schritt 1. Installieren und aktivieren Sie den SeedProd Website Builder
Der erste Schritt ist der Download des SeedProd Website Builders.
Hinweis: Es gibt eine kostenlose Version von SeedProd, aber wir verwenden den SeedProd Elite Plan für die WooCommerce-Funktionen.
Installieren und aktivieren Sie als Nächstes die Plugin-.zip-Datei auf Ihrer WordPress-Website. Wenn Sie Hilfe bei diesem Schritt 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 fügen Sie Ihren Lizenzschlüssel ein.
Sie finden Ihren Lizenzschlüssel, indem Sie sich auf der SeedProd-Website anmelden und ihn aus dem Tab „Downloads“ kopieren.
Klicken Sie auf die Schaltfläche Schlüssel überprüfen; dann sind Sie bereit, Ihre benutzerdefinierten WooCommerce-Kategorieseiten einzurichten.
Schritt 2. Erstellen Sie ein WooCommerce-Theme
SeedProd ist ein flexibler WooCommerce-Kategorieseiten-Builder, mit dem Sie ein vollständig benutzerdefiniertes WooCommerce-Kategorielayout auf zwei Arten erstellen können:
- Theme Builder – Der Theme Builder überschreibt Ihr aktuelles Theme und ermöglicht es Ihnen, jeden Teil Ihrer Website mit seinem visuellen Editor anzupassen.
- Landing Page Builder – Der Landing Page Builder ermöglicht es Ihnen, Ihr aktuelles Theme beizubehalten und individuelle Landingpages zu erstellen, die Sie mit dem Drag-and-Drop-Editor anpassen können.
Wir werden die Theme Builder-Option verwenden, um alle Seiten für einen WooCommerce-Shop automatisch zu erstellen.
Um Ihr WooCommerce-Theme einzurichten, gehen Sie zu SeedProd » Theme Builder.
Normalerweise sehen Sie auf dieser Seite eine Liste der Vorlagen, aus denen Ihr Theme besteht. Vorerst sehen Sie nur die Global CSS-Vorlage.
Das Tolle an SeedProd ist, dass es über 150 mobile-responsive Landingpages und Theme-Vorlagen verfügt. So müssen Sie nicht bei Null mit dem Design Ihrer WooCommerce-Website beginnen.
Klicken Sie auf die Schaltfläche Themes, um eine Liste der aktuellen WordPress-Theme-Vorlagen von SeedProd anzuzeigen. Dieser Liste werden regelmäßig weitere Vorlagen hinzugefügt, von denen viele auf Online-Shops zugeschnitten sind.
Zum Beispiel würde das Fahrradgeschäft-Theme für Geschäfte geeignet sein, die Fahrräder und Fahrradzubehör verkaufen.
Um ein Theme auszuwählen, fahren Sie mit der Maus darüber und klicken Sie auf das Häkchen-Symbol.
Nach dem Import Ihres Themes erstellt SeedProd alle Teile der Demo. In unserem Fall umfasst dies die folgenden Theme-Vorlagen:
- Produktarchive: ein vollständiges Archiv aller Produkte.
- Produktseite: ein Bereich zur Anzeige von Details zu einzelnen Produkten.
- Shop-Seite: eine anpassbare Storefront-Seite.
- Einzelne Seite: eine einzelne Seite für Inhalte, wie z. B. Ihre Informationen über uns oder Kontaktinformationen.
- Blog-Index, Archive, Suche: eine Seite zur Anzeige Ihrer Blogbeiträge, Suchergebnisse und Beitragsarchive.
- Startseite: die Titelseite Ihrer Website.
- Seitenleiste: ein Widget-fähiger Bereich, den Sie anpassen können.
- Fußzeile: ein Bereich für benutzerdefinierte Links, Inhalte und Copyright-Informationen.
- Kopfzeile: ein Bereich für Ihr Logo und Ihre Navigationsmenüs.
Hinweis: Wir bezeichnen einzelne Teile eines Themes oft als „Vorlagen“.
Durch Klicken auf jede Theme-Vorlage wird sie im Drag-and-Drop-Editor von SeedProd geöffnet, wo Sie den Inhalt und das Design anpassen können.
Eine wichtige Theme-Vorlage für dieses Tutorial ist das Produktarchiv. Wenn Benutzer auf eine Kategorie in Ihrem Shop klicken, sehen sie das Produktarchiv für diese Produktkategorie.
Diese Vorlage müssen Sie öffnen, um Ihre WooCommerce-Produktkategorie-Seiten anzupassen. Fahren Sie mit der Maus über die Vorlage und klicken Sie auf den Link Design bearbeiten, um sie im visuellen Editor zu öffnen.
Schritt 3. Passen Sie Ihre Produktkategorie-Seiten-Vorlage an
Wenn Sie die Vorlagen für Produktarchive öffnen, sehen Sie ein 2-Spalten-Layout. Links befinden sich Blöcke und Abschnitte, die Sie Ihrer Seite hinzufügen können. Rechts sehen Sie eine Live-Vorschau Ihres Designs.
Es sollten bereits 2 Blöcke auf Ihrer Seite vorhanden sein:
- Archivtitel
- Archivprodukte
Der Block „Archivtitel“ hilft Ihnen, automatisch die richtige Überschrift für jede Kategorie anzuzeigen. Dies ist eine einfache Möglichkeit, das Design Ihrer WooCommerce-Produktkategorie anzupassen, ohne Vorlagendateien bearbeiten zu müssen.
Wenn Sie beispielsweise die Kategorie „schwarzes Fahrrad“ in Ihrem Shop anklicken, wird auf der Seite, die Sie sehen, die Überschrift angezeigt: „Kategorie: Schwarze Fahrräder“. Die Überschrift ändert sich automatisch, je nachdem, welche Kategorie Sie anklicken.
Ebenso ist der Block „Archivprodukte“ eines der WooCommerce-Vorlagentags von SeedProd. Dieser Block zeigt ein Raster von Produkten in dieser spezifischen Kategorie an.
Um unser vorheriges Beispiel zu verwenden: Wenn Sie die Kategorie „schwarzes Fahrrad“ anklicken, sehen Sie ein Produktgitter, das nur schwarze Fahrräder anzeigt.
Beide Blöcke anzupassen ist einfach. Klicken Sie einfach auf einen der Blöcke und passen Sie das Styling im linken Einstellungsbereich an.
Sie können beispielsweise die Größe, Ausrichtung und die Überschriftenebene des Archivtitels ändern. Im Tab „Erweitert“ können Sie dann Schriftarten, Farben, Abstände, Schatten und mehr anpassen.
Im Einstellungsbereich „Archivprodukte“ können Sie Spalten, Paginierung, Abfragen, Artikelanzahl und mehr ändern. Sie können das Styling auch im Tab „Erweitert“ ändern.
Zusätzlich ist es sehr einfach, das gesamte Layout Ihrer Produktkategorie-Seite mit beliebigen Blöcken und Abschnitten von SeedProd zu ändern.
Sie können zum Beispiel über den Bildblock ziehen und ein auffälliges Bannerbild hinzufügen. Dann können Sie es mit einem Sale oder einer Promotion verknüpfen, die Sie gerade durchführen.
Sie können auch Testimonials von früheren Kunden hinzufügen, um Käufer davon zu überzeugen, dass Ihre Produkte die beste Wahl sind.
In diesem Beispiel haben wir die Blöcke Archivtitel und Produkte in einen breiten und schmalen 2-Spalten-Bereich gezogen. Wir haben dann den Block Testimonials in der kleineren Spalte verwendet.
Die Möglichkeiten sind so gut wie endlos.
Wenn Sie mit Ihrer Kategorieseite zufrieden sind, vergessen Sie nicht, oben rechts auf die Schaltfläche Speichern zu klicken. Dann können Sie den Rest Ihres WooCommerce-Themes auf die gleiche Weise anpassen.
Schritt 4. Veröffentlichen Sie Ihr WooCommerce-Theme
Wenn Sie bereit sind, Ihr neues Design live zu schalten, gehen Sie zur Seite SeedProd » Theme Builder. Klicken Sie dann oben rechts auf den Schalter Enable SeedProd Theme, bis er auf „an“ steht.
Jetzt können Sie jede Produktkategorieseite in der Vorschau anzeigen, um Ihre Anpassungen zu sehen.
So zeigen Sie Produktkategorien auf Ihrer WooCommerce-Shopseite an
Nachdem Sie nun wissen, wie Sie Produktkategorieseiten in WooCommerce anpassen, erfahren Sie hier, wie Sie sie auf Ihrer Shopseite anzeigen.
Produktkategorien mit SeedProd auf der Shopseite anzeigen
Wenn Sie Produktkategorien mit SeedProd auf Ihrer WooCommerce-Shopseite anzeigen möchten, gehen Sie zu SeedProd » Theme Builder und öffnen Sie die Vorlage Shop Page.
Öffnen Sie von dort die Einstellungen für den Block Produktgitter und ändern Sie den Abfragetyp auf Benutzerdefinierte Abfrage. Klicken Sie unter der Überschrift Abfrageattribut auf „Nach Kategorie auswählen“. Klicken Sie dann im Kategoriefeld auf die Kategorien, die Sie auf der Seite anzeigen möchten.
Hinweis: Sie können mehrere Kategorien auswählen, indem Sie auf dem Mac die Befehlstaste oder unter Windows die Strg-Taste gedrückt halten.
Klicken Sie auf Speichern, um Ihre Änderungen zu speichern.
Produktkategorien mit WooCommerce auf der Shopseite anzeigen
Um Produktkategorien mit den Standardeinstellungen von WooCommerce auf Ihrer Shopseite anzuzeigen, gehen Sie zu Darstellung » Anpassen » WooCommerce » Produktkatalog.
Wählen Sie dann unter der Überschrift „Anzeige der Shopseite“ die Option „Kategorien anzeigen“.
Häufig gestellte Fragen
Weitere Möglichkeiten zur Anpassung von WooCommerce
Das Anpassen von Produktkategorieseiten ist nur eine von vielen Möglichkeiten, Ihren Shop zu optimieren. Weitere WooCommerce-Anpassungen finden Sie in den folgenden Anleitungen:
- So passen Sie den WooCommerce-Tab „Zusätzliche Informationen“ an
- So fügen Sie die Schaltfläche „Warenkorb anzeigen“ in WooCommerce hinzu
- So ändern Sie den Titel der Shop-Seite in WooCommerce
- So erstellen Sie eine beeindruckende Produktbildergalerie in WooCommerce
- So fügen Sie Produktseiten in WooCommerce Sternebewertungen hinzu
- So zeigen Sie verwandte Produkte in WooCommerce an
- So zeigen Sie Produktkategorien und -tags in WooCommerce an
- So erhalten und zeigen Sie Produktbeschreibungen in WooCommerce an
- So zeigen Sie empfohlene Produkte in WooCommerce an
- So beheben Sie, dass WooCommerce „Warenkorb anzeigen“ nicht funktioniert
- So blenden Sie nicht vorrätige Produkte in WooCommerce aus
Das ist alles!
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Produktkategorieseiten in WooCommerce anpassen.
Vielleicht gefällt Ihnen auch diese Anleitung zum Beschleunigen Ihres WooCommerce-Shops.
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.
