So passen Sie die WooCommerce-Kategorieseite in WordPress ohne Codierung an

So passen Sie die WooCommerce-Kategorieseite an

Überlegen Sie, ob Sie die WooCommerce-Produktkategorieseite in Elementor bearbeiten sollten?

Nun, wenn ja, dann würde ich Ihnen dringend empfehlen, dies zu tun. Das Anpassen und Optimieren der WooCommerce-Archivseite kann Ihren Umsatz steigern.

Aber die Frage ist, wie man die WooCommerce-Produktkategorieseite in WordPress anpassen kann.

Nun, Sie müssen sicher nicht programmieren, um die WooCommerce-Kategorieseite anzupassen, wenn Sie dem in diesem Blog gezeigten Prozess folgen.

In diesem Artikel erfahren Sie es So passen Sie die WooCommerce-Kategorieseite ohne Programmieraufwand an. Darüber hinaus lernt man auch kennen wie Sie für jede Kategorie individuell unterschiedliche benutzerdefinierte Archivvorlagen erstellen können. Und auch Möglichkeiten, wie Sie Ihre Archivseite optimieren können, um die Conversion-Rate zu steigern.

Lesen Sie also weiter….

Warum WooCommerce-Kategorieseiten anpassen?

Entsprechend gebautMit, WooCommerce wird von über 29% Prozent der Top-1-Million-Websites genutzt. Während diese Popularität die Glaubwürdigkeit von WooCommerce als E-Commerce-Tool unterstreicht, spiegelt sie auch wider, dass Tausende und Abertausende von Websites dasselbe Standardlayout verwenden, das WooCommerce zu bieten hat.

WooCommerce
WooCommerce-Nutzung unter den Top-1-Million-Websites

Und wenn Sie denken, verwenden Sie die Standardeinstellung WooCommerce Seite wird nur die Chance Ihrer Website minimieren, sich von der Masse abzuheben, dann liegen Sie falsch. Es gibt noch andere Gründe, die Sie ebenfalls berücksichtigen müssen. Um mehr über diese anderen Gründe zu erfahren, werfen wir einen Blick auf die WooCommerce-Standardkategorieseite mit der WordPress Twenty Twenty-Two-Theme aktiviert.

Standardseite der WooCommerce-Kategorie
WooCommerce-Standardkategorieseite

Wie Sie sehen, hat die WooCommerce-Standardkategorieseite ein einfaches Aussehen, das nicht sehr ansprechend ist. Daneben verfügt über keine erweiterten Optionen B. Produkte anhand von Namen suchen, Produkte anhand verschiedener Attribute filtern usw. All dies ist wichtig, um eine gute Benutzererfahrung in Ihrem Online-Shop zu gewährleisten.

Außerdem: Wer mag nicht eine gut aussehende Website, die angenehm für die Augen ist und leicht zu navigieren ist? 

Nun, die Antwort lautet: Jeder! Und fahren wir mit dem nächsten Abschnitt fort, in dem Sie erfahren, wie Sie WooCommerce-Produktkategorieseitenvorlagen ohne Programmieraufwand anpassen können.

Passen Sie WooCommerce mit ShopEngine an

So passen Sie die WooCommerce-Produktkategorieseite in 6 Schritten an

Dies ist ein leicht verständliches Tutorial zum Anpassen von WooCommerce-Kategorieseiten in WordPress ohne Programmieraufwand. Wenn Sie diesem Prozess folgen, können Sie im Handumdrehen das Layout und das Design Ihrer WooCommerce-Archivseite auswählen. Also lasst uns anfangen…

Schritt #1: Installieren Sie den Elementor-Seitenersteller und ShopEngine

Um die Produktkategorieseite von WooCommerce in Elementor mit dem in diesem Blog gezeigten Verfahren zu bearbeiten, benötigen Sie zwei WordPress-Plugins:

ShopEngine ist der ultimative WooCommerce-Builder für den Drag-and-Drop-Seitenersteller Elementor. Es handelt sich um ein Add-on für Elementor, das eine enorme Anzahl an Widgets und Modulen enthält, um die Anpassung von WooCommerce mühelos zu gestalten.

