Benutzerdefinierte Felder für variable Produkte – WooCommerce

Vor einiger Zeit schrieb ich bereits einen Beitrag, wie man Benutzerdefinierte Felder für WooCommerce erstellen kann. Dies funktioniert allerdings nicht für Varianten der variablen Produkte. Deswegen habe ich mich entschlossen, dieses Tutorial zu schreiben. Ich werde zeigen, wie man benutzerdefinierte Felder für Variable Produkte in WooCommerce anlegen kann.

Die richtigen Hooks

Um benutzerdefinierte Felder für variable Produkte zu erstellen benötigen wir zwei Hooks und einen Filter. Als erstes benutzen wir „woocommerce_variation_options“ um ein benutzerdefiniertes Feld innerhalb der Variante anzuzeigen. Es gibt noch weitere Hooks zum platzieren des Feldes innerhalb des Formular. Eine Liste findet ihr am Ende des Beitrags.

Damit unser Feld gespeichert und validiert werden kann, benutzen wir den Hook „woocommerce_save_product_variation“. 

Den Filter „woocommerce_available_variation“ benötigen wir später, um das Feld im Frontend auszugeben, wenn eine Produktvariante gewählt wurde.

Benutzerdefiniertes Feld Hinzufügen

In unserem Fall werde ich ein Textfeld hinzufügen. Um das Textfeld anzuzeigen, definieren wir als erstes die Funktion „add_fields_to_variation()“. In dieser Funktion wird der Code zum Anzeigen der benutzerdefinierten Felder hinzugefügt.

WooCommerce bringt von Haus aus, die wichtigsten Eingabefelder mit. Ich bin bereits auf alle Typen in meinem Beitrag Benutzerdefinierte Felder für WooCommerce eingegangen. Die dort angegebenen Eingabefelder funktionieren bei benutzerdefinierten Felder für variable Produkte genauso.

benutzerdefinierte Felder für variable Produkte speichern

Nun definieren wir die Funktion „save_variation_fields()“. Mit dieser Funktion speichern wir den Wert des Textfeldes in der Datenbank.

Zuerst prüfen wir mit „if( ! empty( $text_field ) )“, ob das benutzerdefinierte Feld einenWert enthält und dann schreiben wir es mit der WordPress Funktion update_post_meta() in die Datenbank unserer Website.

Auch das speichern der anderen Arten von Eingabefelder funktioniert für Varianten, wie in meinem Beitrag Benutzerdefinierte Felder für WooCommerce erklärt.

Ergebnis der Anpassungen

benutzerdefinierte Felder für variable Produkte

Nachdem wir den Code hinzugefügt und hochgeladen haben, wird unser Textfeld unter den Eigenschaften der Varianten angezeigt.

Feld an anderer Stelle einfügen

Will man das Feld nicht am Ende des Formulars für Varianteneigenschaften, sondern an einer anderen Stelle, kann man anstelle von ‚woocommerce_variation_options‘ auch einen der folgenden Hooks verwenden. Dazu ersetzt ihr einfach den eben genannten Teil durch einen der folgenden Hooks:

‚woocommerce_variation_options_pricing‘

zeigt das Feld unterhalb des Preises an

‚woocommerce_variation_options_inventory‘

wird zwischen Lagebestand und Lagerstatus ausgegeben. Nur sichtbar, wenn Lagerbestand verwaltet wird

‚woocommerce_variation_options_tax‘

platziert es nach der Steuerklasse und vor der Varianten Beschreibung

‚woocommerce_variation_options_download‘

nur wenn Variante herunterladbar ist, nach Downloadlimit

‚woocommerce_product_after_variable_attributes‘

Gibt das Feld am Ende des Formulars aus

Anzeigen des benutzerdefinierten Felds im Frontend

WooCommerce hat wp.template mit Version 2.5 eingeführt. Nun ist es einfacher, benutzerdefinierter Felder, basierend auf der Auswahl der Produktvariante anzuzeigen. Dazu benutzen wir den Filter „woocommerce_available_variation“. An diesen Filter übergeben wir die Funktion load_variation_text_field(). In der Funktion laden wir den Wert unseres Feldes aus der Datenbank.

Damit das Feld jetzt im Frontend angezeigt wird, müssen wir noch die das Template für die Varianten anpassen. Das entsprechende Template findet man im WooCommerce Plugin Verzeichnis unter /woocommerce/templates/single-product/add-to-cart/variation.php. Vorsicht, bearbeite die Datei nicht direkt, sonder kopiere sie. Füge die Datei variations.php in dein Child-Theme unter den Pfad /dein-theme/woocommerce/templates/single-product/add-to-cart/ ein. Wobei /dein-theme/ für den Verzeichnisnamen deines Themes handelt.

Wen das geschafft ist, kann man dort den Code zum Anzeigen des benutzerdefinierten Feld einfügen. Der Code sieht wie folgt aus:

Nun wird unser Textfeld im Frontend ausgegeben. Das Ergebnis sieht dann so wie in diesem kleinen Video aus.

Ich hoffe ich könnte euch zeigen, wie man benutzerdefinierte Felder für Varianten in WooCommerce hinzufügt und im Frontend ausgibt. Wenn euch der Beitrag gefallen und euch weitergeholfen hat, hinterlasst doch einfach einen netten Kommentar.

Schreibe einen Kommentar

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