Benutzerdefinierte Felder in Produktkategorie

In diesem Tutorial möchte ich zeigen, wie man Produkteigenschaften oder benutzerdefinierte Felder in einer Produktkategorie von WooCommerce anzeigen kann. Dies ist praktisch um Artikelnummern oder Eigenschaften wie Farbe, Größe, usw. anzeigen zu lassen. Zeitgleich schafft man dem Kunden einen schnellen Überblick über die wichtigsten Informationen zu einem Produkt, schnell zu erfassen und bei der Kaufentscheidung zu helfen.

Alle Anpassungen dieses Tutorials müssen in die functions.php eures Child-Themes oder besser noch in ein eigenständiges Plugin.

 

Der Hook

Um benutzerdefinierte Felder in den Kategorien von WooCommerce anzeigen zulassen, benutzt man den Hook woocommerce_after_shop_loop_item„. Dieser Hook lässt die benutzerdefinierten Felder nach dem Produkt in der Kategoriesicht anzeigen. In der Funktion ‚display_product_meta_in_category‘, wird der Code zum anzeigen des Feldes hinzugefügt.

Es gibt noch einige weitere Hooks zum platzieren der Daten. Eine allgemeine Übersicht findet ihr in der WooCoommerce Hook Reference.

 

Artikelnummer anzeigen

Als erstes wollen wir ein allgemeines Attribut anzeigen lassen, in diesem Fall, soll die Artikelnummer eingeblendet werden. Zuerst definieren wir die Funktion „display_product_meta_in_category()“. Danach rufen wir die Variable $product mit „global $product“  in unserer Funktion auf, um sie verwendbar zu machen. Um nun die Artikelnummer des Produktes anzuzeigen, lesen wir mit $product->get_sku() die Artikelnummer des Produktes aus und geben sie mit echo aus.

 

Nachdem hinzufügen des Codes zu unserer functions.php, sollte nun die Artikelnummer des Produktes in der Produktkategorie angezeigt werden. Das Ergebnis sollte je nach Theme ungefähr so aussehen:

Artikelnummer in Produktkategorie

Produktattribute in Kategorie anzeigen

Will man ein Produktattribut in der Kategorie anzeigen, muss vorher eine Eigenschaft unter WooCommerce -> Produkte angelegt werden. In diesem Beispiel heißt die Produkteigenschaft Federweg.

 

Produkteigenschaft in WooCommerce anlegen

 

Um nun auf das Produktattribut zuzugreifen, muss vor den slug noch „pa_“ geschrieben werden. Für unser Feld „Federweg“ lautet der Name des Feldes dann „pa_federweg“. Damit Produktattribute angezeigt werden können, muss vorher die Variable $product mit global $product; in unserer Funktion verfügbar gemacht werden. Da wir dies schon für die Artikelnummer getan haben, können wir für das Produktattribut darauf verzichten. Da sie bereits verfügbar ist.

 

 

Nun sollte unter der Artikelnummer das Produktattribut angezeigt werden. Das ganze sollte dann ungefähr so wie im Bild aussehen.

Artikelnummer und Produkteigenschaft in Produktkategorie

Benutzerdefinierte Felder in Produktkategorie anzeigen

Möchte man ein benutzerdefiniertes Feld in der Produktkategorie anzeigen, muss vorher ein benutzerdefinertes Feld angelegt werden. In unserem Beispiel hat das Benutzerdefinierte Feld den Key „varionstuetze“Wie man benutzerdefinierte Felder in WooCommerce anlegt,könnt ihr in meinem Beitrag „Benutzerdefinierte Felder für WooCommerce“.

Anders als bei Produktattributen, muss für ein benutzerdefinertes Feld auf die globale Variable $post zugegriffen werden, anstatt auf „global $product“. Dazu benutzen wir global $post. Dann greifen wir auf das benutzerdefinierte Feld genauso zu, wie in einem WordPress Beitrag, nämlich mit der WordPress Funktion get_post_meta( ) .

 

 

Nun sollte unser benutzerdefiniertes Feld „variostuetze“, wie im Bild, in der Produktkategorie angezeigt werden.

Benutzerdefiniertes Feld in Produktkategorie

Auch in diesem Fall lässt sich WooCommerce wieder einfach und schnell an die Bedürfnisse jedes Shops anpassen. Zusätzlich könnte man noch prüfen, ob die Felder einen Inhalt besitzen oder sie nur bestimmten Kategorien anzeigen. Noch ein wenig CSS drüber und fertig.

Bei Fragen oder wenn ihr ein Feedback zum Tutorial geben möchtet, freue ich mich natürlich über eure Kommentare.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.