Benutzerdefinierte Felder für WooCommerce

WooCommerce ist eines der besten eCommerce System für WordPress. Innerhalb weniger Minuten hat man sich einen OnlineShop erstellt und kann Sachen im Internet verkaufen. In diesem kleinem Tutorial möchte ich zeigen, wie man WooCommerce Produkte um benutzerdefinierte Felder erweitern kann und sie im Frontend ausgibt.

In diesem Artikel, erkläre ich wie man benutzerdefinierte Felder zu einem Produkt als Metainformation speichert. Das bedeutet, das man die Daten im Backend bearbeitet. Um benutzerdefinierte Felder im Frontend einfügt, erkläre ich in dem Artikel WooCommerce Eingabefelder im Frontend anzeigen. Den Code zum Einfügen der Meta Felder schreibe ich in die functions.php meines Themes.

Die richtigen Hooks

Um benutzerdefinierte Felder in WooCommerce einzufügen benötigt man zwei Hooks. Einmal „woocommerce_product_options_general_product_data“ um das benutzerdefinierte Feld anzuzeigen. Über diesen Hook bestimmen wir, unter welchen Produkt Tab die benutzerdefinierten Felder angezeigt werden. Und um den Wert des benutzerdefinierten Feld zu speichern benutzt man „woocommerce_process_product_meta“. Weiter unten im Beitrag, nenne ich noch die restlichen Hooks, um sich in die restlichen Produkt Tabs der WooCommerce Produkte einzuhaken.

 

Benutzerdefiniertes Feld Hinzufügen

Als ersten Schritt erstellt man eine Funktion um die benutzerdefinierten Felder dem Produkt Tab hinzuzufügen. Ich nenne die Funktion „add_fields_to_general_tab()“. In dieser Funktion, erstellt man seine Meta Felder, in die man seine zusätzlichen Daten schreiben möchte..

WooCommerce stellt verschiedene Eingabefelder zur Verfügung. Hier seht ihr eine Auflistung der wichtigsten Typen. für weitere Information kann man in den WooCommerce Docs nachschlagen. Um die Felder hinzuzufügen, einfach die folgenden Code-Schnipsel in die Funktion „add_fields_to_general_tab()“ unter den Kommentar „// Benutzerdefinierte Felder hier einfügen …“ kopieren und schon wird das Feld unter den allgemein Produktinformation angezeigt.

 

benutzerdefiniertes Textfeld

Um ein Textfeld zu erstellen, benutzt man die Funktion woocommerce_wp_text_input.

Mit dem Attribut „desc_tip“ kann man ein kleines Fragezeichen mit einem Tooltip anzeigen lassen. Der Text des Tooltip schreibt man in das Attribut „description“.

Nummernfeld

Um ein eigenes Nummernfeld zu erstellen, benutzt man die ebenfalls Funktion woocommerce_wp_text_input().

Der unterschied zu einem normalen Textfeld ist, das man mit ‚type‘ => ’number‘ den Datentyp des Feldes festlegt. Damit weis WooCommerce das es sich um ein Nummernfeld handelt. Zusätzlich kann man mit ‚custom_attributes‘ weitere Eigenschaften wie Bereichsgrenzen und Schrittweite angeben. In diesem Beispiel beträgt die Schrittweite 5 und der Wert des Feldes muss zwischen 0 und 100 liegen.

benutzerdefinierte Textarea

Eine Textarea erstellt man mit der Funktion woocommerce_wp_textarea_input().

Hierzu gibt es eigentlich nichts weiter zu sagen.

Eigene Auswahlliste

Um eine Auswahlliste zu erzeugen und die Liste mit Werten zu fühlen, benutzt man die Funktion woocommerce_wp_select().

Die Liste wird über das Attribut ‚options‘ befühlt. Man erzeugt ein Array mit den Inhalten die später angezeigt werden sollen, wenn man die Auswahlliste öffnet.

benutzerdefinierte Felder als Radiobuttons

Eine Gruppe von Radiobuttons erzeugt man mit woocommerce_wp_radio().

Um Optionen für ein WooCommerce Produkt zu erstellen, befüllt man wieder das Attribut ‚options‘ mit den einzelnen Optionen. Der Vorteil, hier kann immer nur eine Option des Arrays ausgewählt werden.

