So fügen Sie ein Formular zur Produktseite WooCommerce hinzu

Veröffentlicht: 2021-07-21

WooCommerce-Formular zur Produktseite hinzufügen Möchten Sie ein benutzerdefiniertes Formular auf der Produktseite hinzufügen? Lesen Sie weiter, da dieser Beitrag darauf abzielt, eine Lösung für Sie bereitzustellen.

WooCommerce treibt weiterhin viele Geschäfte an, weil es flexibel anpassbar ist. Sie möchten beispielsweise Ihrer Produktseite einige zusätzliche Informationen hinzufügen. Der beste Weg, dies zu implementieren, besteht darin, den Produkten benutzerdefinierte Felder hinzuzufügen.

Die benutzerdefinierten Felder werden auch als Elementmeta bezeichnet. Sie können auch auf der Warenkorbseite, der Checkout-Seite und in E-Mails angezeigt werden. Warenkorb-Artikel-Meta ist, wenn die in den zusätzlichen Produktfeldern gesammelten Informationen zu den Produkten im Warenkorb hinzugefügt werden und für die Bestellung gespeichert werden können.

Daher benötigen wir eine Lösung, die der Produktseite benutzerdefinierte Datenfelder hinzufügt und diese Informationen zum Meta des Einkaufswagenartikels hinzufügt. Danach werden die gesammelten Daten in den Warenkorb-, Kassen- und Bestelldetails angezeigt.

WooCommerce hat jedoch keine integrierte Lösung zum Hinzufügen dieser Funktion. Das bedeutet, dass wir ein benutzerdefiniertes Code-Snippet erstellen müssen, um dies zu erreichen. Wir empfehlen Plugins nur, wenn Sie eine größere Änderung auf Ihrer Website wünschen.

WooCommerce-Formular zur Produktseite hinzufügen

Im heutigen Tutorial teilen wir ein benutzerdefiniertes Code-Snippet, das wir erstellt haben, um ein Formular mit zwei Feldern hinzuzufügen. Wir werden ein Namens- und Nachrichtenfeld und zeigen die Felddaten als Cart Item Meta und Order Item Meta an. Dies bedeutet, dass es während des gesamten Bestellzyklus angezeigt wird.

Bevor wir fortfahren, empfehlen wir, ein untergeordnetes Thema zu installieren oder zu erstellen. Dies liegt daran, dass wir einige der Kerndateien ändern werden. Das Child Theme sorgt dafür, dass die Änderungen bei einem Update nicht verloren gehen.

Lassen Sie uns direkt darauf eingehen.

Schritte zum Hinzufügen eines Formulars zur WooCommerce-Produktseite

Hier sind die Schritte, die Sie befolgen müssen:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Suchen Sie nach dem Öffnen der Design-Editor-Seite nach der Design-Funktionsdatei, um die Funktion zum Hinzufügen eines Formulars zur WooCommerce-Produktseite hinzuzufügen .
Fügen Sie der PHP -Datei den folgenden Code hinzu:

add_action( 'woocommerce_before_add_to_cart_button', 'njengah_fields_before_add_to_cart' );
function njengah_fields_before_add_to_cart( ) {
	?&gt;
	&lt;table&gt;
		&lt;tr&gt;
			&lt;td&gt;
				&lt;?php _e( "Name:", "aoim"); ?&gt;
			&lt;/td&gt;
			&lt;td&gt;
				&lt;input type = "text" name = "customer_name" id = "customer_name" placeholder = "Name on Gift Card"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;
				&lt;?php _e( "Message:", "aoim"); ?&gt;
			&lt;/td&gt;
			&lt;td&gt;
				&lt;input type = "text" name = "customer_message" id = "customer_message" placeholder = "Your Message on Gift Card"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;
	&lt;?php
}
/**
 * Add data to cart item
 */
add_filter( 'woocommerce_add_cart_item_data', 'njengah_cart_item_data', 25, 2 );
function njengah_cart_item_data( $cart_item_meta, $product_id ) {
	if ( isset( $_POST ['customer_name'] ) &amp;&amp; isset( $_POST ['customer_message'] ) ) {
		$custom_data  = array() ;
		$custom_data [ 'customer_name' ]    = isset( $_POST ['customer_name'] ) ?  sanitize_text_field ( $_POST ['customer_name'] ) : "" ;
		$custom_data [ 'customer_message' ] = isset( $_POST ['customer_message'] ) ? sanitize_text_field ( $_POST ['customer_message'] ): "" ;
		$cart_item_meta ['custom_data']     = $custom_data ;
	}
		return $cart_item_meta;
}
/**
 * Display the custom data on cart and checkout page
 */
add_filter( 'woocommerce_get_item_data', 'njengah_item_data' , 25, 2 );
function njengah_item_data ( $other_data, $cart_item ) {
	if ( isset( $cart_item [ 'custom_data' ] ) ) {
		$custom_data  = $cart_item [ 'custom_data' ];
				$other_data[] =   array( 'name' =&gt; 'Name',
					 'display'  =&gt; $custom_data['customer_name'] );
		$other_data[] =   array( 'name' =&gt; 'Message',
					 'display'  =&gt; $custom_data['customer_message'] );
	}
		return $other_data;
}
/**
 * Add order item meta
 */
add_action( 'woocommerce_add_order_item_meta', 'njengah_order_item_meta' , 10, 2);
function njengah_order_item_meta ( $item_id, $values ) {
	if ( isset( $values [ 'custom_data' ] ) ) {
		$custom_data  = $values [ 'custom_data' ];
		wc_add_order_item_meta( $item_id, 'Name', $custom_data['customer_name'] );
		wc_add_order_item_meta( $item_id, 'Message', $custom_data['customer_message'] );
	}
}

Das ist das Ergebnis auf der Produktseite:
Dies ist das Ergebnis auf der Warenkorbseite:
Dies ist das Ergebnis auf der Checkout-Seite:
Dies ist das Ergebnis auf der Bestelldetailseite:
Dies ist das Ergebnis auf der Seite „Bestellung bearbeiten“:

Einpacken

Im heutigen Tutorial haben wir eine benutzerdefinierte Lösung geteilt, die wir erstellt haben, um ein Formular auf der Produktseite hinzuzufügen. Die gesammelten Details werden in den Bestelldetails angezeigt, wie wir in diesem Beitrag gezeigt haben.

Sie sollten jedoch sehr vorsichtig sein, wenn Sie die Kerndateien Ihres WooCommerce-Shops bearbeiten. Wenn Sie einen Fehler machen, wird ein Fehler angezeigt.

Wir hoffen, dass diese Lösung Ihnen geholfen hat, den Bestellzyklus zu verstehen.

So fügen Sie ein Formular zur Produktseite WooCommerce hinzu

WooCommerce-Formular zur Produktseite hinzufügen

Schritte zum Hinzufügen eines Formulars zur WooCommerce-Produktseite

Einpacken

Ähnliche Artikel