Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Anzeigen von WooCommerce-Kategorien, Unterkategorien und Produkten in separaten Listen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Final product image
What You'll Be Creating

WooCommerce bietet Ihnen einige Optionen, was Sie auf Ihren Archivseiten anzeigen können:

  • Produkte
  • Kategorien (auf der Hauptseite des Shops) oder Unterkategorien (auf den Kategorieseiten)
  • sowohl Produkte als auch Kategorien.

Wenn ich ein Geschäft einrichte, wähle ich normalerweise die dritte Option: Produkte und Kategorien/Unterkategorien. Dies bedeutet, dass Besucher meines Shops entweder Produkte direkt von der Startseite auswählen oder ihre Suche verfeinern können, indem sie sich durch ein Produktkategorienarchiv klicken.

Bei diesem Ansatz gibt es jedoch einen Fehler: Er zeigt die Kategorien/Unterkategorien zusammen an, ohne Trennung zwischen den beiden. Dies bedeutet, dass das Layout etwas unordentlich aussehen kann, wenn Ihre Produktbilder andere Abmessungen als Ihre Produktbilder haben. Selbst wenn Ihre Bilder dieselbe Größe haben und eine der Zeilen auf der Archivseite sowohl Kategorien als auch Produkte enthält, lässt das Fehlen einer Schaltfläche "In den Warenkorb" für Kategorien diese Zeile unordentlich aussehen, da nicht alle Elemente die gleiche Abmessungen.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie Kategorien in einer separaten Liste anzeigen, bevor Sie Produkte anzeigen.

Dazu folgen wir vier Schritten:

  1. Identifizieren Sie den Code, den WooCommerce verwendet, um Kategorien und Unterkategorien auf Archivseiten auszugeben.
  2. Erstellen Sie ein Plugin für unseren Code.
  3. Schreiben Sie eine Funktion, um Kategorien oder Unterkategorien vor Produktlisten zu setzen.
  4. Gestalten Sie die Ausgabe.

Bevor Sie beginnen, benötigen Sie jedoch eine WooCommerce-Installation, in der einige Produkte hinzugefügt und Produktkategorien und Unterkategorien eingerichtet wurden.

Was werden Sie brauchen?

Um mitzumachen, benötigen Sie:

  • Eine Entwicklungsinstallation von WordPress.
  • Ein Code-Editor.
  • installiertes und aktiviertes WooCommerce.
  • hinzugefügte Produkte - Ich habe die Dummy-Produktdaten importiert, die mit WooCommerce geliefert werden. Einzelheiten dazu finden Sie in diesem Handbuch.
  • Ein WooCommerce-kompatibles Thema wurde aktiviert - ich verwende Storefront.

Bevor wir beginnen: Die Standardoptionen

Werfen wir einen Blick darauf, was WooCommerce uns standardmäßig bietet.

Ich habe zunächst einige Bilder zu meinen Produktkategorien und Unterkategorien hinzugefügt, da die WooCommerce-Dummy-Daten diese nicht enthalten. Ich habe einfach ein Bild von einem der Produkte aus jeder Kategorie oder Unterkategorie verwendet, wie Sie im Screenshot sehen können:

Product categories screen in WordPress admin with category images added

Schauen wir uns nun an, wie WooCommerce die Produktkategorien und Produkte auf Archivseiten anzeigt.

Wenn Sie dies noch nicht getan haben, gehen Sie zu WooCommerce > Einstellungen, wählen Sie die Registerkarte Produkte und dann die Option Anzeige. Wählen Sie für jede der Optionen zur Anzeige der Shop-Seite und zur Anzeige der Standardkategorie die Option Beide anzeigen aus:

WooCommerce product display settings screen

Klicken Sie auf die Schaltfläche Änderungen speichern, um Ihre Einstellungen zu speichern und die Shop-Seite Ihrer Website zu besuchen. Meins sieht so aus:

The main shop page without any changes

Da ich drei Produktkategorien habe und meine Kategoriebilder dieselbe Größe wie meine Produktbilder haben, sieht es ganz ordentlich aus. Aber hier ist eines der Archive der Produktkategorie:

The Music category archive page without any changes

Da diese Kategorie zwei Unterkategorien hat, wird neben ihnen das erste Produkt in einem Raster mit einer Breite von drei Elementen angezeigt. Ich möchte meine Kategorien und Unterkategorien bekannter machen und sie einfach getrennt von den Produktlisten präsentieren. Also lass uns das machen.

Identifizieren des Codes, den WooCommerce zur Ausgabe von Kategorien und Produkten in Archiven verwendet

Der erste Schritt besteht darin, zu ermitteln, wie WooCommerce Kategorien und Unterkategorien ausgibt. Schauen wir uns also den WooCommerce-Quellcode an, um die entsprechende Funktion zu finden.

Die Datei, die WooCommerce zum Anzeigen von Archivseiten verwendet, ist archive-product.php, die sich im templates ordner befindet.

In dieser Datei finden Sie diesen Code, der die Kategorien und Produkte ausgibt:

Es gibt also eine woocommerce_product_subcategories() -Funktion, die die Kategorien oder Unterkategorien ausgibt, bevor die Schleife ausgeführt wird, die die Produkte ausgibt.

Die Funktion ist steckbar, was bedeutet, dass wir sie in unserem Thema überschreiben können. Leider funktioniert das nicht ganz, da WooCommerce über ein integriertes Design zum Löschen von Elementen verfügt, das am Anfang einer Zeile mit der Standardanzeige angezeigt wird.

