WooCommerce Produktanfrageformular mit Contact Form 7

rd|jz / 18. September 2017 / Codeschnipsel, eCommerce, Email / Plugins WooCommerce / 15 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.

<label> Ihr Name (Pflichtfeld)
    [text* your-name] </label>

<label> Ihre E-Mail-Adresse (Pflichtfeld)
    [email* your-email] </label>

<label class="product_subject"> Betreff
    [text your-subject class:product_name] </label>

<label> Ihre Nachricht
    [textarea your-message] </label>

[submit "Senden"]

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:

<?php
/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

/**
 * Hook: woocommerce_before_single_product.
 *
 * @hooked wc_print_notices - 10
 */
do_action( 'woocommerce_before_single_product' );

if ( post_password_required() ) {
	echo get_the_password_form(); // WPCS: XSS ok.
	return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class(); ?>>

	<?php
		/**
		 * Hook: woocommerce_before_single_product_summary.
		 *
		 * @hooked woocommerce_show_product_sale_flash - 10
		 * @hooked woocommerce_show_product_images - 20
		 */
		do_action( 'woocommerce_before_single_product_summary' );
	?>

	<div class="summary entry-summary">
		<?php
			/**
			 * Hook: woocommerce_single_product_summary.
			 *
			 * @hooked woocommerce_template_single_title - 5
			 * @hooked woocommerce_template_single_rating - 10
			 * @hooked woocommerce_template_single_price - 10
			 * @hooked woocommerce_template_single_excerpt - 20
			 * @hooked woocommerce_template_single_add_to_cart - 30
			 * @hooked woocommerce_template_single_meta - 40
			 * @hooked woocommerce_template_single_sharing - 50
			 * @hooked WC_Structured_Data::generate_product_data() - 60
			 */
			do_action( 'woocommerce_single_product_summary' );
		?>

		<?php
    global $product;
    //If you want to have product ID also
    //$product_id = $product->id;
    $hsubject    =   "Anfrage zum Produkt: ".$product->post->post_title; 
	$subject    =   $product->post->post_title." // Artikelnr: ".$product->get_sku;
	echo "<hr />";
	echo "<div class='well-sm invisible'></div>";
    echo "<h4>".$hsubject."</h4>";
    echo do_shortcode('[contact-form-7 id="247" title="Produktanfrage"]'); // Contact Form 7 Shortcode hier einfügen

    ?>

    <script>
    (function($){
        $(".product_name").val("<?php echo $subject;?> (Art.Nr. <?php echo $product->get_sku(); ?>)");
    })(jQuery);
    </script>

	
	</div>

	<?php
		/**
		 * Hook: woocommerce_after_single_product_summary.
		 *
		 * @hooked woocommerce_output_product_data_tabs - 10
		 * @hooked woocommerce_upsell_display - 15
		 * @hooked woocommerce_output_related_products - 20
		 */
		do_action( 'woocommerce_after_single_product_summary' );
	?>
</div>

<?php do_action( 'woocommerce_after_single_product' ); ?>

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.

<?php
add_filter( 'woocommerce_product_tabs', 'product_enquiry_tab' );
function product_enquiry_tab( $tabs ) {

    $tabs['request'] = array(
        'title'     => __( 'Produktanfrage', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'product_enquiry_tab_form'
    );

    return $tabs;

}
function product_enquiry_tab_form() {
    global $product;
	$product_sku = $product->get_sku;
    $subject    =   "Produktanfrage ".$product->post->post_title;

    echo "<h3>".$subject."</h3>";
    echo do_shortcode('[contact-form-7 id="247" title="Produktanfrage"]'); // Contact Form 7 Shortcode hier einfügen

    ?>

    <script>
    (function($){
        $(".product_name").val("<?php echo $subject;?> (Art.Nr. <?php echo $product->get_sku(); ?>)");
    })(jQuery);
    </script>   
    <?php   
}
?>

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