So passen Sie die WooCommerce-Kategorieseite an (Plugins und Codierung)

Veröffentlicht: 2021-06-10

Möchten Sie Ihre Kategorieseiten bearbeiten? In dieser Anleitung zeigen wir Ihnen verschiedene Methoden zum Anpassen der WooCommerce-Kategorieseite mit und ohne Plugins .

Die Kategorieseite ist normalerweise eine der am häufigsten übersehenen und am wenigsten angepassten Seiten in einem E-Commerce-Shop. Denn sie fungiert normalerweise als Brücke zur Hierarchie zwischen Produkt- und Shopseite. Es gibt jedoch mehrere praktische Szenarien, in denen sich Benutzer auf die Kategorieseite verlassen, um nach Produkten zu suchen, daher ist es sinnvoll, sie zu bearbeiten und das Beste daraus zu machen.

Bevor wir uns die verschiedenen Methoden zum Anpassen der Kategorieseite in WooCommerce ansehen, wollen wir die Vorteile besser verstehen.

Warum die WooCommerce-Kategorieseite bearbeiten?

Die Kategorieseite zeigt alle Produkte Ihres WooCommerce-Shops, die in dieser Kategorie enthalten sind . Obwohl Benutzer normalerweise auf anderen Seiten nach Produkten suchen, finden es Kunden manchmal einfacher, nach den Artikeln auf der Kategorieseite zu suchen. Wenn Sie beispielsweise den Namen des Produkts nicht kennen, aber die Kategorie kennen, werden Sie wahrscheinlich über die Kategorieseite nach dem Produkt suchen.

Darüber hinaus bleiben Ihre Kunden möglicherweise länger auf Ihrer Website, wenn sie von der Kategorieseite positiv beeinflusst werden. Da diese Seiten normalerweise übersehen werden, heben Sie sich ab, wenn Sie sie anpassen, und verbessern die Erfahrung Ihrer Kunden.

Die gute Nachricht ist, dass Sie mit WooCommerce Ihre Kategorieseite ganz einfach anpassen können. Die schlechte Nachricht ist, dass die von WooCommerce bereitgestellten Standardoptionen ziemlich begrenzt sind. Sie können nur den Namen, den Slug, die übergeordnete Kategorie, den Beschreibungstext, den Anzeigetyp und die Miniaturansicht für jede Kategorieseite bearbeiten.

Standard-Kategorieoptionen passen die Woocommerce-Kategorieseite an

Sie können auch andere Elemente mit dem Design-Customizer bearbeiten, aber wenn Sie Ihre Kategorieseite auf eine ganz neue Ebene bringen möchten, brauchen Sie etwas anderes.

Aus diesem Grund zeigen wir Ihnen in diesem Leitfaden verschiedene Methoden zum Bearbeiten Ihrer Kategorieseite in WooCommerce und helfen Ihren Kunden, sich einfacher auf Ihrer Website zurechtzufinden.

So passen Sie die WooCommerce-Kategorieseite an

Es gibt verschiedene Methoden, um Ihre WooCommerce-Kategorieseite in WordPress einfach anzupassen:

  1. Mit Divi
  2. Verwendung eines speziellen Plugins
  3. Programmatisch (Codierung)

In diesem Abschnitt gehen wir Schritt für Schritt durch jede Methode, damit Sie diejenige auswählen können, die Ihren Anforderungen am besten entspricht.

HINWEIS : Bevor Sie beginnen, vergewissern Sie sich, dass Sie WooCommerce korrekt eingerichtet und alle erforderlichen Seiten erstellt haben.

1. WooCommerce-Kategorieseite mit Divi anpassen

Divi ist eines der beliebtesten WordPress-Themes und das aus gutem Grund. Es verfügt über zahlreiche Funktionen und ist vollständig mit WooCommerce kompatibel, was es ideal zum Anpassen Ihrer Kategorieseiten macht.

Dieses Thema enthält einen integrierten Drag-and-Drop- Builder , mit dem Sie eine benutzerdefinierte Kategorieseitenvorlage erstellen können. Auf diese Weise können Sie eine Vorlage für Kategorieseiten erstellen und diese für alle in Ihrem WooCommerce-Shop verwenden.