Notiz: Du kannst Nutzen Sie den Gutschein Community20 um 20% Rabatt auf ShopEngine Pro zu erhalten. Installieren Sie zuerst Elementor, da ShopEngine von diesem Seitenersteller abhängig ist. Wenn Sie Hilfe bei der Aktivierung von ShopEngine Pro benötigen, überprüfen Sie die Dokumentation.

Schritt #2: Erstellen Sie eine benutzerdefinierte WooCommerce-Kategorieseitenvorlage

Nachdem Sie alle erforderlichen Plugins installiert und aktiviert haben, müssen Sie eine Kategorievorlage erstellen. So erstellen Sie eine benutzerdefinierte WooCommerce-Kategorieseitenvorlage:

  • Navigieren Sie zu: ShopEngine ⇒ Builders-Vorlage
  • Klicken Sie auf Neu hinzufügen
  • Geben Sie einen Vorlagennamen an
  • Wählen Sie im Dropdown-Menü den Typ „Archiv“ aus
  • Lassen Sie das Feld „Anwendbare Kategorie“ unverändert besteht darin, eine gemeinsame Vorlage für alle Kategorien zu erstellen
  • Aktivieren Sie die Option „Standard festlegen“. um alle vorhandenen Kategorie-/Archivseitenvorlagen zu überschreiben
  • Wählen Sie unter „Beispieldesign“ die Option „Leer“ aus 
  • Klicken Sie auf Mit Elementor bearbeiten um mit der Erstellung der Vorlage zu beginnen
Erstellen Sie eine benutzerdefinierte WooCommerce-Kategorieseitenvorlage
Erstellen Sie eine leere WooCommerce-Kategorieseitenvorlage

Notiz: Ich habe die leere Option gewählt, weil ich in diesem Blog zeigen werde, wie das geht Erstellen Sie eine benutzerdefinierte Kategorieseite von Grund auf. ShopEngine bietet mehrere vorgefertigte WooCommerce-Kategorieseitenvorlage. Falls Sie es wollen a verwenden Wählen Sie eine vorgefertigte Vorlage aus, wählen Sie die gewünschte aus und fahren Sie dann mit Schritt 5 fort. (Schritt 3 und 4 sind obligatorisch, wenn Sie von Grund auf neu erstellen möchten)

Schritt #3: Wählen Sie ein Layout/eine Struktur für die WooCommerce-Kategorieseite

Sobald Sie sich im Editormodus befinden, müssen Sie eine Struktur für Ihre WooCommerce-Kategorieseite auswählen.

Ich werde drei verschiedene Layouttypen für drei verschiedene Abschnitte verwenden, um eine benutzerdefinierte Archivseite zu erstellen. Sie können das Gleiche tun, wie im Blog gezeigt, oder das Layout auswählen, das Ihnen gefällt.

Um eine Struktur auszuwählen, Klicken Sie auf das „+“-Symbol, dann bewegen Sie den Mauszeiger über das gewünschte Layout und klicken Sie dann einfach darauf.

Wählen Sie eine Struktur für eine benutzerdefinierte Kategorieseite aus. Anleitung zum Anpassen der WooCommerce-Produktkategorieseite
Wählen Sie eine Struktur

Notiz: Sie können den gleichen Vorgang wiederholen, um andere Layouts auszuwählen.

Verwandt: So passen Sie die WooCommerce-Produktseite an

Schritt #4: Ziehen Sie ShopEngine-Widgets per Drag-and-Drop und passen Sie die Einstellungen an

ShopEngine bietet mehr als 8 dedizierte Widgets zum Erstellen benutzerdefinierter WooCommerce-Archivseiten. Diese Kategorieseiten-Widgets sind

  • Archivbeschreibung
  • Archivprodukte
  • Archivtitel
  • Anzahl der Archivergebnisse
  • Archivansichtsmodus
  • Nach Filter sortieren
  • Produkte pro Seitenfilter
  • Produktliste
  • Produktfilter

Ich werde einige davon verwenden. Sie können alle verwenden, um die Produktkategorieseite von Elementor WooCommerce zu bearbeiten. Zuvor müssen Sie jedoch sicherstellen, dass alle Widgets aktiviert und zur Verwendung verfügbar sind. 

Sie können die Widgets über aktivieren/aktivieren ShopEngine ⇒ Widgets. Hier Schalten Sie alle Widgets ein oder diejenigen, die Sie verwenden werden und schließlich Klicken Sie auf die Schaltfläche „Änderungen speichern“, um den Status zu aktualisieren.

