Come aggiungere dei campi personalizzati ai prodotti
I campi personalizzati, chiamati anche con il termine inglese Custom Fields, sono una funzione di WordPress che ci permette di aggiungere delle informazioni personalizzate ad un articolo.
In WooCommerce possiamo usare i campi personalizzati per aggiungere ai nostri prodotti delle informazioni aggiuntive come, ad esempio, il codice a barre dell’articolo, la marca o il prezzo di vendita consigliato.
Come vedete i campi personalizzati sono costituiti da 2 elementi: una chiave, che ci permette di identificare il campo, e un valore che rappresenta l’informazione. Come vedremo tra poco la chiave ci serve per mostrare il campo personalizzato sulla pagina del prodotto
Visualizzazione dei campi personalizzati nelle pagine del sito
La visualizzazione di queste informazioni aggiuntive sulle pagine dei nostri prodotti non è purtroppo automatica. È necessario infatti modificare il tema o scrivere del codice PHP per visualizzare i campi personalizzati sul nostro sito.
Vista la complessità dell’operazione consiglio di utilizzare un editor avanzato come Elementor Pro.
Elementor è un page builder, cioè un plugin che permette di creare con facilità e in maniera visuale le pagine del nostro sito, senza dover scrivere codice PHP.
Utilizziamo il Theme Builder per creare una pagina prodotto personalizzata.
Nella Bacheca di WordPress facciamo click sulla voce Template e quindi su Theme Builder.
Spostiamo il mouse sulla voce Singolo Prodotto e facciamo click sul pulsante aggiungi.
Verrà visualizzata la libreria con delle pagine già pronte. Possiamo selezionare uno dei modelli disponibili oppure chiudere la libreria e creare una pagina da zero.
Nel video che trovate qui sotto creo una pagina vuota, non uso quindi uno dei template già pronti, e utilizzo una classica visualizzazione a 2 colonne: nella colonna di sinistra inserisco l’immagine del prodotto mentre nella colonna di destra inserisco il titolo del prodotto e il prezzo.
Per visualizzare la marca inserisco il blocco Editor di Testo e lo posiziono tra il titolo e il prezzo del prodotto. Faccio click sul pulsante Tag Dinamici e, tra le voci disponibili, scelgo l’opzione Campo Personalizzato Post.
Selezioniamo la chiave dalla tendina oppure, se non è presente, inseriamo la chiave del nostro campo nella casella Chiave Personalizzata e il valore del campo personalizzato sarà visibile nella pagina.
Possiamo aggiungere un’etichetta prima del valore facendo click su Avanzate e inserendo nel campo Prima il testo Marca:
Il risultato sarà questo
Terminiamo il design della pagina aggiungendo il blocco Aggiungi al carrello e pubblichiamo la nostra pagina.
Nelle impostazioni di pubblicazione aggiungiamo una condizione in modo da utilizzare questo template per tutti i prodotti del nostro sito e facciamo click su salva e chiudi
Nel video che trovate qui sotto potete vedere tutti i passaggi sopra descritti