Was die Verwendung von Divi so einfach macht, ist, dass Sie alle Änderungen, die Sie mit dem Builder vornehmen, in Echtzeit mit der Live-Vorschau sehen können. Divi bietet auch verschiedene Module , mit denen Sie Ihren Seiten ganz einfach viele Elemente hinzufügen können, wodurch Sie beim Erstellen oder Bearbeiten Ihrer Kategorieseiten viel Zeit sparen.

1.1. Installieren und aktivieren Sie Divi

Um Divi verwenden zu können, müssen Sie es zuerst installieren und aktivieren. Sie können die Divi-Zip-Datei von der offiziellen Website herunterladen.

Gehen Sie dann zu Ihrem WordPress-Dashboard und gehen Sie zu Appearance > Themes > Add New .

Neues Thema hinzufügen Woocommerce-Kategorieseite anpassen

Drücken Sie Thema hochladen und wählen Sie die kürzlich heruntergeladene Divi-ZIP-Datei aus, die Sie auf Ihre Website hochladen möchten. Klicken Sie nach dem Hochladen auf Jetzt installieren, um das Design zu installieren und zu aktivieren , sobald die Installation abgeschlossen ist.

Durch die Aktivierung des Divi-Designs wird auch automatisch der Divi-Builder installiert, der integrierte Seitenersteller, mit dem wir die Kategorieseiten anpassen.

1.2. Erstellen Sie eine benutzerdefinierte Kategorieseitenvorlage

Um mit dem Erstellen einer benutzerdefinierten Kategorieseitenvorlage zu beginnen, müssen Sie zu Divi > Theme Builder gehen und auf Neue Vorlage hinzufügen drücken.

neue Vorlage hinzufügen Woocommerce-Kategorieseite anpassen

Aktivieren Sie dann das Kontrollkästchen für Alle Produktkategorieseiten unter Archivseiten und klicken Sie auf Vorlage erstellen .

Wählen Sie danach in der neuen Vorlage, die Sie gerade hinzugefügt haben, Benutzerdefinierten Text hinzufügen aus. Da wir mit Divi eine völlig neue Vorlage erstellen, wählen Sie auch die Option Build Custom Body .

Erstellen Sie einen benutzerdefinierten Körper. Passen Sie die Woocommerce-Kategorieseite an

Dort sehen Sie 3 verschiedene Optionen:

  • Erstellen Sie Ihre Vorlage von Grund auf neu
  • Verwenden Sie eine der Vorlagen aus der Divi-Bibliothek und verwenden Sie sie weiter, um Ihre WooCommerce-Kategorieseite anzupassen
  • Klonen Sie eine vorhandene Seite und verwenden Sie sie als Vorlage für alle Ihre Produktkategorieseiten

Sie können eine der Optionen auswählen, die am besten zu Ihnen passt. Für dieses Tutorial wählen wir „ Build from Scratch“, also klicken wir auf die Schaltfläche „ Building starten “.

Sie werden zum Layout der Kategorieseite weitergeleitet, von wo aus Sie mit Divi Builder Ihre Vorlage erstellen.

Um mit dem Erstellen Ihrer Vorlage zu beginnen, müssen Sie die Struktur auswählen. Wählen Sie unter Neue Zeile den gewünschten Zeilentyp für Ihre Kategorieseiten aus. Sie können mehrere Zeilen und Spalten hinzufügen. Sie benötigen mindestens 2 Zeilen für den Kopf- und Hauptteil der Kategorieseite, aber Sie können auch mehr Spalten haben, wenn Sie eine Seitenleiste zu Ihrem Hauptteil der Kategorieseite hinzufügen möchten.

Zeile einfügen Woocommerce-Kategorieseite anpassen

Nachdem Sie die Anzahl der Zeilen und Spalten ausgewählt haben, müssen Sie die Divi-Module hinzufügen, um das Layout der Kategorieseite weiter anzupassen.

1.3. Kopfzeile der Kategorieseite

Für die Kopfzeile der Kategorieseite müssen Sie den Seitentitel und das Breadcrumb für Ihre Kategorieseiten hinzufügen.

Um den Beitragstitel hinzuzufügen, klicken Sie auf das Symbol „ + “ in der Zeile, suchen Sie in der Suchleiste nach Beitragstitel und wählen Sie ihn aus.

Sie sehen die verschiedenen Beitragstiteloptionen. Sie können das Meta- und Feature-Bild hinzufügen, aber wir werden sie für dieses Tutorial nicht verwenden, also deaktivieren wir die Optionen Show Meta und Show Featured Image im Abschnitt Elemente .

