Come aggiungere campi personalizzati alle pagine dei prodotti WooCommerce
Cercate un modo per aggiungere campi personalizzati alle pagine dei prodotti WooCommerce?
Che vogliate aggiungere specifiche dettagliate su una pagina di prodotto WooCommerce o che siate interessati a mostrare varianti di prodotto alternative con un semplice clic, aggiungere campi personalizzati in WooCommerce richiede solo qualche istante del vostro tempo.
Dopo di che, sei in grado di personalizzare tutte le parti del tuo cruscotto WooCommerce e incorporare rapidamente le informazioni del sito che di solito richiedono l’inserimento manuale dei dati.
In questo articolo, vi mostreremo passo dopo passo come aggiungere campi personalizzati ai prodotti WooCommerce utilizzando il plugin gratuito Advanced Custom Fields (ACF).
Esempi di utilizzo di campi personalizzati per WooCommerce
Quando potrebbero essere utili i campi personalizzati in WooCommerce?
- Per aggiungere informazioni aggiuntive sul prodotto per cose come i computer, dove dovresti mostrare le specifiche tecniche come la RAM e la potenza di elaborazione.
- Messaggi promozionali che puoi cambiare rapidamente in qualcos’altro.
- Elementi multimediali unici che non possono essere inseriti usando le funzioni standard di WooCommerce, come un video extra.
- Date e orari per quando hai un conto alla rovescia, un’asta o una data di rilascio per un prodotto.
- Opzioni extra del prodotto, oltre alle varianti, che i clienti possono consultare.
- Paragrafi per spiegare le istruzioni dettagliate per l’uso di un articolo.
- Offerte aggiuntive dove l’utente viene presentato con diversi upsell che completano il prodotto corrente. Esempi sono gli attacchi per spazzolini da denti elettronici o diversi ciondoli per un braccialetto.
- Qualsiasi dato insolito o extra che vorresti incorporare in una pagina prodotto che non è supportato da WooCommerce o che è più facile da completare con campi personalizzati.
Come aggiungere campi personalizzati nelle pagine prodotto di WooCommerce
In questo esempio, faremo un finto negozio di computer che vende computer portatili. Ci vorrebbe una quantità significativa di tempo per digitare le specifiche del computer per ogni nuovo portatile, così invece, includeremo campi per selezionare quelle specifiche in base ai tipi di computer che vendiamo.
Per aggiungere campi personalizzati ai prodotti WooCommerce, è necessario installare il plugin gratuito Advanced Custom Fields sul vostro sito WordPress. Poi, ecco come impostarlo…
Advanced Custom Fields
Ecco come aggiungere campi personalizzati nelle pagine dei prodotti WooCommerce passo dopo passo:
- Crea un nuovo gruppo di campi
- Aggiungi i tuoi campi personalizzati
- Configura le impostazioni aggiuntive del gruppo di campi
- Aggiungi informazioni ai prodotti
- Visualizza le informazioni del campo personalizzato sul front-end
Crea un nuovo gruppo di campi
Nella tua dashboard WordPress, vai alla nuova scheda Campi personalizzati. Poi, clicca su Aggiungi nuovo accanto a Gruppi di campi.
Nomina un gruppo di campi. Per esempio, “Campi computer”. Un gruppo di campi è una collezione di campi che avrai per un prodotto o una sezione del tuo sito web, come una lista di specifiche che vuoi far apparire su tutte le pagine dei prodotti per computer.
Aggiungi il tuo campo(i) personalizzato(i)
Clicca il pulsante Aggiungi campo per aggiungere un campo a questo gruppo.
Crea un:
- Etichetta del campo – principalmente per il tuo riferimento.
- Nome del campo – serve come le lettere che metterai nel tuo codice personalizzato, o shortcode nel nostro caso. Puoi lasciare questo come predefinito che il plugin genera.
- Tipo di campo – il formato che stai creando per quel campo. Puoi scegliere tra opzioni come selettori di date, checkbox, dropdown e radio button.
Potresti anche voler mettere alcune istruzioni per te o per lo sviluppatore, insieme a una specificazione se questo campo è richiesto o meno.
Se stai lavorando con un campo che ha più opzioni (come i pulsanti radio), avrai bisogno di aggiungere il tuo campo Choices. Queste sono le opzioni di selezione che vuoi far apparire nel backend della pagina del tuo prodotto, come i diversi processori di base.
Il resto delle impostazioni sono tipicamente opzionali, come il valore predefinito, il layout e se vuoi mostrare il valore o l’etichetta.
Quando hai finito con un campo o un gruppo, clicca sul pulsante Pubblica o Aggiorna per assicurarti che venga salvato.
Per aggiungere altri campi al tuo gruppo, clicca nuovamente sul pulsante Add Field.
Ecco come appare con quattro campi in questo gruppo per:
- CPU
- Memoria
- Sistema operativo
- Data di rilascio
Configura ulteriori impostazioni del gruppo di campi
Una volta finito il gruppo di campi, scorri al modulo Posizione. Questo è dove si identifica dove si desidera che il gruppo di campi appaia nella vostra dashboard di WordPress.
Imposta il Post Type uguale a Product. Oppure, se vuoi essere più specifico, puoi anche scegliere una specifica categoria di prodotti.
Sotto Impostazioni, assicurati che il gruppo di campi sia attivo. Questo ti permette di vederlo su quelle pagine di prodotto e potenzialmente mostrare le selezioni di campo ai tuoi clienti.
Lo stile dipende dalle tue preferenze. Lo stesso si può dire per la posizione, il posizionamento dell’etichetta e il posizionamento delle istruzioni. Sono tutte preferenze personali e come vuoi formattare il tuo backend. In caso di dubbio, lasciali come predefiniti.
Imposta il Numero d’ordine se hai più gruppi di campi che appaiono sulle pagine dei prodotti. Questo controlla l’ordine di visualizzazione dei diversi gruppi di campi.
Puoi anche impostare una descrizione e nascondere certi dettagli sullo schermo.
Aggiungi informazioni ai prodotti
Poi passa all’editor di un prodotto dove vuoi aggiungere campi personalizzati.
Se tutte le impostazioni sono configurate correttamente, dovresti vedere i campi personalizzati sotto la casella Dati prodotto.
Per il nostro esempio, se dovessi aggiungere una nuova pagina prodotto per un portatile, puoi scegliere la CPU, la memoria, il sistema operativo e la data di rilascio.
Visualizza le informazioni dei campi personalizzati sul front-end
Per finire, devi visualizzare le informazioni dei tuoi campi personalizzati sulla pagina del singolo prodotto. Puoi aggiungere queste informazioni ovunque, ma un buon punto di partenza è nella descrizione lunga o breve del prodotto.
Per visualizzare le informazioni del campo sul front-end, usa lo shortcode . Aggiungi il nome del campo tra le virgolette:
Puoi trovare il nome del campo per ogni campo nell’interfaccia dell’editor del gruppo di campi:
Per finire, premi il pulsante Pubblica o Aggiorna.
Quando apri il tuo prodotto nel front-end, dovresti vedere i tuoi campi personalizzati dove hai aggiunto gli shortcode:
Hai domande su come aggiungere campi personalizzati?
Un vantaggio dell’uso di Advanced Custom Fields rispetto ai plugin alternativi per la creazione di campi è che puoi posizionare i tuoi nuovi campi in qualsiasi punto del tuo sito, comprese le pagine dei prodotti, i post e i moduli del carrello – personalizzando la tua dashboard e accelerando il processo di creazione dei contenuti.
E’ un’opzione meravigliosa per espandere la tua creatività e rendere il noioso compito di costruire pagine di prodotti un po’ più semplice.
Capiamo che il plugin Advanced Custom Fields ha un po’ di curva di apprendimento, quindi se hai qualche pensiero o domanda sull’aggiunta di campi personalizzati in WooCommerce, faccelo sapere nei commenti qui sotto!
Potete anche controllare il nostro tutorial completo ACF per saperne di più su come utilizzare questo flessibile plugin.