Comment ajouter un formulaire à la page produit WooCommerce

Publié: 2021-07-21

WooCommerce Ajouter un formulaire à la page produit Vous souhaitez ajouter un formulaire personnalisé sur la page produit ? Lisez la suite, car cet article vise à vous fournir une solution.

WooCommerce continue d'alimenter de nombreux magasins car il est flexible à la personnalisation. Par exemple, vous souhaiterez peut-être ajouter des informations supplémentaires à votre page produit. La meilleure façon de mettre cela en œuvre consiste à ajouter des champs personnalisés aux produits.

Les champs personnalisés sont également appelés méta d'élément. Ils peuvent également être affichés sur la page du panier, la page de paiement et les e-mails. La méta de l'article du panier correspond au moment où les informations collectées dans les champs de produit supplémentaires sont ajoutées aux produits du panier et peuvent être enregistrées pour la commande.

Par conséquent, nous avons besoin d'une solution qui ajoutera des champs de données personnalisés à la page du produit et ajoutera ces informations à la méta de l'article du panier. Après cela, les données collectées sont affichées sur le panier, le paiement et les détails de la commande.

Cependant, WooCommerce n'a pas de solution intégrée pour ajouter cette fonctionnalité. Cela signifie que nous devons créer un extrait de code personnalisé pour y parvenir. Nous recommandons les plugins uniquement lorsque vous souhaitez un changement majeur sur votre site.

WooCommerce Ajouter un formulaire à la page produit

Dans le didacticiel d'aujourd'hui, nous allons partager un extrait de code personnalisé que nous avons créé pour ajouter un formulaire contenant deux champs. Nous créerons un champ de nom et de message et afficherons les données des champs en tant que méta de l'article du panier et méta de l'article de commande. Cela signifie qu'il sera affiché tout au long du cycle de commande.

Avant de continuer, nous vous recommandons d'installer ou de créer un thème enfant. C'est parce que nous allons modifier certains des fichiers de base. Le thème enfant garantira que les modifications ne sont pas perdues lors d'une mise à jour.

Allons droit au but.

Étapes pour ajouter un formulaire à la page produit WooCommerce

Voici les étapes que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions du thème pour ajouter la fonction permettant d' ajouter un formulaire à la page du produit WooCommerce .
Ajoutez le code suivant au fichier php :

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'] );
	}
}

Voici le résultat sur la page produit :
Voici le résultat sur la page du panier :
Voici le résultat sur la page de paiement :
Voici le résultat sur la page des détails de la commande :
Voici le résultat sur la page de modification de la commande :

Emballer

Dans le didacticiel d'aujourd'hui, nous avons partagé une solution personnalisée que nous avons créée pour ajouter un formulaire sur la page du produit. Les détails recueillis apparaîtront tout au long des détails de la commande, comme nous l'avons démontré dans cet article.

Cependant, vous devez être très prudent lors de la modification des fichiers principaux de votre boutique WooCommerce. Si vous faites une erreur, une erreur s'affichera.

Nous espérons que cette solution vous a aidé à comprendre le fonctionnement du cycle de commande.

Comment ajouter un formulaire à la page produit WooCommerce

WooCommerce Ajouter un formulaire à la page produit

Étapes pour ajouter un formulaire à la page produit WooCommerce

Emballer

Articles similaires