Post-Titel-Inhaltsregisterkarte Passen Sie die Woocommerce-Kategorieseite an

Es ist erwähnenswert, dass Sie hier keinen Titel hinzufügen müssen, da der dynamische Beitragstitel automatisch angezeigt wird, wenn Sie eine Vorschau der Website anzeigen. Darüber hinaus können Sie auf der Registerkarte Design die Hintergrundfarbe und die Schriftarten der Kopfzeile bearbeiten.

Es gibt auch einige erweiterte Optionen zum Hinzufügen von CSS-IDs, Klassen, benutzerdefiniertem CSS, Bildlaufeffekten und mehr. Nachdem Sie alle notwendigen Änderungen vorgenommen haben, klicken Sie auf das „ Häkchen “-Symbol, um die Änderungen zu speichern.

Beitragstitel erweiterte Registerkarte Passen Sie die Woocommerce-Kategorieseite an

1.3.1 – Breadcrumb-Modul hinzufügen

Außerdem benötigen Sie ein Breadcrumb-Modul für die zusätzliche Navigation auf den Kategorieseiten. Klicken Sie also erneut auf das Symbol „ + “, um ein neues Modul hinzuzufügen, und suchen Sie nach „ Woo Breadcrumb “.

Wählen Sie dann im Abschnitt „ Produkt “ auf der Registerkarte „ Inhalt “ die Option „ Dieses Produkt “. Dadurch wird der dynamische Titel für die Produktkategorie hinzugefügt, die Ihre Kunden sehen möchten.

Breadcrumb-Inhaltsregisterkarte Woocommerce-Kategorieseite anpassen

Nehmen Sie erneut die erforderlichen Änderungen auf den Registerkarten Design und Erweitert vor und klicken Sie schließlich auf das Symbol „ Häkchen“ , um die Änderungen zu speichern.

1.4. Inhalt der Kategorieseite

Nachdem Sie die Kopfzeile bearbeitet haben, können Sie mit dem Text der Kategorieseite fortfahren. Wenn Sie noch keine Zeile hinzugefügt haben, klicken Sie auf das grüne + “-Symbol und wählen Sie den Zeilentyp aus, den Sie hinzufügen möchten. Danach müssen Sie hier das Shop-Modul hinzufügen, da es alle Produkte für Ihren Shop enthält.

Drücken Sie das „ + “-Symbol in der Zeile und suchen Sie nach dem Shop -Modul.

Sobald Sie darauf klicken, können Sie die Optionen für Ihre Produkte auf der Kategorieseite konfigurieren.

Auf der Registerkarte Inhalt können Sie alle Elemente für Ihre Kategorieseite bearbeiten. Stellen Sie sicher, dass Sie die Option Aktuelle Seite verwenden aktivieren, um die Produkte der spezifischen Produktkategorie anzuzeigen, die Ihre Kunden in Ihrem Online-Shop auswählen.

Registerkarte „Shop-Inhalt“ Passen Sie die WooCommerce-Kategorieseite an

Jetzt müssen Sie nur noch die anderen Anzeigeelemente der Seite bearbeiten. Beispielsweise können Sie hier die Anzahl der Spalten oder Produkte hinzufügen, die pro Seite und Paginierung angezeigt werden sollen. Darüber hinaus können Sie in den Registerkarten Design und Erweitert die Schriftarten der Produkt- und Preistexte und vieles mehr bearbeiten. Nachdem Sie alle notwendigen Änderungen vorgenommen haben, drücken Sie das Häkchen -Symbol, um die Änderungen zu speichern.

Sie können mit Divi Builder weitere Zeilen hinzufügen oder die Fußzeilenbereiche anpassen. Denken Sie daran, den Text der Seitenvorlage unten rechts auf Ihrem Bildschirm zu speichern , wenn Sie alles erledigt haben.

Nachdem Sie Ihre Änderungen gespeichert haben, schließen Sie Divi Builder und Sie werden zum Theme Builder-Dashboard weitergeleitet. Klicken Sie auch hier auf Änderungen speichern, um die Änderungen an Ihrer Vorlage zu speichern.

Theme Builder Änderungen speichern Woocommerce-Kategorieseite anpassen

