Crea schede prodotto WooCommerce personalizzate con campi personalizzati avanzati

Quando si visualizza un prodotto in WooCommerce, le informazioni sul prodotto vengono visualizzate nelle schede. Queste schede sono fisse e generate da WooCommerce, al di fuori del tuo controllo. Questo post ti mostrerà come aggiungere codice che consenta agli autori di aggiungere schede personalizzate con contenuti personalizzati ai prodotti.

Dichiarazione di non responsabilità: esiste un’estensione WooCommerce chiamata WooCommerce Tab Manager che fornisce questa funzione. Non è gratuito, però. Non l’ho testato da solo, ma per quanto posso vedere supporta solo un editor WYSIWYG (quello che vedi è quello che ottieni) per il contenuto della scheda. Questo post è per te che desideri una maggiore messa a punto del contenuto della scheda o desideri scrivere il codice da solo senza pagare per un altro plug-in.

Utilizzeremo il plug-in Advanced Custom Fields (ACF) per semplificare il processo. Ma dovresti essere in grado di sostituire abbastanza facilmente la parte di ACF con il tuo codice personalizzato se non desideri utilizzare il plug-in. ACF è disponibile in una versione gratuita e una versione Pro. In ACF Pro c’è un tipo di campo elegante: il ripetitore, perfetto per questo tipo di utilizzo. Se invece non possiedi o desideri acquistare una licenza Pro, non preoccuparti. Il tutorial sul codice di seguito ti mostrerà come aggiungere campi utilizzando sia la versione gratuita sia utilizzando il ripetitore nella versione Pro.

Se non hai già familiarità con ACF, ciò con cui ACF ci aiuta è la facile configurazione dei meta campi post, di tutti i tipi. Puoi aggiungere facilmente un editor, un selettore di file, un selettore di data o colore, un selettore di post o categorie con supporto per scelte multiple e riordino e altro ancora. Possiamo ottenere lo stesso senza ACF, ma poi dovremmo codificare noi stessi la visualizzazione e il salvataggio del contenuto dei metabox.

Cosa faremo

Per dirla semplicemente, vogliamo consentire l’aggiunta di schede personalizzate alla visualizzazione del prodotto. Ciascuna scheda supporta un titolo visualizzato come etichetta della scheda e il contenuto visualizzato quando si fa clic sulla scheda. Le schede personalizzate dipendono davvero dal tipo di progetto o dalle esigenze che hai; forse hai bisogno di schede per le specifiche tecniche, una scheda con file (ad es. manuali utente e simili), informazioni aggiuntive o una query personalizzata che mostri i prodotti correlati.

In questo tutorial lo terremo semplice aggiungendo un editor WYSIWYG per il contenuto della scheda. Come accennato in precedenza, è facile implementare altri tipi di campo (ad es. file o una query di post), è solo una differenza nel codice che scrivi per visualizzare il contenuto della scheda, che non è correlato a questo tutorial.

Se hai ACF Pro e desideri utilizzare il ripetitore per aggiungere facilmente più schede; salta la sezione successiva. Se hai solo la versione gratuita di ACF, continua. Lo svantaggio di non avere il campo ripetitore è che è necessario definire un numero fisso di schede. Quindi l’autore non può creare un numero illimitato di schede come può con il ripetitore. Ma questa soluzione gratuita funzionerà perfettamente nei negozi online in cui desideri solo schede personalizzate specifiche (numero di).

Tutorial per la versione gratuita di ACF

Aggiunta dei campi ACF

L’aggiunta di una nuova metabox con i campi al suo interno è davvero facile con ACF. Hai due opzioni; usa l’interfaccia utente di ACF per impostare tutto o aggiungi i campi per codice. Di solito l’impostazione dei campi in admin è la strada da percorrere. Ma se devi assicurarti che i campi esistano in più siti WordPress (ad es. sviluppo di localhost, server di test e server live) potresti trarre vantaggio dall’aggiunta dei campi per codice nel tuo tema o plug-in.

È necessario configurare quanto segue:

• Un gruppo che viene visualizzato quando il tipo di post è uguale ai prodotti WooCommerce
• Un input di testo per il titolo della scheda
• Qualunque campo tu voglia per il contenuto della scheda. Come esempio aggiungeremo un editor WYSIWYG.
• (Facoltativo) Titoli e contenuti delle schede aggiuntivi per tutte le schede che desideriamo supportare.

Si prega di prendere nota di ricordare i nomi dei campi poiché sarà necessario farvi riferimento in seguito. Ho definito il titolo della scheda come tab_titlee il campo WYSIWYG come tab_contents.

Se preferisci aggiungere i campi per codice, ecco un esempio. Aggiungi questo nel file del tuo tema functions.phpo del plug-in:

Se desideri più di una scheda, aggiungi un altro set di titoli e contenuti delle schede dopo line #19. Ricorda solo di mantenerti nameunico.

Quando modifichiamo un prodotto, dovremmo vedere apparire questo metabox:

Output delle tue schede personalizzate

