rundum.digital | blog - WooCommerce Produktanfrageformular mit Contact Form 7

WooCommerce Produktanfrageformular mit Contact Form 7

Jing Zhou / 18. September 2017 / , , / Plugins WooCommerce / 4 Kommentare

Du möchtest deinen Besucher und Kunden ganz einfach produktbezogenen Anfragen ermöglichen, ohne dass sie die Kontaktdaten suchen müssen. Und im ungünstigsten Fall, ist in der Email-Anfrage des Kunden nicht genau ersichtlich, um welches Produkt es sich hierbei handelt.

Mit ein wenig Programmier-Kenntnisse, kannst du ohne Kosten deinen Kunden eine super simple und schnelle Möglichkeiten Anfragen zu stellen. Dabei wird der Name des Produktes, die Artikelnummer (falls vorhanden) und auch noch einen Link zum Produkt mitgeschickt. Damit kannst du die Anfrage eindeutig dem Produkt zuordnen, für den sich der Kunde/die Kundin interessiert.

Für diese Funktion, brauchst du natürlich das WooCommerce-Plugin und das Contact Form 7 Plugin. Beide sind kostenlos verfügbar.

Formular erstellen

Als erstes erstellst du am besten ein Contact Form 7 Formular, welches nur für die Produktanfrage verwendet werden soll. Wichtig ist, dass ein Feld für den Betreff existiert. In dieses wird der Produktname und Artikelnummer später per jQuery eingebunden. In unserem Beispiel ist es die Zeile 7 bis 8. Die Klasse „product_subject“ für label-Tag und Klasse „product_name“ für das Betreff-Feld müssen vergeben werden, damit jQuery diese Felder identifizieren kann.

Nach dem das Formular erstellt wurde, kannst du nun überlegen, wo diese erscheinen soll.

Anfrage-Formular individuelle Position

Eine gute Position ist direkt neben dem Produktbild unter den Produktdaten. Hierfür musst du die Datei content-single-product.php von WooCommerce editieren, welches sich standardmäßig im Ordner wp-content/plugins/woocommerce/templates befindet. Am besten du kopierst die Datei und fügst es in deinem Theme-Ordner unter /woocommerce/templates ein und editierst diese dann. Somit verhinderst du, dass die Original-Datei überschrieben wird. Denn bei einem Update von WooCommerce muss du diese Datei erneut anpassen.

Der Code unserer content-single-product.php sieht so aus:

In den Zeilen 69 bis 83 wird das Formular und die jQuery-Funktion aufgerufen.

Anfrage-Formular im WooCommerce-Tab

Eine andere Variante ist es, das Formular in einem separaten Tab unter den Produktangaben zu erstellen.

Dazu fügst du den folgenden Code in deiner functions.php ein.

Email Anpassen

Nach dem ein Kunde/eine Kundin die Anfrage darüber gesendet hat. Sieht die Email z.B. so aus:

Wir haben zum Anfang des Artikels geschrieben, dass wir den Link zum Produkt mitsenden wollen. Dafür musst du die Email-Ausgabe des Formulares bearbeiten und den Mail-Tag [_post_url]  von Contact Form 7 an einer beliebigen Stelle hinzufügen. In unserem Beispiel sieht das so aus:

Der Produkt-Link erscheint dann in der Email unter der Nachricht.

Damit können deine Kunden ohne Umwege dir eine Frage zum Produkt schickt. Und du kannst die Felder für das Formular natürlich auch erweitern, wie z.B. mit Checkboxen, Telefonnummer usw.


Die Quelle für den Code:
https://stackoverflow.com/questions/28828072/product-name-woocommerce-in-contact-form-7

  1. von Rio am 08. Dezember 2017 16:15 Uhr

    WOW !!!
    Alle haben gesagt, dass geht nur über ein Plugin.

    Die oben genannten Lösungen sind TOP.

    Vielen Dank dafür.

    Antworten

    • von Jing Zhou am 11. Dezember 2017 09:22 Uhr

      Gerne doch! 😉

      Antworten

  2. von Patrick am 15. Januar 2018 13:35 Uhr

    Hallo toller Artikel,

    geht es auch, das ich die Artikelnummer eines Variablen Produktes in der Anfrage wiedergegebn bekomme?

    Vielen Dank im Voraus

    Antworten

    • von Jing Zhou am 15. Januar 2018 13:51 Uhr

      Hallo und Danke!

      Leider funktioniert dieser Code nicht mit Produktvariationen.

      Antworten

Was sagst du dazu?