Wenn Sie jetzt die Kategorieseite einer beliebigen Produktkategorie in der Vorschau anzeigen, können Sie alle Ihre Änderungen sehen.

2. Passen Sie die WooCommerce-Kategorieseite mit einem Plugin an

Wenn Sie Divi nicht verwenden und Ihr aktuelles Design nicht ersetzen möchten, ist die beste Option zum Bearbeiten der WooCommerce-Kategorieseite die Verwendung eines speziellen WordPress-Plugins.

Für dieses Tutorial verwenden wir das Category Editor -Plugin, da es kostenlos und einfach zu verwenden ist und Sie Kategorieseiten mit wenigen Klicks anpassen können. Dieses Tool konzentriert sich hauptsächlich auf den Beschreibungsbereich der Kategorieseiten und stellt Ihnen dafür einen Editor zur Verfügung. Auf diese Weise können Sie die Beschreibung der Produktkategorien bearbeiten, um sie auf den Kategorieseiten anzuzeigen.

Kategorie-Editor Passen Sie die WooCommerce-Kategorieseite an

Um dieses Plugin zu verwenden, gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Add New . Suchen Sie dann nach Category Editor , klicken Sie auf Jetzt installieren und aktivieren Sie dann das Plugin.

Sie können es auch manuell installieren, indem Sie das Plugin direkt aus dem WordPress-Repository herunterladen. Wenn Sie mehr über diesen Vorgang erfahren möchten, können Sie sich unsere Anleitung zur manuellen Installation eines Plugins ansehen.

Nachdem Sie den Kategorie-Editor aktiviert haben, gehen Sie zu Produkte > Kategorien und drücken Sie Bearbeiten für die Kategorie, deren Beschreibung Sie anpassen möchten.

Kategorien bearbeiten Woocommerce-Kategorieseite anpassen

Hier sehen Sie, dass dem Beschreibungsbereich ein Texteditor hinzugefügt wurde, in dem Sie die Schriftart, Überschriften, Listen und die Ausrichtung des Textes ändern können. Außerdem können Sie Kategoriebilder hinzufügen und die Registerkarte „ Text “ verwenden, um die Kategoriebeschreibung mit etwas Code anzupassen.

Nachdem Sie alle erforderlichen Änderungen vorgenommen haben, klicken Sie auf Aktualisieren und sehen Sie sich die Änderungen auf Ihren Kategorieseiten an.

Kategorieeditor Beispielkörper Anpassen der WooCommerce-Kategorieseite

So können Sie Ihre WooCommerce-Kategorieseiten mit einem Plugin anpassen. Wenn Sie jedoch mehr Anpassungsoptionen wünschen und über Programmierkenntnisse verfügen, können Sie Ihre eigene Lösung codieren. Schauen wir uns an, wie es geht.

3. Passen Sie die WooCommerce-Kategorieseite programmgesteuert an

Wenn Sie Divi nicht verwenden und keine Tools von Drittanbietern installieren möchten, ist das Codieren Ihrer eigenen Lösung eine hervorragende Option. Der Hauptvorteil der programmgesteuerten Bearbeitung der Kategorieseite besteht darin, dass sie Ihnen mehr Flexibilität bietet.

Auch wenn Sie kein erfahrener Entwickler sind, stellt WooCommerce Ihnen mehrere Shortcodes und Shortcode-Attribute zur Verfügung, um Ihnen bei diesem Prozess zu helfen. Wenn Sie mit Shortcodes nicht vertraut sind, sehen Sie sich diese Anleitung an, um besser zu verstehen, wie man sie verwendet.

Mit diesen Shortcodes können Sie Produktkategorien auf jeder Seite anzeigen:

  • [ product_category ] – zeigt eine bestimmte Produktkategorie an
  • [ product_categories ] – zeigt alle Produktkategorien Ihres Shops an

Sie können sie zusammen mit Produktkategorieattributen verwenden, um die Art und Weise zu ändern, wie sie die Produktkategorien anzeigen. Wenn Sie beispielsweise die Produktkategorien der obersten Ebene anzeigen und die Unterkategorien ausblenden möchten, können Sie den folgenden Shortcode verwenden:

[ product_categories number="0" parent="0" ]

Sie können die Kategorien der obersten Ebene sehen, sobald Sie eine Vorschau Ihrer Seite anzeigen.