Aktivieren Sie alle ShopEngine-Kategorieseiten-Widgets
Aktivieren Sie alle ShopEngine-Kategorieseiten-Widgets

Ich werde mich für eins entscheiden einspaltiges Layout Und Ziehen Sie die Widgets „Erweiterte Suche“ und „Archivergebniszählung“ per Drag-and-Drop.

Drag-and-Drop-Such- und Ergebniszähl-Widget für die WooCommerce-Kategorieseite. So passen Sie die WooCommerce-Kategorieseite an
Ziehen Sie die Widgets „Erweiterte Suche“ und „Archivergebniszählung“ per Drag-and-Drop

Sie können das Widget auswählen und die zugehörigen Einstellungen anpassen. Wenn Sie beispielsweise im linken Bereich auf das Widget „Erweiterte Suche“ klicken, erhalten Sie Optionen wie Produktspalte, Kategorie im Suchergebnis anzeigen, Kategorie-Dropdown anzeigen, Text für alle Kategorien, Suchsymbol usw.

Passen Sie das WooCommerce-Widget für die erweiterte Suche an
Passen Sie das WooCommerce-Widget für die erweiterte Suche an

Im nächsten Abschnitt werde ich nun die in Schritt 3 beschriebenen Schritte verwenden, um ein neues Layout mit zwei Spalten einzufügen. Ziehen Sie dann die Widgets „Produktfilter“ und „Produkte archivieren“ per Drag-and-Drop.

Durch Ziehen und Ablegen von Produktfiltern und Archivieren von Produkt-Widgets können Sie die WooCommerce-Archivseite anpassen
Wählen Sie eine neue Elementor-Struktur aus

Notiz: Der Das Produktfilter-Widget ist nur mit ShopEngine Pro verfügbar. Stellen Sie also sicher, dass Sie ShopEngine Pro installiert und aktiviert haben.

Sie können filterbezogene Optionen wie Preisfilter, Bewertungsfilter, Farbfilter, Kategoriefilter usw. anpassen. Darüber hinaus können Sie layoutbezogene Optionen wie Filteransichtsmodus, Container-Umschaltschaltfläche aktivieren, Spalten (pro Zeile) usw. anpassen . Sie können bei Bedarf auch eine benutzerdefinierte Attributliste hinzufügen.

Anpassen des Produktfilter-Widgets zum Anpassen der WooCommerce-Kategorieseite
Passen Sie das Widget „Produktfilter“ an

Sie können die Layouteinstellungen für Archivprodukte über die WooCommerce-Layoutoption ändern. Weitere Informationen zum Ändern der Layoutoption finden Sie hier Dok. Darüber hinaus können Sie Inhaltseinstellungen wie Flash-Sale-Abzeichen, Kategorien anzeigen, Beschreibungsbewertung anzeigen usw. personalisieren. Sie können auch ein benutzerdefiniertes Paginierungssymbol und eine benutzerdefinierte Reihenfolge der CTA-Schaltfläche auswählen, z. B. „In den Warenkorb“, „Zur Wunschliste hinzufügen“, „Schnellansicht“ usw .

Passen Sie das Widget „Archivprodukte“ an

Verwandt: So passen Sie die Seite „Mein Konto“ von WooCommerce an

Schritt #5: Passen Sie die Stileinstellungen der WooCommerce-Archivseite an

Sobald Sie mit Ihren benutzerdefinierten Layouts und personalisierten Widgets fertig sind, ist es an der Zeit, das Aussehen zu ändern, indem Sie die Stileinstellungen dieser Widgets ändern. Um die Stileinstellungen zu ändern, müssen Sie auf das Widget klicken und im Bedienfeld zur Registerkarte „Stil“ wechseln, um auf alle Stileinstellungen zuzugreifen. Werfen wir einen Blick auf die Stiloption für die in diesem Tutorial verwendeten Widgets:

Erweiterte Suche:  Sie können verschiedene Optionen des Suchformulars, des Suchsymbol-/Textstils, des Kategoriestils, des Produktstils, der Schaltfläche „Weitere Produkte“ und der globalen Schriftart anpassen. 

