Come aggiungere campi personalizzati alla pagina del prodotto di WooCommerce

Questo articolo è stato creato per aiutare i principianti che non conoscono WooCommerce e i modelli di prodotto. Mostreremo come personalizzare il modello di prodotto e aggiungere campi personalizzati ai vostri prodotti WooCommerce.

La pagina del prodotto di WooCommerce di solito mostra i dati del prodotto come titolo, immagine, galleria di immagini, descrizione breve, descrizione lunga, prezzo e sconto. E se ci sono attributi e variazioni. Ma non i campi personalizzati.

Ci sono alcuni modi per raggiungere questo obiettivo e vedrete che la visualizzazione dei valori dei campi personalizzati in una pagina singola di un prodotto è abbastanza semplice e lo fa senza modificare troppo codice.

Questo articolo tratta l'aggiunta di campi personalizzati solo alla pagina del prodotto di WooCommerce. Se siete interessati ad aggiungere campi alla pagina di riepilogo del negozio, leggete come visualizzare i campi ACF nella pagina del negozio di Woo.

Di seguito abbiamo allegato un video tutorial che mostra come raggiungerlo. Ma potete tranquillamente saltare il video, perché nell'articolo qui sotto vi forniamo un tutorial completo passo-passo in versione testuale.

I campi personalizzati sono un ottimo modo per memorizzare dati extra su un post o un prodotto. A proposito, anche il Prodotto è tecnicamente un post, solo con un tipo diverso.

Come forse già sapete, trovare il plugin giusto è spesso un viaggio arduo. Ma non lasciate che questo vi impedisca di costruire il vostro kit di plugin.

Il meglio

Il plugin più popolare che consigliamo di utilizzare per la creazione di campi personalizzati è Advanced Custom Fields (ACF). Esistono altri plugin qui e qui, ma abbiamo riscontrato che costano lo stesso, o addirittura un po' di più, oppure che hanno funzioni limitate.

In questa esercitazione utilizzeremo quindi il metodo ACF.

1. Scaricare e installare il plugin Advanced Custom Fields.
2. Visitare la scheda "Campi personalizzati" nel menu Admin del backend.
3. Fare clic su "Aggiungi nuovo" per aggiungere un nuovo gruppo di campi.
   Nota: i gruppi di campi servono per organizzare i campi in gruppi.
4. Si apre la schermata "Aggiungi nuovo gruppo di campi", in cui è possibile aggiungere i campi.
5. Utilizzate il pulsante "Aggiungi campo" per aggiungere un campo, quindi inserite l'etichetta e il nome del campo in minuscolo e selezionate il tipo "Testo" dal menu a tendina.
6. Posizione, selezionare Mostra questo gruppo di campi se Tipo di post è uguale a Prodotto.
7. Selezionare altre "impostazioni" desiderate. Fare clic su "Pubblica".
8. Per altri campi è sufficiente continuare a utilizzare il pulsante "Aggiungi campo".

Questo è tutto ciò che occorre fare per creare i campi. Quindi, come passo successivo, è necessario aggiungere i valori dei campi personalizzati ai prodotti.

1. Visitare la scheda 'Prodotti' nel menu Admin del backend.
2. Nell'elenco dei prodotti, selezionare il prodotto che si desidera modificareper inserire i valori dei campi personalizzati.
3. Una volta nella schermata di modifica del prodotto, scorrere verso il basso fino a visualizzare i campi personalizzati.
4. Inserire i valori dei campi personalizzati. Fare clic su "Aggiorna" per salvare il prodotto.
5. Continuate a eseguire questi passaggi finché non avrete aggiunto i valori dei campi personalizzati a tutti i vostri prodotti.

Suggerimento: L'impostazione di un valore predefinito nel gruppo di campi ACF non riempirà automaticamente i valori dei campi personalizzati per tutti i prodotti. È quindi necessario modificare il prodotto e fare clic su "aggiorna" per ogni prodotto.

