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.

 

10 Antworten auf „WooCommerce – Eingabefeld im Frontend anzeigen“

  1. Hallo,
    vielen Dank für das Script ich sollte das Eingabefeld aber nur dann anzeigen, wenn bei meinem Variablen Produkt eine bestimmte Auswahl getroffen wurde.

    z.B. Im Attributfeld „Ausführung“ gib es zur Auswahl: Standard / Modified
    nur wenn der Kunde Modified ausgewählt hat soll das Textfeld angezeigt werden.
    Optimal wäre auch dann wenn es ein Plichtfeld wäre.

  2. Hallo, ich habe den gesamte Quellcode wie du es in den einzelen Schritten beschrieben hast am Ende meiner funktioc.php rein kopiert und gespeichert. Leider kann ich nun ich mehr auf meine HP zugreifen weil er mir eine Fehlermeldung bringt.
    Ich habe dan Namen gravur durch wunschtext ersetzt.
    Fehlermeldung:
    Parse error: syntax error, unexpected ‚wunschtext_validation‘ (T_STRING) in /homepages/13/d501273719/htdocs/wp-content/themes/betheme2/functions.php on line 188

    Kannst dur mir da weiterhelfen was ich falsch gemacht haben?
    Danke

    1. Hi,

      da hast du wohl einen Tipp-Fehler gemacht.
      Schau mal in der functions.php, ob in Zeile 188 ein Apostroph fehlt oder ein ähnlicher Syntaxfehler besteht.
      Vergleich den Code nochmal mit dem Tutorial. Es kann auch sein, das der Fehler in einer der darüber liegenden Zeilen ist. Da hilft nur suchen oder alles nochmal neu machen.

      Mfg

      1. Hallo , habe nochmals alles eingefügt jeden code hintereinander.
        aber bekomme eine neue Fehlermeldung:
        Fatal error: Cannot redeclare add_wunschtext_textfield() (previously declared in /homepages/13/d501273719/htdocs/wp-content/themes/betheme2/functions.php:182) in /homepages/13/d501273719/htdocs/wp-content/themes/betheme2/functions.php on line 208

      2. Hallo,

        die Funktion add_wunschtext_textfield() wird 2x mal declariert. Wie in der Fehlermeldung steht, wird add_wunschtext_textfield() in Zeile 182 deklariert und in Zeile 208. Ich nehme mal an, das die Funktion in Zeile 188 nicht benötigst, da du das Eingabefeld sicher nur in einer bestimmten Kategorie anzeigen lassen willst und nicht in allen Produkten.

        M.f.G.

      3. Hallo, habe alles noch mal genau geprüft und neu eingebaut, alle codes in der Reihenfolge wie sie hier sind.
        Er bringt mir dann diesen Fehler:

        Fatal error: Cannot redeclare add_wunschtext_textfield() (previously declared in /homepages/13/d501273719/htdocs/wp-content/themes/betheme2/functions.php:185) in /homepages/13/d501273719/htdocs/wp-content/themes/betheme2/functions.php on line 211

        keine Ahnung wo der Fehler ist?

      4. Hallo,

        habe ein teil Problem gefunden.
        Bei dem Code wo ich die Kategorie wähle, sage ich die richtige Kategorie aber er übernimmt diese nicht. ohne dem Code wird das Feld zwar angezeigt aber wenn ich was eingeben und dann auf Warenkorb gehen, übernimmt er den text nicht und weiß drauf hin das man einen text eingeben muss. Aber der Code ist richtig drin für Save.

      5. Hallo,

        habe die If Anweisung für die Kategorie weggelassen dann wird es mir Angezeigt. Text eingeben ist möglich und er gibt auch kein Fehler ein wenn ich es in den Warenkorb verschiebe. Nur zeigt er mir nun nicht das Feld im Warenkorb an mit dem text und am ende der Bestellung auch nicht? Weil fehlermeldung kommt auch nicht. Was habe ich falsch gemacht?
        danke

      6. Was mich jetzt wundert, wenn ich als Admin angelogt bin sehe ich das Textfeld wenn ich mich wieder abmelde und als normaler User drauf bin sehe ich das Feld nicht mehr?

Schreibe einen Kommentar

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