Come aggiungere un modulo alla pagina del prodotto WooCommerce

Pubblicato: 2021-07-21

WooCommerce Aggiungi modulo alla pagina del prodotto Vuoi aggiungere un modulo personalizzato nella pagina del prodotto? Continua a leggere, poiché questo post mira a fornire una soluzione per te.

WooCommerce continua ad alimentare molti negozi perché è flessibile alla personalizzazione. Ad esempio, potresti voler aggiungere alcune informazioni extra alla pagina del tuo prodotto. Il modo migliore per implementarlo è aggiungere campi personalizzati ai prodotti.

I campi personalizzati sono anche detti meta oggetto. Possono essere visualizzati anche nella pagina del carrello, nella pagina di pagamento e nelle e-mail. Il meta articolo del carrello è quando le informazioni raccolte nei campi del prodotto extra vengono aggiunte ai prodotti nel carrello e possono essere salvate per l'ordine.

Pertanto, abbiamo bisogno di una soluzione che aggiunga campi di dati personalizzati alla pagina del prodotto e aggiunga queste informazioni al meta articolo del carrello. Successivamente, i dati raccolti vengono visualizzati sul carrello, sul checkout e sui dettagli dell'ordine.

Tuttavia, WooCommerce non ha una soluzione integrata per aggiungere questa funzionalità. Ciò significa che dobbiamo creare uno snippet di codice personalizzato per raggiungere questo obiettivo. Consigliamo i plug-in solo quando desideri apportare modifiche sostanziali al tuo sito.

WooCommerce Aggiungi modulo alla pagina del prodotto

Nel tutorial di oggi, condivideremo uno snippet di codice personalizzato che abbiamo creato per aggiungere un modulo contenente due campi. Verrà visualizzato un campo nome e messaggio e visualizzare i dati dei campi come meta articolo carrello e meta articolo ordine. Ciò significa che verrà visualizzato durante tutto il ciclo dell'ordine.

Prima di procedere, ti consigliamo di installare o creare un tema figlio. Questo perché modificheremo alcuni dei file principali. Il tema figlio assicurerà che le modifiche non vadano perse durante un aggiornamento.

Entriamo subito in esso.

Passaggi per aggiungere un modulo alla pagina del prodotto WooCommerce

Ecco i passaggi che devi seguire:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor temi, cerca il file delle funzioni del tema per aggiungere la funzione per aggiungere un modulo alla pagina del prodotto WooCommerce .
Aggiungi il seguente codice al file 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'] );
	}
}

Questo è il risultato sulla pagina del prodotto:
Questo il risultato nella pagina del carrello:
Questo è il risultato nella pagina di checkout:
Questo è il risultato nella pagina dei dettagli dell'ordine:
Questo è il risultato nella pagina di modifica dell'ordine:

Avvolgendo

Nel tutorial di oggi, abbiamo condiviso una soluzione personalizzata che abbiamo realizzato per aggiungere un modulo alla pagina del prodotto. I dettagli raccolti appariranno nei dettagli dell'ordine, come abbiamo dimostrato in questo post.

Tuttavia, dovresti stare molto attento quando modifichi i file principali del tuo negozio WooCommerce. In caso di errore, verrà visualizzato un errore.

Ci auguriamo che questa soluzione ti abbia aiutato a capire come funziona il ciclo degli ordini.

Come aggiungere un modulo alla pagina del prodotto WooCommerce

WooCommerce Aggiungi modulo alla pagina del prodotto

Passaggi per aggiungere un modulo alla pagina del prodotto WooCommerce

Avvolgendo

Articoli simili