Stattdessen deaktivieren wir die Anzeige von Kategorien und Unterkategorien auf unseren Archivseiten, sodass nur Produkte angezeigt werden. Anschließend erstellen wir eine neue Funktion, die die Produktkategorien oder Unterkategorien ausgibt, und verknüpfen sie mit der Aktion woocommerce_before_shop_loop. Dabei stellen wir sicher, dass wir eine hohe Priorität verwenden, damit sie nach den Funktionen ausgelöst wird, die bereits mit dieser Aktion verknüpft sind.

Hinweis: Da WooCommerce jeder dritten Produktliste Clearings hinzufügt, können wir die Funktion woocommerce_product_subcategories() oder eine bearbeitete Version davon nicht zum Anzeigen der Kategorien verwenden. Dies liegt daran, dass die dritte, sechste (oder so weiter) Kategorie oder das aufgelistete Produkt gelöscht wird, selbst wenn wir diese Funktion verwenden, um Kategorien separat anzuzeigen. Wir könnten versuchen, das zu überschreiben, aber es ist einfacher, nur unsere eigene Funktion zu schreiben.

Erstellen wir also ein Plugin, das das macht.

Plugin erstellen

Erstellen Sie in Ihrem Verzeichnis wp-content/plugins einen neuen Ordner und geben Sie ihm einen eindeutigen Namen. Ich rufe meine tutsplus-separate-products-categories-in-archives an. Erstellen Sie darin eine neue Datei mit einem eindeutigen Namen. Ich verwende den gleichen Namen: tutsplus-separate-products-categories-in-archives.php.

Öffnen Sie Ihre Datei und fügen Sie diesen Code hinzu:

Möglicherweise möchten Sie die Autorendetails bearbeiten, da dies Ihr Plugin ist, das Sie schreiben. Speichern Sie Ihre Datei und aktivieren Sie das Plugin über den WordPress-Administrator.

Unsere Funktion schreiben

Schreiben wir nun die Funktion. Deaktivieren Sie jedoch vor dem Start die Kategorielisten in den Administrationsbildschirmen. Gehen Sie zu WooCommerce > Einstellungen, wählen Sie die Registerkarte Produkte und dann die Option Anzeige. Wählen Sie für jede der Optionen zur Anzeige von Shop-Seiten und zur Anzeige von Standardkategorien die Option Produkte anzeigen aus. Speichern Sie Ihre Änderungen.

Ihre Shop-Seite sieht nun ungefähr so aus:

The main shop page with just products displayed

Fügen Sie in Ihrer Plugin-Datei Folgendes hinzu:

Fügen Sie nun diesen Code in die Funktion ein:

Werfen wir einen Blick darauf, was diese Funktion bewirkt:

  • Es identifiziert das aktuell abgefragte Objekt und definiert seine ID als $parentid.
  • Es verwendet get_terms(), um Begriffe mit dem aktuell abgefragten Element als übergeordnetem Element zu identifizieren. Wenn dies die Hauptseite des Shops ist, werden Kategorien der obersten Ebene zurückgegeben. Wenn dies ein Kategoriearchiv ist, werden Unterkategorien zurückgegeben.
  • Anschließend wird geprüft, ob Begriffe vorhanden sind, bevor eine foreach-Schleife und ein ul-Element geöffnet werden.
  • Für jeden Begriff wird ein li-Element erstellt und anschließend das Kategoriebild mit woocommerce_subcatgeory_thumbnail() ausgegeben, gefolgt vom Kategorienamen in einem Link zu seinem Archiv.

Speichern Sie nun Ihre Datei und aktualisieren Sie die Hauptseite des Shops. Meins sieht so aus:

Main shop page - categories are separate but too big and with list styling bullets etc

Die Kategorien werden angezeigt, müssen jedoch gestylt werden. Lass uns das als nächstes machen.

Gestaltung der Kategorielisten

Damit wir Styling hinzufügen können, benötigen wir ein Stylesheet in unserem Plugin, das wir in die Warteschlange stellen müssen.

Erstellen Sie in Ihrem Plugin-Ordner einen Ordner mit dem Namen css und erstellen Sie darin eine Datei mit dem Namen style.css.

Fügen Sie dies nun in Ihrer Plugin-Datei über der bereits erstellten Funktion hinzu:

Dadurch wird das soeben erstellte Stylesheet korrekt in die Warteschlange gestellt.

Öffnen Sie nun Ihr Stylesheet und fügen Sie den folgenden Code hinzu. WooCommerce verwendet Mobile First Styling, das werden wir also auch verwenden.

Ich habe die genauen Breiten und Ränder aus dem von WooCommerce verwendeten Styling kopiert.

Überprüfen Sie nun erneut Ihre Hauptshop-Seite. Hier ist meins:

The main shop page Categories are above products and styled consistently in a grid

Hier ist das Archiv der Kategorie Musik:

The Music archive Two subcategories are above the 3 wide grid of products

Und so sieht es auf kleineren Bildschirmen aus:

The categories on narrower screens full width not in a grid

Zusammenfassung

Produktkategorien sind eine großartige Funktion von WooCommerce, aber die Art und Weise, wie sie angezeigt werden, ist nicht immer ideal. In diesem Tutorial haben Sie gelernt, wie Sie ein Plugin erstellen, das Produktkategorien oder Unterkategorien getrennt von den Produktlisten ausgibt, und anschließend Ihre Kategorielisten gestaltet.

Mit diesem Code können Sie eine Liste von Kategorien oder Unterkategorien an anderer Stelle auf der Seite ausgeben (z. B. unter den Produkten), indem Sie die Funktion mit einem anderen Aktions-Hook in der WooCommerce-Vorlagendatei verknüpfen.

Wenn Sie derzeit einen Shop betreiben, den Sie erweitern möchten, oder nach zusätzlichen Plugins suchen, die Sie in Bezug auf WooCommerce studieren können, zögern Sie nicht, zu prüfen, welche Plugins in Envato Market verfügbar sind.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.