Eigene Checkboxen

Mit woocommerce_wp_checkbox() erzeugt man eine benutzerdefinierte Checkbox.

 

Speichern eines Benutzerdefinerten Feld in WooCommerce

Nachdem man nun die eigenen Metaboxen erstellt hat, benötigt man noch eine Funktion zum speichern der Werte in der Datenbank. Dazu hakt man sich mit ‚woocommerce_process_product_meta‘ ein.

Die Felder werden mit update_post_meta() gespeichert. Dazu ersetzt man den Meta-Key ‚eigenesTextfeld‘ mit der ID des zu speichernden Feldes. Um das Nummernfeld zu speichern, sieht der Code wie folgt aus.

 

Ergebnis der Anpassungen

benutzerrdefinerte Felder für WooCommerce

Nachdem die Anpassungen eingefügt worden sind, erscheinen die hinzugefügten Felder in den Produktdaten unter dem Reiter „Allgemein“. Will man die Felder unter einem anderen Produkt Tab, verwenden, benutzt man einen der folgenden Hooks zum Positionieren der neuen Feldern.

woocommerce_product_options_general_product_data

Platziert die Felder unter dem Tab „Allgemein“

woocommerce_product_options_inventory_product_data

Platziert die Felder unter dem Tab „Bestand“

woocommerce_product_options_shipping

Platziert die Felder unter dem Tab „Versand“

woocommerce_product_options_related

Platziert die Felder unter dem Tab „Verlinkte Produkte“

woocommerce_product_options_attributes

Platziert die Felder unter dem Tab „Eigenschaften“

woocommerce_product_options_advanced

Platziert die Felder unter dem Tab „Erweitert“

benutzerdefinierte Produktfelder ausgeben

Auf die Werte der Felder kann man, genau wie in WordPress, mit get_post_meta() zugreifen.

Eine zweite Möglichkeit auf ein Feld zuzugreifen:

 

Wie man sieht, ist es recht einfach, eigene Metadaten für WooCommerce bereit zu stellen. Wie man einen eigenen Produkt Tab in WooCommerce Backend erstellt zeigen ich in einem meiner nächsten Beiträge. Falls es Probleme oder Verbesserungen gibt, hinterlasst mir doch einfach einen Kommentar.

 