Darüber hinaus können Sie auch verschiedene Code-Snippets verwenden, um Ihre Kategorieseite in WooCommerce zu bearbeiten. Eines der häufigsten Beispiele ist das Erstellen einer benutzerdefinierten Kategorie.

Bevor wir Ihnen zeigen, wie es geht, stellen Sie sicher, dass Sie Ihre WordPress-Website sichern und ein untergeordnetes Thema verwenden. Wir werden einige Kernthemendateien ändern, sodass Ihre Website möglicherweise beschädigt wird, wenn etwas schief geht. Aus diesem Grund wird immer empfohlen, eine Sicherungsversion zu haben, die Sie wiederherstellen können, um Probleme zu vermeiden.

Erstellen Sie einen benutzerdefinierten Kategorieseitentitel

Um einen benutzerdefinierten Kategorieseitentitel mit einem Code-Snippet zu erstellen, müssen Sie zu Darstellung > Design-Editor gehen und das folgende Code-Snippet zur Datei functions.php Ihres untergeordneten Designs hinzufügen.

 add_filter( 'woocommerce_page_title', 'QL_customize_woocommerce_page_title', 10, 1 );
function QL_customize_woocommerce_page_title( $page_title) {
 // Custom title for the product category 't-shirts'
 if ( is_product_category('t-shirts') ) { $page_title = 'Something';
 }
 // Custom title for the product category 'hoodies'
 elseif ( is_product_category('hoodies') ) {
 $page_title = 'Something else'; }
 return $page_title;
}

Weitere Informationen zum Snippet finden Sie auf dieser Website.

Auf diese Weise können Sie auf der Kategorieseite einen benutzerdefinierten Titel anstelle des Standardkategorietitels anzeigen.

Hintergrund der Produktkategorieseite ändern

In ähnlicher Weise können Sie auch den Hintergrund Ihrer Produktkategorieseite mithilfe von Code-Snippets ändern. Fügen Sie einfach das folgende Code-Snippet noch einmal in die Datei funtions.php ein .

 if (is_product_category()){ add_action( 'wp_head' , function () { ?> <style> .woocommerce.post-type-archive-product { background-image:none !important; } .woocommerce.single-product { background-image:none !important; } </style> <?php }); }

Der Code prüft, ob es sich bei dem Element um eine Produktkategorie handelt und ändert die Farbe des Hintergrunds. Weitere Informationen finden Sie auf dieser Website.

Dies sind nur einige Beispiele, aber Sie können noch viel mehr tun. Fühlen Sie sich frei, dieses Snippet als Grundlage zu nehmen und Ihren eigenen benutzerdefinierten Code hinzuzufügen, um die Kategorieseite in Ihrem Geschäft anzupassen.

Bonus: Schnellansicht zu Kategorieseiten hinzufügen

Eine weitere interessante Option zum Anpassen Ihrer WooCommerce-Kategorieseite ist das Hinzufügen einer Schnellansichtsfunktion. Eine Schnellansicht ermöglicht es Ihren Kunden, die Produktdetails auf der jeweiligen Kategorieseite anzuzeigen, ohne die eigentliche Produktseite öffnen zu müssen. Dies bietet Käufern eine bessere Benutzererfahrung, während sie in Ihrem Online-Shop stöbern.

Um der Kategorieseite eine Schnellansichtsfunktion hinzuzufügen, verwenden wir das WooCommerce Direct Checkout- Plugin. Es ist eines der besten Checkout-Plugins für WooCommerce, das mit zahlreichen Funktionen ausgestattet ist, mit denen Sie Ihre Konversionsraten und Verkäufe steigern können.

woocommerce direct checkout Woocommerce-Kategorieseite anpassen

Auch wenn dies ein Freemium-Plugin ist, müssen Sie sowohl die kostenlose Version als auch einen der Premium-Pläne installieren, um den Kategorieseiten eine schnelle Ansicht hinzuzufügen. Gehen Sie also zuerst zu dieser Seite, um WooCommerce Direct Checkout zu installieren und zu aktivieren.

Nachdem Sie das Plugin installiert und aktiviert haben, gehen Sie in Ihrem WordPress-Dashboard zu WooCommerce > Direct Checkout > Archives . Aktivieren Sie die Option Schnellansichtsschaltfläche hinzufügen, indem Sie Ja aus der Dropdown-Liste auswählen, und speichern Sie dann die Änderungen.

