WooCommerce – Eingabefeld im Frontend anzeigen

Plant man in seinem WooCommerce Shop individuell gestaltete Produkte zu verkaufen um den Kunden die Möglichkeit zu geben, eigene Angaben auf der Produktseite zumachen, benötigt man ein zusätzliches Eingabefeld im Frontend. In diesem Tutorial zeige ich, wie man ein Eingebfeld auf einer Produktseite hinzufügt und die Information im Warenkorb und den Bestelldetails anzeigen lässt.

Dieses Eingabefeld wird dem Kunden im Frontend angezeigt und als Metainformation zu einer Bestellung gespeichert und nicht wie in meinem Beitrag benutzerdefinerte Felder für WooCommerce als Metainformation für ein Produkt im Backend.

Um die Anpassungen durchzuführen, muss der gesamte Quellcode in die functions.php deines Child-Themes oder als eigenes Plugin gespeichert werden.

 

EingabefelD im Frontend Hinzufügen

Um das Eingabefeld auf der Produktseite anzuzeigen, benötigen wir den Hook „woocommerce_before_add_to_cart_button“. Mit diesem Hook legen wir die Position im Frontend fest, an welcher Stelle das Eingabefeld angezeigt wird.

 

Im nächsten Schritt prüft man, ob das Feld, bevor es in den Warenkorb gelegt wird, ausgefüllt wurde. Dazu benutzt man den Action-Hook „woocommerce_add_to_cart_validation“. Mit diesem Code kann man festlegen, das dass Produkt nur mit Gravur in den Warenkorb gelegt werden kann. Möchte man das Produkt auch ohne Gravur verkaufen, lässt man diesen Schritt einfach weg. Allerdings empfehle ich, bei Eingabefeldern im Frontend, die Eingabe immer zu validieren bevor das Produkt in den Warenkorb gelegt wird, um später keine bösen Überraschungen zu erleben.

 

Möchte man das Eingabefeld nur in einer bestimmten Kategorie anzeigen, muss man den Code um eine if-Anweisung erweitern. In diesem Beispiel wird das Feld nur in den Kategorien „Handyzubehör“ angezeigt. Den Inhalt der Funktion add_gravur_textfield() ersetzen wir durch diesen Code:

 

Wird das Feld nur in einer bestimmten Kategorie angezeigt, so darf auch nur in der jeweiligen Kategorie abgefragt werden, ob das Feld ausgefüllt wurde. Dazu ersetzen wird die Funktion gravur_validation() durch folgenden Code:

Nun wird die Notiz und das Eingabefeld im Frontend nur in der Produkt-Kategorie „Handyzubehör“ angezeigt.

 

Eingabefeld zu einer Bestellung speichern

Um nun den Wert zu speichern, nachdem der Kunde den Artikel in den Warenkorb gelegt hat, benutzt man den Hook „woocommerce_add_cart_item_data“.

Anzeigen der Gravur im Warenkorb

Eingabefeld im Frontend - Warenkorb

Um die Gravur im Warenkorb anzuzeigen, benutzt man den Filter woocommerce_get_item_data. Damit wird das Feld nun im Warenkorb ausgeben und der Kunde sieht die Gravur. Der Wert des Feldes wird in diesem Beispiel in der Variable $cart_item[‚gravur‘] gespeichert.

Anzeigen der Gravur am Ende der Bestellung

Eingabefeld im Frontend - Bestelldetails

Zum Schluss müssen wir noch die Gravur am Ende der Bestellung anzeigen lassen. Dazu den folgenden Code in die functions.php einfügen.

 

Wie man sieht, bietet auch hier WooCommerce eine recht einfache Lösung um es an jede Anwendung anzupassen. Mit ein wenig Quellcode hat man ein Eingabefeld im Frontend erstellt und kann dem Kunden eine weitere Kaufoption anbieten.

Hat euch der Beitrag gefallen oder habt ihr Verbesserungen oder Anmerkungen, dann hinterlasst doch einen Kommentar.

 

Schreibe einen Kommentar

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