17 Gedanken zu „Benutzerdefinierte Felder für WooCommerce

  1. Franziska Antworten

    Hallo, besten Dank für den hilfreichen Beitrag. War genau das, was ich gesucht habe und funktioniert wunderbar. Eine Frage habe ich noch: Wenn man eine Wert eines benutzerdefinierten Textfeldes wieder entfernen möchte, so funktioniert das nicht. Man kann Feldinhalt zwar löschen, aber nach dem Speichern ist der Wert wieder eingefüllt. Gibt es hierfür eine Lösung? Besten Dank für Ihre Unterstützung!
    Schöne Grüsse, Franziska

    • woodpresser Autor des BeitragesAntworten

      Hallo, entschuldige die späte Antwort. Ich war gerade 2 Wochen im Urlaub. Um das Feld zu löschen lässt du die If-Abfrage weg um zu prüfen ob das Feld auch nicht leer ist und benutzt nur den Befehl „update_post_meta()“.
      Also du verwendest anstatt
      $woocommerce_text_field = $_POST[‚eigenesTextfeld‘];
      if( !empty( $woocommerce_text_field ) )
      update_post_meta( $post_id, ‚eigenesTextfeld‘, esc_attr( $woocommerce_text_field ) );
      }
      nur
      $woocommerce_text_field = $_POST[‚eigenesTextfeld‘];
      update_post_meta( $post_id, ‚eigenesTextfeld‘, esc_attr( $woocommerce_text_field ) );

  2. Josef Ganneshofer Antworten

    Hallo

    Ich möchte ein Textfeld unter den Attrributen in Woocommerce einfügen.

    Aber wenn ich den Code in die functions.php einfüge , kommt immer eine Fehlermeldung.

    // Hook um Felder anzuzeigen
    add_action( ‚woocommerce_product_options_general_product_data‘, ‚add_fields_to_general_tab‘ );

    // Hook zum speichern der benutzerdefinerten Feldern
    add_action( ‚woocommerce_process_product_meta‘, ‚add_fields_to_general_tab_save‘ );

    // benutzerdefinertes Textfeld
    woocommerce_wp_text_input(
    array(
    ‚id‘ => ‚eigenesTextfeld‘,
    ‚label‘ => __( ‚Mein Textfeld‘, ‚woocommerce‘ ),
    ‚placeholder‘ => ‚Mein Platzhalter‘,
    ‚desc_tip‘ => ‚true‘,
    ‚description‘ => __( ‚Gebe hier deinen eigenen Tooltip Text ein.‘, ‚woocommerce‘ )
    )
    );

    Aber ich finde die Position nicht…
    // Benutzerdefinerte Felder hier einfügen …

    Ich hab WordPress 4.7.3 und WooCommerce 3.0.1

    • woodpresser Autor des BeitragesAntworten

      Es fehlt noch der Hook, wo die Felder angezeigt werden sollen. So sollte es funktionieren:

      // Hook um Felder anzuzeigen
      add_action( ‚woocommerce_product_options_general_product_data‘, ‚add_fields_to_general_tab‘ );

      // Hook zum speichern der benutzerdefinerten Feldern
      add_action( ‚woocommerce_process_product_meta‘, ‚add_fields_to_general_tab_save‘ );

      function add_fields_to_general_tab() {
      global $woocommerce, $post;
      echo ‚

      ‚;
      // Benutzerdefinerte Felder hier einfügen …

      woocommerce_wp_text_input(
      array(
      ‚id‘ => ‚eigenesTextfeld‘,
      ‚label‘ => __( ‚Mein Textfeld‘, ‚woocommerce‘ ),
      ‚placeholder‘ => ‚Mein Platzhalter‘,
      ‚desc_tip‘ => ‚true‘,
      ‚description‘ => __( ‚Gebe hier deinen eigenen Tooltip Text ein.‘, ‚woocommerce‘ )
      )
      );
      echo ‚

      ‚;
      }

      function add_fields_to_general_tab_save( $post_id ) {
      // Eigenes Textfeld speichern
      $woocommerce_text_field = $_POST[‚eigenesTextfeld‘];
      if( !empty( $woocommerce_text_field ) )
      update_post_meta( $post_id, ‚eigenesTextfeld‘, esc_attr( $woocommerce_text_field ) );
      }

  3. Josef Ganneshofer Antworten

    Hallo

    Danke für die Schnelle Antwort.

    Wenn ich das bei mir in die functions.php einfüge und aktualisiere, kommt bei mir nur eine weiße Seite.

    Ich verwende das Theme „Weddings“.

    Meine Webseite: candleandrings.com , ich möchte bei „Hochzeitskerzen“ unter den „Attributen“ ein Textfeld erstellen wo der Kunde seine Vornamen und das Datum für die Beschriftung eingeben kann.

    Das soll genauso wie die Attribute im Warenkorb angezeigt werden.

    Vielen Dank!

    • woodpresser Autor des BeitragesAntworten

      Hallo, habe gerade gesehen, das der ganze HTML Code von der Kommentarfunktion in WordPress entfernt wurden. Um dein Problem zu lösen funktioniert dieser Code auch nicht. Dies ist nur für benutzerdefinerte Felder im Backend gedacht und wird als Metainformation im Produkt gespeichert. Am besten du schaust dir mal das Plugin „WC Fields Factory“ an, damit sollte dein Problem gelöst sein. Habe es aber selbst noch nicht getestet. Werde in den nächsten Tagen einen Beitrag erstellen wie man Textfelder im Frontend erstellt und Metainformation zu einer Bestellung speichert.

  4. Bern Antworten

    Vielen dank für diesen Beitrag, hat alles soweit geklappt. Ich habe damit eine weitere Produkteigenschaft hinterlegt. Nun möchte ich das diese Produkteigenschaft bei jeder Bestellung mit ausgegeben wird (In der E-Mail Bestätigung). Aber egal was ich mache, mit
    get_post_meta($post->id,“eigenesTextfeld“,true); oder
    mit get_the_id methode, es gibt keine Ausgabe des wertes in der E-Mail. (Ich nutze eine mod. Version von email-order-items.php und diese auszugeben).

    Wo liegt der Fehler? Wie gesagt im backend wird alles korrekt angezeigt usw.

    • woodpresser Autor des BeitragesAntworten

      Hallo,

      probiere es mal mit <?php echo get_post_meta( $item['product_id'], 'your-custom-field', true ); ?>

      Denke das es so funktionieren sollte, kann es im Moment nicht ausprobieren.
      Werde es nächste Woche mal testen.

      M.f.G.

  5. marquez Antworten

    Hi,

    Dein Code gefällt mir sehr gut. Ich quäle mich ehrlich gesagt schon länger mit Woo rum.

    Da Du ja scheinbar ziemlich fit bist, hätte ich ein paar Fragen an Dich:

    Ich würde gerne einen hook (oder wie auch immer man das lösen kann) erweitern, so dass im Falle wenn eine order als abgeschlossen wurde, ich entsprechend daten in der usermeta separat abspeichern kann. Leider blicke ich bei der ganzen Woocommerce Doc nicht so wirklich durch, geschweige denn sehe ich wie man hooks (oder webhooks ?) von woocoomerce sehen kann um z.B. herauszufinden welchen ich per add oder filter erweitern muß.

    Würde mich freuen wenn Du mir mit Ansätze helfen könntest.

    • woodpresser Autor des BeitragesAntworten

      Hallo,

      also um herauszufinden wie man WooCommerce am besten manipuliert, hilft nur Quelltext lesen. Darin findest du die Hooks und Filter, welche WC bereitstellt.
      Wenn ich deine Frage richtig verstanden habe, möchtest du bei einer abgeschlossen Bestellungen, Informationen im Benutzer des Kunden speichern?
      Darf man im Shop nur mit Konto bestellen? Dies müsste ja dann Voraussetzung sein. Was für Daten sollen gespeichert werden? Bestimmte Dachen wie Kunde wird ja bereits in der Bestellung gespeichert.

      Im Moment habe ich auch keine Lösung dafür, bin gerade noch am Arbeiten. Aber werde mich am Wochenende mal mit der Thematik beschäftigen.

      Viele Grüße

  6. marquez Antworten

    Hallo,

    Danke für Deine Antwort. In der zwischenzeit und nach viel lesen und rumprobieren habe ich jezt mittlerweile eine Lösung.

    Allerdings muß ich ehrlich gestehen, dass Woocommerce leider doch einige „lücken“ aufweist. So finde ich es z.B. unmöglich, dass ich zwar in der Order die Produkte sehen kann anhand der Produkt ID, aber sobald ich mehr infos zu den Produkten brauche wie z.B. die SKU, oder gesetzte Attribute, dass man da erstmal umständlich entsprechende Calls für machen muss. Das ist imho ziemlich suboptimal gelöst. Die hätten ja zumindest einen „extended“ parameter implementieren können, der mir sofort im Object das alles zur Verfügung stellt..

    Bezogen auf Deine Antwort:
    Ja, Grundvoraussetzung ist für mich, dass es kein Gast Checkout gibt !
    Und wie Du aus meinem text wohl entnehmen kannst, möchte ich aus den Attributen der Produkte gewisse Sachen zusammen stellen, was dann in der Usermeta gespeichert wird.

    Wie gesagt, Woocommerce hat mich bereits viel Zeit und nerven gekostet, aber dafür hab ich den sch*** jetzt fertig 🙂

    VG
    Marquez

  7. wolli ruf Antworten

    Hallo,
    vielen Dank für das tolle Tutorial. Funktioniert bei mir in der Detailansicht der Produkte wunderbar.
    Ich schaffe es allerdings nicht, die benutzerdefinierte Felder auch in den Produktlisten anzuzeigen.
    Ich vermute mal, dass hier das „… get_post_meta( $post->ID, …“ nicht greift, weil ja verschiedene Produkte / IDs gezeigt werden.
    Oder bin ich da komplett auf dem falschen Weg?
    Freue mich über Rückmeldung.

      • woodpresser Autor des Beitrages

        Um ein Custom Field in der Shop-Übersicht anzuzeigen musst du den Hook „woocommerce_after_shop_loop_item“ benutzen. Die ID bekommst du mit „product->ID“. Dann ersetzt du „post->ID“ durch „product->ID“. So sollte es funktionieren. Kannst dir auch mal den Beitrag hier anschauen: add information to woocommerce shop page Ist allerdings auf englisch.

Schreibe einen Kommentar

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