Wenn Sie Ihre Website vom Frontend aus überprüfen, werden Sie sehen, dass es eine neue Schaltfläche gibt, die direkt neben der Schaltfläche „ Jetzt kaufen/In den Einkaufswagen “ erscheint. Für diejenigen, die das Storefront-Design verwenden, sieht die Schaltfläche beispielsweise so aus.

Schnellansichtssymbol Woocommerce-Kategorieseite anpassen

Wenn Sie auf den Schnellansicht-Button klicken, öffnet sich ein Pop-up mit allen wichtigen Informationen zum Produkt wie Titel, Preis, Beschreibung usw. Auf diese Weise können Kunden Produkte direkt in ihren Warenkorb legen, ohne die Produktseite öffnen zu müssen.

Sie können die Schnellansichtsschaltfläche und das Popup weiter anpassen. Weitere Informationen dazu finden Sie in unserer Anleitung zum Hinzufügen einer Schnellansicht in WooCommerce.

Empfehlungen zur Überarbeitung Ihrer Kategorieseite

Wie bereits erwähnt, sind das Gesamtdesign und die Benutzeroberfläche Ihrer Kategorieseiten sehr wichtig für das Wachstum Ihres Online-Shops. Es ist eine sehr nützliche Seite, auf der Sie verschiedene Produkte derselben Kategorie vergleichen können, bevor Sie sie kaufen.

Eine gut gestaltete Kategorieseite kann Ihnen helfen, Ihre Kunden länger in Ihrem Online-Shop zu halten. Je besser sie Ihr Geschäft erleben, desto wahrscheinlicher kaufen sie und werden zu treuen Kunden.

Um sicherzustellen, dass Sie Ihre Kategorieseiten optimal nutzen und sich von Ihren Mitbewerbern abheben, sind dies einige Empfehlungen, um sie auf die nächste Stufe zu heben.

1. Fügen Sie große Produktbilder hinzu

Beim Online-Shopping sagt ein Bild mehr als tausend Worte. Käufer möchten große und klare Bilder der Produkte sehen, an denen sie interessiert sind, bevor sie zur Produktseite gehen müssen.

Dies bedeutet jedoch nicht, dass Sie extrem große Produktbilder für die Kategorieseite verwenden sollten. Sehr große Bilder neigen dazu, schwerer zu werden und Ihre Website langsam zu machen, also finden Sie ein gutes Gleichgewicht zwischen großen Bildern und Website-Geschwindigkeit.

Sie können beispielsweise eine 3-spaltige Kategorieseite mit einer Bildgröße von 300–400 Pixeln verwenden. Dies sollte ausreichen, um die erforderlichen Produktdetails auf einem durchschnittlich großen Monitor oder Mobilgerät anzuzeigen.

Nike-Beispiel WooCommerce-Kategorieseite anpassen

Ein gutes Beispiel finden Sie auf den Kategorieseiten von Nike, einer der bekanntesten Sportbekleidungsmarken. Nike verwendet klare und große Bilder, die für ein Produkt-Miniaturbild angemessen sind.

Denken Sie auch daran, dass Online-Shopping heutzutage weitgehend auf mobilen Geräten durchgeführt wird. Stellen Sie sicher, dass Sie Ihre Kategorieseiten sowohl auf dem Desktop als auch auf Mobilgeräten testen, damit Größe und Design für jede Bildschirmgröße geeignet sind.

2. Verwenden Sie attraktive Header-Bilder

Wir alle wissen, dass der erste Eindruck zählt, und das gilt umso mehr, wenn es um Online-Shopping geht. Wenn ein Kunde eine Kategorieseite öffnet, fällt ihm als Erstes die Kopfzeile der Seite auf. Achten Sie deshalb darauf, für jede Kategorie ansprechende Überschriften zu verwenden.

Eine der besten Möglichkeiten, einen attraktiven Header zu erstellen, ist das Hinzufügen eines Header-Bildes. Behalten Sie das Gesamtdesign Ihrer Website im Auge und passen Sie das Header-Bild an das allgemeine Farbschema Ihres Online-Shops an.

Header-Bilder finden Sie beispielsweise in vielen modeorientierten Online-Shops wie MAC Cosmetics.

MAC Cosmetics passt die Woocommerce-Kategorieseite an

Wie Sie sehen können, verwendet MAC eine sehr kreative Art, das Header-Bild anzuzeigen. Das Kategorie-Header-Bild besteht aus seinem Bild und passt auch zum dunklen Farbschema mit den Header-Menüs.

