Wie man ein benutzerdefiniertes WooCommerce-Kategorieseitendesign erstellt
Suchen Sie nach einer Alternative zum standardmäßigen WooCommerce-Kategorieseitendesign in Ihrem WordPress-Theme? Durch die Erstellung eines benutzerdefinierten Designs für Ihre WooCommerce-Produktkategorien können Sie ein optimiertes Einkaufserlebnis bieten, was sich positiv auf den Gewinn Ihres Shops auswirken kann.
Mit dem richtigen Plugin muss die Erstellung eines benutzerdefinierten WooCommerce-Kategorieseitenlayouts auch nicht schwierig sein. Das werden wir Ihnen in diesem Beitrag zeigen. Wir zeigen Ihnen, wie Sie ein benutzerdefiniertes tabellenbasiertes Layout für Ihre WooCommerce-Kategorien erstellen können. Damit haben Sie die Kontrolle darüber, welche Informationen angezeigt werden und wie Kunden mit Ihren Produkten interagieren.
Hier ist ein Beispiel dafür, was Sie in diesem Beitrag erstellen werden:
Wir beginnen mit einigen der Vorteile dieses Tabellenansatzes. Dann werden wir in einer Schritt-für-Schritt-Anleitung, wie es in Ihrem eigenen WooCommerce-Shop mit dem WooCommerce Product Table Plugin zu tun bekommen.
Die Vorteile eines Tabellenlayouts für Ihre Kategorieseiten
Das genaue Design der Kategorieseite Ihres eCommerce-Shops hängt zwar von Ihrem WordPress-Theme ab, aber die meisten Themes sehen in etwa so aus:
Dieses Layout ist für einige Situationen gut geeignet, schränkt aber die Anzahl der Produkte ein, die Sie anzeigen können. Es schränkt auch ein, wie viele Informationen Sie über jedes Produkt bereitstellen können (obwohl das Hinzufügen von Schaltflächen für die Produktschnellansicht eine Möglichkeit ist, dies zu mildern).
Woo Multistore hat darüber geschrieben, wie wichtig es ist, die WooCommerce-Kategorieseite so zu gestalten, dass die Konversionsrate steigt. Ein Tabellenlayout hilft Ihnen, die Mängel zu überwinden, indem mehr Produkte und Informationen in einem kompakten Layout angezeigt werden, das am Ende weniger Platz benötigt, sowie zusätzliche Navigationsfunktionen wie Suche und Filterung.
Das bedeutet, dass Sie mehr Ihrer Produkte/Produktdetails vor die Augen der Kunden bringen können, was sicherstellt, dass sie Ihren gesamten Katalog sehen können und die Wahrscheinlichkeit eines Kaufs erhöht.
Sie werden auch SEO-Vorteile bei Suchmaschinen sehen, da Sie mehr benutzerdefinierte Inhalte auf einer vollständig benutzerdefinierten Seite (oder auch Landing Pages) anzeigen können. So können Sie relevante Produkte anzeigen und auch kontextbezogenen Text hinzufügen. All dies sollte mit höheren Rankings belohnt werden.
Diese Art von Layout kann zwar für alle Arten von E-Commerce-Geschäften von Vorteil sein, ist aber besonders hilfreich für:
- Großhandelsgeschäfte
- Digitale Dateien (Videos, Audiodateien, E-Books usw.)
- Restaurants
- Produktkataloge
- …und vieles mehr!
Wie Sie mit WooCommerce Product Table ein benutzerdefiniertes WooCommerce-Kategorieseitendesign erstellen
Ein weiterer Vorteil der Verwendung eines Tabellenlayouts für Ihr WooCommerce-Kategorieseitendesign ist, dass Sie alles einrichten können, ohne spezielle technische Kenntnisse zu benötigen.
Dazu verwenden Sie das WooCommerce Product Table Plugin. Dieses Plugin listet Ihre WooCommerce-Produkte in einem flexiblen Tabellenlayout auf, das Sie steuern, und bietet die Möglichkeit, Filter, Suchfelder, Paginierung und mehr hinzuzufügen.
Sie können das Plugin auch verwenden, um nur Produkte aus bestimmten Kategorien oder Unterkategorien anzuzeigen. WooCommerce Product Table bietet dafür zwei Möglichkeiten:
- Sie können das Layout der Produkttabelle zentral auf allen Produktkategorieseiten aktivieren. (Ideal, wenn Sie alle Ihre Produktkategorieseiten anpassen möchten.)
- Alternativ können Sie einen Shortcode verwenden, um Ihre eigenen WooCommerce-Kategorieseiten manuell zu erstellen. (Zum Beispiel, wenn Sie die Tabelle verwenden möchten, um nur Produkte aus bestimmten Kategorien aufzulisten.)
Nachfolgend zeigen wir Ihnen, wie Sie die WooCommerce-Produkttabelle einrichten, um beide Optionen zu erreichen.
WooCommerce-Produkttabelle konfigurieren
Nachdem Sie das WooCommerce-Produkttabellen-Plugin installiert und aktiviert haben, müssen Sie seine Standardeinstellungen konfigurieren.
Damit können Sie steuern, welche Informationen in Ihrer Produkttabelle angezeigt werden und wie alles funktioniert, z. B. ob bestimmte Produktattribute angezeigt werden oder nicht oder wie die Funktion „In den Warenkorb“ funktioniert.
Um loszulegen, gehen Sie zu WooCommerce → Einstellungen → Produkte → Produkttabellen, um auf die Einstellungen des Kategorie-Plugins zuzugreifen.
Es lohnt sich, alle verfügbaren Einstellungen durchzusehen und diejenigen auszuwählen, die für Ihre spezielle Situation geeignet sind. Wir werden jedoch nur die Grundlagen behandeln, die für die Gestaltung Ihrer WooCommerce-Kategorieseite unerlässlich sind.
Zuerst finden Sie die Einstellung Spalten unter dem Abschnitt Tabelleninhalt. Hier legen Sie fest, welche Informationen in Ihrer Tabelle angezeigt werden. Zusätzlich zur Anzeige der wichtigsten Produktinformationen können Sie auch Produktattribute, benutzerdefinierte Felder und mehr anzeigen.
Sie können hier eine vollständige Liste der Spaltenoptionen finden, aber diese Konfiguration ist eine gute Grundversion, die für die meisten Geschäfte funktioniert:
image, name, description, price, buy
Weiter unten finden Sie den Abschnitt „In den Warenkorb“, mit dem Sie die Schaltflächen „In den Warenkorb“ steuern können.
Um Großeinkäufe anzuziehen, können Sie Kontrollkästchen hinzufügen, die es den Käufern ermöglichen, mehrere Produkte in den Warenkorb zu legen. Sie können aber auch einfach jedem Produkt eine eigene Schaltfläche „In den Warenkorb“ hinzufügen (oder beides!):
Speichern Sie Ihre Änderungen, sobald Sie fertig sind.
Nachdem Sie die Produkteinstellungen konfiguriert haben, haben Sie zwei Möglichkeiten, Ihre eigentlichen WooCommerce-Kategorien zu erstellen. Wir sehen uns diese als nächstes an.
2a. Aktivieren von Produkttabellen auf allen Kategorieseiten
WooCommerce Product Table verfügt über eine Option, mit der das Layout der Produkttabelle automatisch zu allen Kategorieseiten hinzugefügt wird. Dies ist die einfachste Option und dauert nur eine Sekunde.
Auf der Plugin-Einstellungsseite aktivieren Sie einfach das Kästchen „Produktkategorienarchive“:
Dadurch wird das Tabellenlayout global für alle Kategorien aktiviert und ersetzt das Standardlayout, das mit Ihrem Theme geliefert wurde.
Erfahren Sie mehr über diese Methode.
2b. Verwenden Sie einen Shortcode, um Ihr eigenes WooCommerce-Kategorieseitendesign zu erstellen
Sie können auch einen Shortcode verwenden, um WooCommerce-Produkte nach Kategorien aufzulisten. Diese Option ist ideal, wenn Sie nicht das Produkttabellen-Layout für ALLE Ihre Kategorien verwenden möchten.
Fügen Sie einfach den Shortcode des Plugins zu einer normalen WordPress-Seite hinzu und geben Sie an, welche Kategorien Sie auflisten möchten. Wiederholen Sie den Vorgang so oft wie Sie möchten – einmal für jede Kategorie.
Mit dieser Methode erstellen Sie im Wesentlichen eine neue WooCommerce-Produktkategorieseite für jede Produktkategorie, die Sie anzeigen möchten, anstatt die WooCommerce-Kategorieseite global neu zu gestalten.
Sie können entweder Ihre bestehenden Kategorieseiten in Verbindung mit Ihrem neuen Tabellenlayout weiter verwenden. Oder Sie können einfach die Links zu jeder bestehenden Produktkategorieseite durch Ihre neuen tabellengesteuerten Kategorieseiten ersetzen. (Tipp: Wenn Sie die integrierten Kategorieseiten nicht mehr verwenden, leiten Sie sie auf die neuen Seiten um, auf denen Sie Produkttabellen verwenden.)
Um zu beginnen, gehen Sie zu Seiten → Neu hinzufügen, um eine einfache WordPress-Seite zu erstellen. Fügen Sie dann den [product_table] Shortcode zur Seite hinzu. Sie können auch einen Kategorietitel über das reguläre Titelfeld hinzufügen.
Standardmäßig zeigt der Shortcode alle Ihre WooCommerce-Produkte an.
Sie können jedoch den Shortcode-Parameter Kategorie verwenden, um Produkte aus bestimmten Kategorien und/oder Unterkategorien herauszufiltern. Sie können auch mehrere Kategorien kombinieren oder Bedingungen festlegen, z. B. dass ein Produkt in mehreren Kategorien oder Unterkategorien enthalten sein muss, um angezeigt zu werden.
Um beispielsweise Produkte aus der Kategorie „Stuhl“ herauszufiltern, könnten Sie den folgenden Shortcode verwenden:
[product_table category="chair"]
Wenn Sie ein Kategoriebild oder einen Kategorienamen hinzufügen möchten, können Sie dies auch über den Shortcode mit dem normalen WordPress-Editor tun.
Nachdem Sie die Seite veröffentlicht haben, sollten Sie das Design Ihrer neuen WooCommerce-Kategorieseite sehen:
Um Seiten für weitere WooCommerce-Kategorien zu erstellen, wiederholen Sie den Vorgang für jede Produktkategorie oder Unterkategorie, die Sie anzeigen möchten.
Machen Sie Ihre WooCommerce-Kategorien mit Filtern besser durchsuchbar
Wenn Sie Ihren WooCommerce-Kategorien mehr Such- und Filtertools hinzufügen möchten, haben Sie zwei Möglichkeiten:
- Sie können Such-, Sortier- und Filteroptionen über die Einstellungen der WooCommerce-Produkttabelle hinzufügen. Diese werden über oder unter Ihrer Produkttabelle angezeigt.
- WooCommerce Product Table enthält Widgets, mit denen Sie Ihrer Seitenleiste Filter hinzufügen können.
Sie können die von Ihnen bevorzugte Methode wählen, aber es ist auch völlig in Ordnung, beide Ansätze gleichzeitig zu verwenden. So können Ihre Kunden ihre bevorzugte Methode wählen.
Um Such-, Sortier- und Filteroptionen direkt zum Tabellenlayout hinzuzufügen, gehen Sie zu WooCommerce → Einstellungen → Produkte → Produkttabellen. Scrollen Sie dann nach unten zum Abschnitt Tabellensteuerungen und konfigurieren Sie die Optionen nach Ihren Wünschen:
Weitere Informationen finden Sie in diesem Hilfeartikel.
Um die Filter-Widgets zu verwenden, gehen Sie zu Darstellung → Widgets. Dort finden Sie vier neue Widgets mit dem Präfix „Produkttabelle:“. Sie können alle Widgets hinzufügen oder nur die spezifischen Filter auswählen, die Sie einbeziehen möchten:
Hier ist ein Beispiel dafür, wie beide Filtergruppen aussehen könnten:
So erstellen Sie ein benutzerdefiniertes WooCommerce-Kategorieseitendesign mit Code
Wenn Sie sich mit PHP, HTML und CSS auskennen, ist es auch möglich, ein benutzerdefiniertes WooCommerce-Kategorieseitendesign mit Code zu erstellen, ohne ein WooCommerce-Plugin.
Sie werden mit der Datei archive-product.php in Ihrem Theme oder Child-Theme arbeiten wollen. Sie können diesen Ansatz auch verwenden, um Ihre einzelnen Produktseiten über die Datei single-product oder andere Teile Ihrer Storefront zu bearbeiten.
Da Sie den Code in den Vorlagendateien Ihres Themes direkt bearbeiten müssen, um jede Änderung vorzunehmen, ist diese Methode für Nicht-Entwickler leider nicht geeignet. Wir empfehlen Ihnen, sich an Codeable zu wenden, wenn Sie Hilfe benötigen, oder sich an die einfachere Tabellenlayout-Methode oben zu halten.
Erstellen Sie noch heute Ihr individuelles WooCommerce-Kategorieseitendesign!
Mit dem Erstellen eines benutzerdefinierten WooCommerce-Kategorieseitendesigns können Sie Ihre Produkte auf eine kundenfreundlichere Art und Weise anzeigen.
Durch die Verwendung eines tabellenbasierten Kategorieseitenlayouts sind Sie in der Lage, mehr Produkte zusammen mit mehr Details zu jedem Produkt anzuzeigen.
Sie können auch viele hilfreiche Such- und Filteroptionen hinzufügen, um Ihren Kunden die Suche nach Produkten zu erleichtern.
Indem Sie Kunden effektiver mit den Produkten verbinden, die sie interessieren, können Sie mehr Produkte verkaufen und den Umsatz Ihres Shops steigern.
Um ein Tabellendesign für Ihre WooCommerce-Kategorien zu verwenden, können Sie das WooCommerce Product Table Plugin verwenden. Die Einrichtung ist einfach, und Sie benötigen keine besonderen technischen Kenntnisse, um loszulegen, wie Sie es tun würden, wenn Sie Ihre Archivvorlagendatei direkt bearbeiten wollten.
Legen Sie noch heute los und schaffen Sie eine effektivere Möglichkeit für Kunden, Produktkategorien in Ihrem WooCommerce-Shop zu durchsuchen.