Home>Guide>Come aggiungere campi personalizzati in WooCommerce

Come aggiungere campi personalizzati in WooCommerce


Come aggiungere campi personalizzati in WooCommerce


Quante volte ti sarà capitato di voler aggiungere dettagli ai tuoi prodotti in WooCommerce accorgendoti che non esisteva la possibilità di farlo? Con questa guida, ti insegnerò a personalizzare i campi presenti nel backend di WooCommerce ed ampliare i campi messi a disposizione. Potrai così aggiungere particolari specifici ed offrire agli utenti la possibilità di scegliere con più dettagli a disposizione.

  • Leggi l'articolo, ti bastano solo 1 minuto, 15 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Visualizzare il nuovo campo

Creare il nuovo campo è molto semplice, ci sono delle funzioni di WooCommerce che fanno proprio al caso nostro!
In particolare, WooCommerce ci mette a disposizione sei funzioni utili a generare nuovi campi input, che analizziamo nel dettaglio:

woocommerce_wp_text_input
Genera un campo di tipo testo
I parametri accettati sono:

  • placeholder: serve per visualizzare un breve suggerimento all’interno del campo
  • class: le classi da assegnare al campo
  • style: lo stile css da inserire inline
  • wrapper_class: le classi da assegnare al contenitore del campo
  • value: il valore di default che il campo deve avere
  • name: il nome del campo
  • type: il tipo di input, come definito da HTML5 (text, password, email, number, ecc.)
  • data_type: la tipologia di input desiderato, utile per la validazione. Può essere:
    • price
    • decimal
    • stock
    • url
  • custom_attributes: un array associativo chiave => valore che specifica gli eventuali attributi extra da assegnare al campo (es: ‘maxlength’ => 10)
  • id: l’identificativo univoco del campo
  • label: il testo che verrà visualizzato come etichetta del campo
  • description: un breve testo di aiuto alla compilazione del campo
  • desc_tip: come visualizzare la description. Può essere:
    • true: la descrizione viene visualizzata come icona con tooltip
    • false: la descrizione viene visualizzata semplicemente come testo sotto il campo

woocommerce_wp_textarea_input
Genera un’area di testo
I parametri accettati sono:

  • placeholder: serve per visualizzare un breve suggerimento all’interno del campo
  • class: le classi da assegnare al campo
  • style: lo stile css da inserire inline
  • wrapper_class: le classi da assegnare al contenitore del campo
  • value: il valore di default che il campo deve avere
  • custom_attributes: un array associativo attributo => valore che specifica gli eventuali attributi extra da assegnare al campo (es: ‘maxlength’ => 10)
  • id: l’identificativo univoco del campo
  • label: il testo che verrà visualizzato come etichetta del campo
  • description: un breve testo di aiuto alla compilazione del campo
  • desc_tip: come visualizzare la description. Può essere:
    • true: la descrizione viene visualizzata come icona con tooltip
    • false: la descrizione viene visualizzata semplicemente come testo sotto il campo

woocommerce_wp_select
Genera un menu a tendina
I parametri accettati sono:

  • class: le classi da assegnare al campo
  • style: lo stile css da inserire inline
  • wrapper_class: le classi da assegnare al contenitore del campo
  • value: il valore di default che il campo deve avere
  • name: il nome del campo
  • custom_attributes: un array associativo chiave => valore che specifica gli eventuali attributi extra da assegnare al campo (es: ‘maxlength’ => 10)
  • id: l’identificativo univoco del campo
  • label: il testo che verrà visualizzato come etichetta del campo
  • description: un breve testo di aiuto alla compilazione del campo
  • desc_tip: come visualizzare la description. Può essere:
    • true: la descrizione viene visualizzata come icona con tooltip
    • false: la descrizione viene visualizzata semplicemente come testo sotto il campo
  • options: un array associativo valore => etichetta che contiene le opzioni che avremo nella select

woocommerce_wp_radio
Genera un campo di scelta singola tra le alternative proposte
I parametri accettati sono:

  • class: le classi da assegnare al campo
  • style: lo stile css da inserire inline
  • wrapper_class: le classi da assegnare al contenitore del campo
  • value: il valore di default che il campo deve avere
  • name: il nome del campo
  • id: l’identificativo univoco del campo
  • label: il testo che verrà visualizzato come etichetta del campo
  • description: un breve testo di aiuto alla compilazione del campo
  • desc_tip: come visualizzare la description. Può essere:
    • true: la descrizione viene visualizzata come icona con tooltip
    • false: la descrizione viene visualizzata semplicemente come testo sotto il campo
  • options: un array associativo valore => etichetta che contiene le opzioni tra cui scegliere