WooCommerce ci consente di filtrare woocommerce_product_tabsper manipolare le schede. Come argomento di questo filtro ottieni un array per tutte le schede. L’array è costituito da array per ogni scheda con chiavi univoche. Ma l’array per ciascuna scheda non contiene l’output effettivo del contenuto della scheda. Si aspetta invece una richiamata, il nome di una funzione che WooCommerce eseguirà per l’output del contenuto della scheda.

Una volta all’interno della funzione puoi utilizzare global $postper ottenere l’accesso all’oggetto post corrente, o se vuoi che l’oggetto prodotto generato da WooCommerce, fai semplicemente global $product. Abbiamo bisogno dell’ID del post per recuperare il valore dei nostri campi personalizzati con la funzione di ACF [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). Nell’esempio di codice seguente stiamo solo recuperando il titolo della scheda e controlliamo se questo è vuoto o meno. In caso contrario, aggiunge una nuova scheda all’array. Ha senso non aggiungere schede in cui il titolo della scheda è vuoto.

Nota che puoi usare ‘ priority‘ per controllare la posizione della scheda. Ad esempio, impostandolo su 1 la tua scheda apparirà per prima, prima di tutte le schede di WooCommerce. Definisci un nome di funzione per l’ callbackelemento ‘ ‘. In linea #17definiamo la funzione che WooCommerce eseguirà per l’output del contenuto della scheda.

Queste funzioni di callback della scheda otterranno due parametri; la chiave e l’elemento dell’array di tutti i valori per la scheda corrente. All’interno della nostra funzione di callback emettiamo di nuovo il titolo della scheda, facendo riferimento $taball’array fornito. WooCommerce fa eco ai titoli delle loro schede all’interno di un h2, quindi facciamo lo stesso. E poi usiamo get_field()per ottenere il valore del contenuto della scheda e semplicemente fare eco al valore. Regola la linea #23per adattarla a qualsiasi tipo di campo che hai aggiunto (ad esempio, selettore di oggetti post, immagini o qualcos’altro).

Nota che ho racchiuso tutto in un se-check che controlla se sia WooCommerce che ACF sono attivati ​​o meno. Questa è una buona pratica per evitare che il tuo sito si rompa.

E questo è tutto! Ora hai creato correttamente il codice per aggiungere schede WooCommerce personalizzate!

Se vuoi farlo con il campo ripetitore di ACF Pro per supportare un numero illimitato di schede, continua a leggere.

Tutorial per ACF Pro e ripetitore

Aggiunta dei campi ACF

Aggiungi il tuo gruppo utilizzando l’interfaccia utente di amministrazione di ACF o aggiungendolo tramite codice nel tema o nei file del plug-in. Abbiamo bisogno di impostare quanto segue:

• Un gruppo che viene visualizzato quando il tipo di post è uguale al prodotto WooCommerce
• Un ripetitore con i seguenti sottocampi:
  • Un input di testo per il titolo della scheda
  • Qualunque campo tu voglia per il contenuto della scheda.

Ecco come lo configureresti usando l’amministratore ACF:

Oppure puoi aggiungere il gruppo per codice in questo modo:

In ogni caso dovresti ritrovarti con questo metabox quando modifichi i prodotti:

Output delle tue schede personalizzate

L’output delle tue schede personalizzate è molto simile a quello che abbiamo fatto sopra per la versione gratuita. Filtramo woocommerce_product_tabs, ma qui eseguiamo il ciclo di ogni elemento ripetuto dal ripetitore. Abbiamo bisogno di un modo per identificare ogni elemento nel ripetitore con le chiavi, quindi generiamo noi stessi una chiave usando la posizione del loop e una versione slug del titolo della scheda. Nella funzione di callback estraiamo la posizione del loop dalla chiave e la usiamo per fare riferimento all’array per il nostro ripetitore.

All’interno della nostra funzione di filtro recuperiamo il valore del ripetitore e controlliamo se non è vuoto. Definiamo quindi una variabile contatore, partendo da 0 (gli array iniziano sempre con la posizione 0), che incrementiamo di 1 per ogni elemento all’interno del ciclo (at line #18). Nel loop per ogni elemento del ripetitore li assegniamo tutti alla stessa funzione di callback. Usiamo la funzione di WordPress [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)()per convertire il titolo della scheda in una versione slug di esso e aggiungerlo alla chiave.

Nella nostra funzione di callback alla riga #31 - 32eseguiamo alcune semplici manipolazioni di stringhe per estrarre il valore del contatore (che inizia da 0 e aumenta di 1 per ogni elemento). Quindi lo usiamo semplicemente come indice per l’array del ripetitore per recuperare il campo del contenuto della scheda corretto.

E questo è tutto! Ora hai implementato un numero illimitato di schede personalizzate su WooCommerce!

Ricorda che puoi sostituire WYSIWYG con qualsiasi tipo di campo. Devi solo cambiare il modo in cui emetti il ​​campo alla riga #23.

Conclusione

Scrivere il tuo codice per aggiungere schede WooCommerce personalizzate è davvero facile quando hai afferrato il concetto di base di come WooCommerce lo fa. Non richiede nemmeno molto codice. Questa è un’ottima soluzione per te che non vuoi o non puoi investire in licenze di estensione o semplicemente hai bisogno di una soluzione semplice per il tuo negozio online.