Ändern Sie die Stileinstellungen des erweiterten Such-Widgets, um die WooCommerce-Kategorieseite anzupassen
Ändern Sie die Stileinstellungen des erweiterten Such-Widgets

Anzahl der Archivergebnisse: Sie können die Ausrichtungs-, Farb- und Typografieoptionen anpassen.

Ergebniszähl-Widget von elementsKit
Ändern Sie die Stileinstellungen des Widgets „Archivergebnisanzahl“.

Produktfilter: Optionen zum Gestalten des Produktfilterbereichs finden Sie in verschiedenen Kategorien, z. B. „Gemeinsame Stile“, „Preisfilter/Bereichsschieberegler“, „Bewertungsfilter“ und „Kategoriefilter“.

Einstellungen für den Produktfilterstil zum Bearbeiten der WooCommerce-Produktkategorieseite in WordPress
Passen Sie die Stiloptionen des Produktfilter-Widgets an

Archivprodukte: Sie können die Stileinstellungen des Archivprodukts personalisieren, indem Sie die Optionen in Abschnitten wie Produktcontainer, Produktbild, Produktkategorien, Produkttitel, Produktpreis, Off-Tag, Schaltfläche „In den Warenkorb“, Bewertung, Flash-Sale und Paginierung anpassen.

Archivieren Sie die Produktstileinstellungen, um die Kategorieseite von Elementor WooCommerce zu bearbeiten
Passen Sie den Stil des Widgets „Archivprodukte“ an

Verwandt: So passen Sie die WooCommerce-Warenkorbseite an

Schritt #6: Aktualisieren Sie die benutzerdefinierte WooCommerce-Kategorieseitenvorlage und zeigen Sie eine Vorschau an

Nachdem Sie die Stilanpassung abgeschlossen haben, klicken Sie zum Speichern auf die Schaltfläche „Aktualisieren“. Jetzt können Sie entweder auf die Schaltfläche „Vorschau“ klicken, um die Vorschau anzuzeigen, oder eine beliebige Kategorieseite manuell aufrufen. Sie sollten dann sehen, dass die neue Vorlage wie in der Vorschau unten aktiviert ist:

Passen Sie die Vorschau der Kategorieseite an
Benutzerdefinierte WooCommerce-Kategorieseite mit ShopEngine

Dies war nun der Prozess der Erstellung einer benutzerdefinierten Kategorieseite für Ihren WooCommerce-Shop. Aber wie wäre es, wenn Sie für jede Kategorie Ihres Shops ein anderes Design erstellen würden? Nun, das können Sie auch mit ShopEngine tun. Um weitere Einzelheiten zu erfahren, fahren Sie mit dem nächsten Abschnitt fort.

Passen Sie WooCommerce mit ShopEngine an

Wie erstelle ich eine benutzerdefinierte WooCommerce-Archivseite für jede Kategorie separat?

Sie können für jede Kategorie oder nur für eine bestimmte Kategorie Ihres WooCommerce-Shops ein völlig anderes Design erstellen. Dafür bleibt der Prozess im Großen und Ganzen derselbe oben gezeigt. Aber in Schritt 2, Erstellen Sie eine KategorieseitenvorlageDu Das Feld „Anwendbare Kategorie“ darf nicht leer bleiben.

Du brauchst Wählen Sie die Kategorie im Feld „Anwendbare Kategorie“ aus für die Sie die von Ihnen erstellte Designvorlage anwenden möchten. Wenn Sie beispielsweise ein Design erstellen möchten, das nur auf die Kategorie „Musik“ anwendbar sein soll, wählen Sie im Feld „Anwendbare Kategorie“ die Option „Musik“. 

Erstellen Sie mit ShopEngine eine andere Archivseite für jede WooCommerce-Kategorie

Die restlichen Schritte entsprechen dem Erstellen eines allgemeinen Kategorievorlagendesigns, wie im gezeigt Abschnitt oben.

Notiz:  Wenn Sie eine Archivvorlage für eine bestimmte Kategorie erstellen, wird dies der Fall sein gelten nur für diese Kategorieseite und nicht für die übrigen Kategorieseiten.
Für die restlichen Kategorien müssen Sie eine andere Kategorievorlage erstellen, bei der das Feld „Anwendbare Kategorie“ für alle Kategorien leer ist, oder eine andere für jede Kategorie. Andernfalls verfügen die restlichen Kategorien über die standardmäßige WooCommerce-Archivvorlage oder die Vorlage, die Ihr aktiviertes Theme bietet.