woocommerce_wp_checkbox
Genera un campo di selezione opzione
I parametri accettati sono:

  • class: le classi da assegnare al campo
  • style: lo stile css da inserire inline
  • wrapper_class: le classi da assegnare al contenitore del campo
  • value: il valore di default che il campo deve avere
  • cbvalue: il valore che la checkbox assume se attiva
  • name: il nome del campo
  • custom_attributes: un array associativo attributo => valore che specifica gli eventuali attributi extra da assegnare al campo
  • id: l’identificativo univoco del campo
  • label: il testo che verrà visualizzato come etichetta del campo
  • description: un breve testo di aiuto alla compilazione del campo
  • desc_tip: come visualizzare la description. Può essere:
    • true: la descrizione viene visualizzata come icona con tooltip
    • false: la descrizione viene visualizzata semplicemente come testo sotto il campo

woocommerce_wp_hidden_input
Genera un campo di testo nascosto
I parametri accettati sono:

  • class: le classi da assegnare al campo
  • value: il valore di default che il campo deve avere
  • id: l’identificativo univoco del campo

I parametri vengono passati alla funzione in un array associativo.

Ma come decidere in quale delle tabs di WooCommerce inserire il nuovo campo?


Scegliere la tab

Per scegliere dove visualizzare il nuovo campo, ti è sufficiente utilizzare uno degli hooks messi a disposizione da WooCommerce:

woocommerce_product_options_general_product_data: inserisce nella tab GENERALE
woocommerce_product_options_inventory_product_data: insersce nella tab INVENTARIO
woocommerce_product_options_shipping: inserisce nella tab SPEDIZIONE
woocommerce_product_options_related: inserisce nell tab ARTICOLI COLLEGATI
woocommerce_product_options_attributes: inserisce nella tab ATTRIBUTI
woocommerce_product_options_advanced: inserisce nella tab AVANZATO


Mettiamo insieme il tutto

Ecco un esempio che genera un campo di testo e lo aggiunge alla tab GENERALE, ti basta inserirlo nel file functions.php del tuo tema, che trovi nello spazio FTP del tuo sito, in:

wp-content/themes/{nome_del_tema}/

// Aggiunge un nuovo campo ai prodotti di WooCommerce
add_action( 'woocommerce_product_options_general_product_data', function() {
    woocommerce_wp_text_input( array(
		'id'			=> '_campo_personalizzato',
		'name'			=> 'campo_personalizzato',
		'label'			=> __( 'Campo personalizzato', 'woocommerce' ),
		'description'	=> __( 'Descrizione per il tuo campo personalizzato', 'woocommerce' ),
		'desc_tip'		=> true,
		'placeholder'	=> __( 'Inserisci qui il valore del tuo campo personalizzato', 'woocommerce' )
	) );
} );

Ora che hai aggiunto con successo il tuo primo campo personalizzato, hai però bisogno di salvarne il valore nel database associandolo al relativo prodotto.


Salvare il valore nel database

Visualizzare il campo non è sufficiente, hai bisogno di salvare il suo valore, altrimenti perderesti le modifiche effettuate al campo quando crei o modifichi un prodotto.
WooCommerce ci mette a disposizione l’hook woocommerce_process_product_meta che si occupa di processare i dati inviati dal form di inserimento/aggiornamento dei prodotti relativo ai metadata del prodotto stesso.

Aggiungi al file functions.php del tuo tema il codice:

// Salva il valore del campo personalizzato
add_action( 'woocommerce_process_product_meta', function( $post_id ) {
    if ( ! empty( $_POST['campo_personalizzato'] ) ) {
        update_post_meta( $post_id, '_campo_personalizzato', esc_attr( $_POST['campo_personalizzato'] ) );
    }
} );

Nella funzione, puoi eventualmente modificare i dati derivanti dal $_POST a piacimento o effettuare i dovuti controlli su di essi.
Non dimenticare, a seconda del tipo di campo, di fare l’escape dei valori, così da mettere al sicuro i tuoi dati ed il tuo sito.


Visualizzare il nuovo campo nel frontend

Bene, ora che è tutto pronto e funzionante, non ti resta che utilizzare il nuovo campo nel tema del tuo WordPress, utilizzando la funzione get_post_meta().
È sufficiente inserire nel file di template nel punto desiderato il seguente codice:

// Recupera il campo "campo_personalizzato"
echo get_post_meta( $post_id, 'campo_personalizzato' );

La funzione get_post_meta( $post_id, $key, $single ) accetta tre parametri:

$post_id: parametro obbligatorio, è l’ID del post di cui vogliamo recuperare il campo
$key: è il nome del campo che desideri recuperare. È opzionale, e nel caso non venga specificato, la funzione restituisce tutti i campi associati all’ID passato come primo parametro.
$single: valore booleano che indica se restituire una valore singlo oppure no (nel caso il campo richiesto abbia valori multipli salvati)



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Creare un widget personalizzato sulla dashboard di WordPress

Creare un widget personalizzato sulla dashboard di WordPress


Ecco come migliorare la dashboard nel backend di WordPress, aggiungendo un widget personalizzato che visualizzi le informazioni che occorre avere in primo piano.

Come tradurre WooCommerce in italiano

Come tradurre WooCommerce in italiano


Ecco una breve guida su come tradurre WooCommerce in italiano per renderlo fruibile al 100% a tutti i tuoi clienti.

Oppure cerca tra gli articoli correlati


Qualche dubbio? Ecco le opinioni degli altri utenti

Ottimo articolo, mi hai risolto un grande problema, solo 2 cose, come faccio a far vedere il campo che ho creato nella scheda prodotto? E posso aggiungere più di un campo (text in questo caso) nella stessa tab? Perché se ne aggiungo più di 1 la pagina mi resta bianca.
Grazie 🙂

In risposta a carla

Ciao Carla, grazie mille! Non c’è alcun problema ad aggiungere più di un campo, la pagina bianca è dovuta probabilmente a qualche errore di sintassi. Prova ad attivare la modalità di debug (magari dai un’occhiata qui: https://code4life.it/come-fare-il-debug-su-wordpress/) per riuscire ad isolare il problema.
Per visualizzare il nuovo campo, puoi usare la funzione get_post_meta(), nei prossimi giorni magari dedicherò una guida alla tua richiesta

Ho fatto tutto quanto hai scritto, inserendo un campo per il nome del produttore nella schermata "Generale" del prodotto. Mi visualizza il campo, con etichetta e info, però quando valorizzo il campo non me lo salva…

In risposta a Paolo

Ciao Paolo,
grazie per il tuo feedback! La sezione che si occupa di immagazzinare i dati è nel paragrafo “Salvare il valore nel database”, quindi partirei ad analizzare quello snippet. Hai provato ad attivare la modalità debug di WordPress per verificare se si genera un errore? Prova a dare un’occhiata qui:
https://code4life.it/guide/come-fare-il-debug-su-wordpress/
Spero di esserti stato di aiuto…

Salve, innanzitutto grazie per la risposta. Ho attivato il debug come da voi consigliato ma la risposta del server non credo riguardi il mancato salvataggio del valore del campo nel db, in quanto la risposta del server è:

[CONTENUTO PRIVATO]

Se aveste altri consigli ve ne sarei grato.

In risposta a Paolo

Buonasera Paolo,
dal log inviato non sembrano esserci problematiche legate al salvataggio del campo.
Prova a postare le funzioni inserite, così da poterci dare un’occhiata.

Forse il codice per il salvataggio non va inserito subito dopo il codice per l'inserimento del campo nel file functions.php del tema?

Risolto: in realtà avete aggiunto due underscore non richiesti: il codice che ha funzionato è: add_action( 'woocommerce_process_product_meta', function( $post_id ) {
if ( ! empty( $_POST['produttore'] ) ) {
update_post_meta( $post_id, '_produttore', esc_attr( $_POST['produttore'] ) );
}
} );
In ogni caso post prezioso. grazie!

In risposta a Paolo

Ciao Paolo,
hai perfettamente ragione! Effettivamente sui $_POST non c’è bisogno degli underscore… Grazie per la segnalazione, articolo corretto adesso!

Ciao, ho seguito la tua guida, funziona quasi tutto, in aggiungi/modifca prodotto compare il campo personalizzato. Compilo il campo e dopo aver fatto invio viene memorizzato sul db. Non riesco solo a far visualizzare il nuovo campo nella scheda prodotto. Qual è il file di template da utilizzare per inserire il codice ultimo di visualizzazione. Ho fatto varie prove ma niente. Grazie

In risposta a Matteo

Ciao Matteo,
il template in cui inserire il codice dipende… Considera che i files originali relativi alla scheda prodotto sono diversi e sono contenuti nella cartella wp-content/plugins/woocommerce/templates/single-product. A questo però, va aggiunto che la maggior parte dei temi ne effettua l’override (come previsto da WooCommerce) e quindi dovresti trovare le copie “rivisitate” nella cartella wp-content/themes/{nome_del_tuo_tema}/woocommerce/single-product.
Qui va selezionato il template a seconda della posizione in cui vorresti far uscire il campo personalizzato: ad esempio, per visualizzarlo sotto il prezzo, il file giusto è price.php.

Articolo molto interessante ed esaustivo, in caso di sito multilingue con WPML come faccio a cambiare i contenuti in funzione delle lingue? Grazie

In risposta a Luca

Ciao Luca,
Con WPML assicurati di avere WooCommerce Multilingual (estensione ufficiale di WPML) e vai alle impostazioni su:
WPML -> Translation Management -> Multilingual Content Setup -> Custom fields translation.
Impostando come “traducibile” il tuo campo personalizzato, dovrebbe funzionare tutto a dovere!

E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Privacy Policy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Privacy Policy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Privacy Policy)