È il momento di mostrare i campi nella pagina del prodotto.

Purtroppo, né WooCommerce né il plugin ACF offrono un modo per mostrare effettivamente i valori dei campi sul front-end del sito web. Ma ogni buon sviluppatore di WordPress deve sapere come modificare il modello della pagina dei prodotti di Woo. Quindi, tuffiamoci in questa impresa.

Per i professionisti e i lettori esperti di tecnologia: modificare e aggiungere codice PHP per ottenere e visualizzare questi campi; come lavorare con i campi ACF può essere letto nella documentazione ACF.

Tuttavia, c'è un altro modo. Si tratta di utilizzare un plugin che lo faccia al posto nostro. Nel nostro caso, useremo il plugin Advanced Views per mostrare i campi personalizzati.

Advanced Views è uno dei componenti aggiuntivi di ACF e offre un modo per visualizzare i post e i relativi campi ACF in qualsiasi punto del sito utilizzando gli shortcode. Ciò significa che non dovrete più scrivere alcun codice PHP per interrogare i post, ottenere i valori dei campi o visualizzarli! Leggete come visualizzare i campi ACF senza codice per conoscere tutti i vantaggi dell'approccio shortcode.

1. Scaricare e installare il plugin Advanced Views.
2. Fare clic su "Aggiungi nuovo" per aggiungere una nuova vista.
3. Viene ora presentata la schermata "Modifica vista ACF".
4. Date alla vostra vistaun titolo e una breve descrizione, in modo da poterla ritrovare facilmente in seguito.
5. Campi, Gruppo, selezionare il gruppo di campi creato in precedenza.
6. Campo, selezionare il campo e assegnargli un'etichetta.
7. Fare clic su "Aggiungi campo" e ripetere il passaggio 6 finché non sono stati aggiunti tutti i campi.

Suggerimento: Utilizzare l'handle della riga per riordinare i campi.

Per campo ripetitore tipo; passare alla scheda 'Campi secondari ripetitori', Campo secondario, selezionare il campo ripetitore e assegnargli un'etichetta. Ora siamo arrivati ai passi finali.

1. Fare clic su "Aggiorna" per salvare la vista .
2. Copiare lo shortcode.
3. Collegatevi al vostro server via FTP e navigate nella vostra directory di WordPress, quindi andate in wp-content/plugins/woocommerce/templates/ e copiate la cartella 'single-product' nel vostro tema all'interno di una nuova cartella chiamata 'woocommerce' (quindi il percorso è wp-content/themes/your-theme/woocommerce/)
4. Nel backend dell'amministrazione di WordPress, visitare Aspetto > Editor file del tema.
5. In alto a destra selezionare il tema da modificare -> selezionare il proprio tema, quindi andare a woocommerce/single-product/short-description.php per aprirlo nella finestra dell'editor.
6. Inserire lo shortcode copiando e incollando il codice sottostante in fondo al contenuto del file e sostituendo "ID" con l'ID della vista ACF. <?php echo do_shortcode( '[acf_views view-id="ID"]' ); ?>
7. Visualizzare la pagina del prodotto per vedere il risultato.

Nota: se non vedete i campi personalizzati nel frontend, modificate il prodotto e assicuratevi di aver riempito i campi personalizzati con i valori.

Avete imparato come aggiungere facilmente campi personalizzati alla pagina del prodotto di WooCommerce. Abbiamo usato solo un paio di plugin gratuiti, che però ci hanno facilitato il compito.

Il plugin Advanced Custom Fields è straordinario e permette di gestire i meta-campi nel modo più semplice possibile. Utilizzando l'addon Advanced Views non avrete più problemi di visualizzazione dei campi nella parte anteriore del vostro sito web.

Inoltre, è bene ricordare che questi plugin sono molto utili non solo per le attività di Woo. Si possono usare ovunque, per aggiungere e visualizzare dati personalizzati, cioè campi per qualsiasi pagina o tipo di post personalizzato.