verschiedene WooCommerce-Archivseitenvorlagen mit ShopEngine – dem ultimativen WooCommerce-Builder

Hier ist eine Vorschau verschiedener WooCommerce-Kategorieseiten mit unterschiedlichem Design, die mit ShopEngine erstellt wurden:

Vorschau verschiedener benutzerdefinierter WooCommerce-Kategorieseiten für jede Kategorie mithilfe von ShopEngine

Notiz: Die Option, unterschiedliche Vorlagen/Designs für unterschiedliche Kategorien Ihrer WooCommerce-Site zu erstellen, ist nur in der Pro-Version von ShopEngine verfügbar.

Bonus: 5 Möglichkeiten zur Optimierung der WooCommerce-Kategorieseite, um die Conversion-Rate zu erhöhen 

Hier sind einige nützliche Tipps, die Sie befolgen können, um Ihre WooCommerce-Archivseite zu optimieren Conversion-Rate steigern:

Stellen Sie eine Produktfilteroption bereit

Fügen Sie Produktfilter hinzu, um die Konvertierung zu steigern
Produktfilter auf der WooCommerce-Kategorieseite

Auf Ihrer Kategorieseite werden standardmäßig alle Produkte dieser Kategorie angezeigt. Normalerweise suchen Menschen jedoch nach einem Produkt mit einer bestimmten Farbe oder Größe oder einem anderen Merkmal.

Daher sollten Sie die Möglichkeit bieten, die Anzahl der Produkte einer Kategorie nach ihrem bevorzugten Attribut zu filtern und einzugrenzen. Auf diese Weise können die Leute ihre Produkte leicht finden, und das wird Ihnen dabei helfen Steigern Sie Ihren Umsatz.

Überprüfen Sie auch So fügen Sie in 5 Schritten den Währungsumschalter zur WooCommerce-Website hinzu

Produktvergleichsoption hinzufügen

Fügen Sie einen Produktvergleich hinzu und erfahren Sie, wie Sie die WooCommerce-Kategorieseite in WordPress anpassen
Produktvergleichsoption auf WooCommerce

Hinzufügen eines Produktvergleich Die Option zu Ihrem WooCommerce hilft Verbrauchern, Produkte ähnlicher Art zu vergleichen. Diese Option wird insbesondere dann benötigt, wenn Sie digitale Produkte wie Handys, Uhren usw. anbieten.

Die Produktvergleichsmöglichkeit hilft Kunden, schneller eine Entscheidung zu treffen. Und das wird Ihnen helfen, Ihr Ziel höherer Umsätze schnell zu erreichen.

Schaltfläche „Wunschliste“.

Passen Sie die Wunschliste der WooCommerce-Archivseite an, um die WooCommerce-Kategorieseite anzupassen
Schaltfläche „Wunschliste“ auf der Kategorieseite

Wunschzettel bietet die Möglichkeit, Produkte zum späteren Kauf in den Warenkorb zu legen. Manche Leute finden, dass die Wunschliste nicht so effektiv ist, wenn es um die Konvertierung geht. Aber ehrlich gesagt ist es sehr effektiv.

Denn normalerweise fügen Menschen Produkte zu ihrer Wunschliste hinzu, wenn ihnen das Produkt wirklich gefällt, sie es aber aus irgendeinem Grund nicht sofort kaufen können. Das heißt aber nicht, dass diese Person die Produkte später nicht kaufen wird.

In den meisten Fällen neigen Menschen dazu, Produkte zu kaufen, die sie auf ihre Wunschliste gesetzt haben. Fügen Sie also eine Wunschlistenoption auf Ihrer WooCommerce-Kategorieseite hinzu.

Schnellansicht-Option

Fügen Sie eine Schnellansicht hinzu, um die Conversion-Rate der Kategorieseite mithilfe der benutzerdefinierten Kategorieseitenvorlage von Woocommerce zu steigern
Schnellansichtsoption auf der WooCommerce-Archivseite

