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!
Sommario
1 Visualizzare il nuovo campo |
2 Scegliere la tab |
3 Mettiamo insieme il tutto |
4 Salvare il valore nel database |
5 Visualizzare il nuovo campo nel frontend |
6 Commenti |
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)
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 🙂