3. Halten Sie die Breadcrumbs immer sichtbar

Breadcrumbs sind eines der nützlichsten Elemente, um sicherzustellen, dass Ihre Website-Besucher an der richtigen Stelle sind. Breadcrumbs helfen Benutzern auch bei der Navigation auf Ihrer Website, was ihnen hilft, schneller zu finden, wonach sie suchen, und ihr Einkaufserlebnis zu verbessern.

Beim Durchsuchen von Produkten klicken Kunden manchmal auf verschiedene Dinge und können sich in Ihrem Geschäft verirren. Dadurch, dass die Breadcrumbs immer sichtbar sind, können Benutzer sofort sehen, wo sie sich befinden, und einfach zur gewünschten Kategorie zurückkehren.

Einige Websites ziehen es vor, die Kategorien in der Seitenleiste anzuzeigen, aber die meisten Online-Shops verwenden den Navigationspfad, da es für Kunden einfacher ist, dorthin zurückzukehren, wo sie vorher waren.

Das Anzeigen von Breadcrumbs ist kein Problem, wenn Sie das obige Tutorial mit Divi befolgt haben. Wenn Sie ein anderes Design verwenden, lesen Sie diese Anleitung, um zu erfahren, wie Sie Breadcrumbs auf jeder Seite hinzufügen und anzeigen.

4. Überprüfen Sie, ob sich die Produkte in den richtigen Kategorien befinden

Auch wenn dies offensichtlich erscheint, können beim manuellen Hinzufügen von Produkten Fehler passieren. Dieser Punkt ist also eher eine Erinnerung als eine Empfehlung.

Kontrollieren Sie regelmäßig, ob alle Produkte den richtigen Kategorien zugeordnet und nicht verwechselt sind. Sie müssen dies nicht jeden Tag überprüfen, aber es ist wichtig, es von Zeit zu Zeit zu tun. Sie können Produkte, Kategorien und Beschreibungen auch auf Rechtschreibfehler prüfen.

Jegliche Fehler bei den Produkten oder deren Kategorien können den Eindruck der Besucher von Ihrer Website beeinträchtigen. Was würden Sie denken, wenn Sie in einem Online-Shop stöbern und eine Jeans in der Laptop-Kategorie finden würden? Hin und wieder Kontrollen durchzuführen kostet nicht viel Zeit und hilft Ihnen, alles organisiert zu halten.

Wenn Sie Ihren E-Commerce-Shop noch weiter verbessern möchten, werfen Sie einen Blick auf unsere WooCommerce-Tipps zur Optimierung Ihres Online-Shops.

Fazit

Alles in allem spielt Ihre Kategorieseite eine wichtige Rolle in Ihrem Shop. Um sich von Ihren Mitbewerbern abzuheben, sollten Sie Ihre WooCommerce-Kategorieseite anpassen und das Beste daraus machen. Ebenso können Sie auch Ihren Shop, Ihr Produkt, mein Konto und Ihre Checkout-Seite bearbeiten, um Ihren gesamten Shop zu überarbeiten, während Sie gerade dabei sind.

Zum Abschluss haben wir verschiedene Methoden zum Bearbeiten Ihrer Kategorieseite besprochen:

  • Mit Divi
  • Verwendung eines speziellen Plugins
  • Programmatisch

Wir hoffen, dass dieser Leitfaden hilfreich war und Sie Ihre Kategorieseiten problemlos bearbeiten können. Außerdem haben wir Ihnen noch einen Bonustipp gegeben, um eine Produktschnellansicht auf Ihrer Kategorieseite hinzuzufügen.

Schließlich haben wir auch einige Empfehlungen gesehen, um Ihre Kategorieseite zu verbessern und Ihre Konversionsraten zu steigern, indem Sie bessere Bilder verwenden und Breadcrumbs immer sichtbar machen.

Wenn dieses Tutorial hilfreich war, empfehlen wir Ihnen, sich auch die folgenden Tutorials anzusehen:

  • So verstecken und entfernen Sie die Schaltfläche „Zum Warenkorb hinzufügen“ in WooCommerce
  • Passen Sie die WooCommerce-Warenkorbseite an
  • So fügen Sie Gebühren zur WooCommerce-Kaufabwicklung hinzu