Hinzufügen eines Schnellansicht Die Schaltfläche sorgt für ein großartiges Benutzererlebnis, da Benutzer keine separaten Seiten besuchen müssen, um mehr über ein Produkt zu erfahren. Mit dieser Schnellansichtsoption kann Ihr Kunde auf der Kategorieseite bleiben und mit nur einem Klick Details zu Produkten erfahren.

Wenn Nutzer eine Produktseite aufrufen müssen, um sie anzuzeigen, können sie Ihre Website verlassen, ohne das Produkt zu kaufen, falls ihnen das Produkt nicht gefällt. Wenn Sie jedoch die Schnellansichtsoption bereitstellen, damit Kunden mehrere Produkte ausprobieren können, während sie auf derselben Seite bleiben, erhöht dies das Einkaufserlebnis. Dadurch können Sie den Umsatz Ihres Geschäfts steigern.

Onpage-SEO-Optimierung

On-Page-SEO

Kategorieseiten sind der Indikator für die Seitenhierarchie auf Ihrer Website. Also, Optimierung Ihrer Kategorieseite für Suchmaschinen sollte niemals vernachlässigt werden. Denn während Sie möchten, dass Ihre Startseite und Ihre Produktseite ein Ranking erhalten, kann Ihnen Ihre Kategorieseite, wenn sie rankt, auch viel Traffic bescheren.

Je mehr Verkehr Sie auf Ihrer Website haben, desto größer ist Ihre Chance, mehr Conversions zu erzielen. Stellen Sie also sicher, dass Sie die richtigen SEO-Metadaten hinzufügen, interne und externe Links optimieren, die URL optimieren usw. Sie können Hilfe von SEO-Plugins in Anspruch nehmen wie Rangmath, Yoast SEO usw.

Denken Sie, dass alle Punkte gültig erscheinen, aber benötige ich mehrere Plugins, um diese Optionen zu meiner Website hinzuzufügen und die Konvertierung zu steigern?

Nun, Sie brauchen sich keine Sorgen zu machen. Denn ShopEngine ist nicht nur ein fantastischer WooCommerce-Customizer mit einer Fülle von WooCommerce-Widgets, es bietet auch 13+ Module wie Wunschliste, Schnellkauf, Produktvergleich usw.

Darüber hinaus können Sie mit diesem Plugin Ihren kompletten WooCommerce-Shop anpassen. Mit diesem Kategorieeditor können Sie alle Ihre WooCommerce-Seiten bearbeiten; von dem Shop-Seite Zu Danke Seite. Sehen Sie sich das Video an, um mehr über die umfangreichen Funktionen zu erfahren, die ShopEngine zu bieten hat.

ShopEngine – Der ultimative WooCommerce Builder

Andere WooCommerce-bezogene Blogs:

👉 So fügen Sie ein erweitertes benutzerdefiniertes WooCommerce-Checkout-Feld hinzu
👉 Beste Warenkorb-Plugins für WooCoomerce
👉 So beheben Sie den WooCommerce-Fehler „Leerer Warenkorb“.
👉 So fügen Sie WooCommerce Multi Step Checkout hinzu

Abschließende Worte zur benutzerdefinierten WooCommerce-Kategorieseite

Eine Kategorieseite ist eine wichtige Seite sowohl für Ihre Kunden als auch für Suchmaschinen. Das Anpassen und Optimieren Ihrer Kategorieseiten kann Ihnen nur zu mehr Erfolg in Ihrem E-Commerce-Geschäft verhelfen. 

Das Gute daran ist, dass Sie jetzt wissen, wie Sie die WooCommerce-Kategorieseite in WordPress anpassen und die Seite optimieren, um Ihre Conversion-Rate zu verdoppeln. Darüber hinaus wissen Sie jetzt, wie Sie benutzerdefinierte WooCommerce-Kategorieseiten für jede Kategorie separat erstellen.

Sie können den umfassendsten WooCommerce-Builder auf dem Markt namens ShopEngine nutzen, um die Kategorieseite Ihres eStores zu optimieren. Und Sie können sein Allround-WooCommerce-Plugin jetzt bei 20% OFF bekommen!

🔔 🔔 Zum Kauf ShopEngine Pro zu 20% weniger Preis Verwenden Sie den Gutscheincode Community20.

Also beeilen wir uns und treten Sie jetzt der Community der WooCommerce-Liebhaber bei!


Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert