Come aggiungere campi e schede personalizzati nella metabox dei dati dei prodotti WooCommerce per codice

In questo post impareremo come aggiungere i tuoi meta campi personalizzati nella metabox dei dati del prodotto di WooCommerce; come aggiungere campi e anche come aggiungere la tua scheda personalizzata. Andremo nel dettaglio su come aggiungere i tuoi campi, dove aggiungerli, come salvarli e infine come visualizzarli nel frontend.

Aggiunta di campi personalizzati ai pannelli esistenti

Per prima cosa vedremo come aggiungere un campo ai pannelli esistenti. Dobbiamo agganciarci a due ganci; uno per l’output del campo e uno per salvarne il valore. Il primo hook dipende dalla scheda in cui vuoi visualizzare il tuo campo.

Il metabox dei dati del prodotto

Tieni presente che la visibilità della scheda varia a seconda del tipo di prodotto. Ad esempio, la scheda "Generale" viene rimossa quando si passa a un tipo di prodotto raggruppato. Quindi non solo dovresti considerare dove si adattano logicamente i tuoi campi personalizzati, ma devi considerare un pannello che sia visibile per tutti i tipi di prodotto desiderati. Questo è un elenco dei più generali hook disponibili:

• woocommerce_product_options_general_product_data("Generale")
• woocommerce_product_options_inventory_product_data("Inventario")
• woocommerce_product_options_shipping("Spedizione")
• woocommerce_product_options_related("Prodotti collegati")
• woocommerce_product_options_attributes("Attributi")
• woocommerce_product_options_advanced("Avanzate")

Aggiunta di un input del modulo

Per quanto riguarda l’output di un input del modulo, è possibile emettere manualmente l’input del modulo HTML (ad es <input type="text"...>. ), ma WooCommerce offre semplici funzioni per aggiungere facilmente campi di qualsiasi tipo. Consiglio di usare quelli. Dai un’occhiata alla panoramica di WooCommerce di tutti i possibili tipi di input qui e quali argomenti puoi passare per controllare l’output.

Per quanto riguarda questo tutorial, aggiungerò un semplice input di testo all’interno della scheda dell’inventario per scrivere il numero di articoli in ogni pacchetto. Per quanto riguarda la chiave con cui viene salvato il tuo valore personalizzato, aggiungi sempre un trattino basso "_" prima di esso, nel mio caso sarà "_number_in_package":

Salva e modifica un prodotto. Dovresti vedere il tuo campo personalizzato apparire nella parte inferiore della scheda Inventario:

Il campo personalizzato "Numero nel pacchetto" aggiunto in basso

Una nota sulla visibilità sul campo a seconda del tipo di prodotto

Il metabox dei dati del prodotto di WooCommerce viene fornito con una grande quantità di Javascript che nasconde e mostra sia i campi che le schede/riquadri. Puoi facilmente utilizzarlo se desideri che il tuo campo sia visibile solo per tipi di prodotto specifici, fornendo nomi di classi specifici al tuo campo.

Diciamo che vuoi che il tuo campo venga visualizzato solo se il prodotto è di tipo prodotto semplice, oppure vuoi che sia nascosto se il prodotto è un prodotto variabile. WooCommerce ascolta nomi di classi specifici come show_if_<producttype>e hide_if_<producttype>e puoi combinare più classi per ottimizzare quando il tuo campo dovrebbe essere nascosto o visibile.

Ad esempio, se voglio che il mio campo sia visibile solo per prodotti semplici; Lo aggiungerò in ‘ wrapper_class‘ al mio campo di input:

Puoi anche impostare wrapper_classad es. ‘ show_if_simple show_if_grouped‘ per avere il campo visibile solo per i prodotti che sono semplici o raggruppati. Provalo tu stesso!

Salvataggio del tuo campo personalizzato

A partire da ora, tutto ciò che inserisci nel tuo campo non viene salvato. Facciamolo dopo. Ci colleghiamo woocommerce_process_product_metae salviamo il valore dal globale di PHP $_POST(invio del modulo).

Lasciami spiegare rapidamente il codice sopra. Potresti semplicemente salvare il campo usando update_post_meta(), ma nelle versioni più recenti di WooCommerce la gestione dei meta prodotti è stata notevolmente migliorata. Finché hai l’oggetto prodotto (che otteniamo chiamando wc_get_product()con l’ID post) puoi facilmente manipolare qualsiasi informazione sul prodotto nell’oggetto e infine chiamare save()una volta per aggiornare eventuali modifiche. Ciò è molto vantaggioso soprattutto se si desidera salvare più campi, nel qual caso non è necessario eseguire operazioni di database per ciascun campo, ma solo l’ultima volta che si chiama save().

Utilizzare update_meta_data()sull’oggetto per ogni metadati che si desidera salvare.

Con la funzione sopra il tuo campo dovrebbe ora essere salvato quando lo aggiorni in modifica prodotto! Nota inoltre che utilizzando le funzioni di WooCommerce per l’output del campo, non è necessario ottenere manualmente il valore del campo prima di emettere il campo: è completamente automatico.

Output del tuo campo personalizzato nel frontend

Il primo passo è capire quale hook vuoi usare per l’output del tuo campo personalizzato. WooCommerce offre un sacco di hook disponibili per controllare in modo specifico dove vuoi l’output. Se non sei sicuro, dai un’occhiata plugins/woocommerce/templates/e all’interno di questi file puoi facilmente trovare un hook appropriato. Puoi anche sovrascrivere il modello e aggiungere l’output nel modello, ma consiglio sempre di usare gli hook.

Per quanto mi riguarda, voglio che il mio campo personalizzato venga emesso in un singolo prodotto, all’interno del meta div, insieme a WooCommerce emette SKU e categoria. Per questo userò il gancio woocommerce_product_meta_start. All’interno degli hook (come con quasi tutti i template hook) puoi accedere all’oggetto post globale. Seguirò la stessa regola pratica come nel salvare il mio campo; utilizzare get_meta()sull’oggetto prodotto per ottenere il mio campo personalizzato:

Aggiunta di una scheda e un pannello personalizzati alla metabox dei dati di prodotto

Se desideri aggiungere una raccolta di campi personalizzati che logicamente appartengono insieme, potrebbe essere una buona idea raggrupparli all’interno di una scheda personalizzata. Per aggiungere una scheda personalizzata al metabox dei dati del prodotto, dobbiamo agganciare un filtro per aggiungere la scheda stessa e un gancio per l’output del contenuto del pannello. Infine dobbiamo ancora aggiungere lo stesso hook di cui sopra per salvare i nostri campi.

Ad esempio, aggiungerò un pannello personalizzato chiamato "Informazioni aggiuntive" in cui voglio aggiungere un input di testo, una casella di controllo e un input numerico.

Innanzitutto, filtriamo woocommerce_product_data_tabse aggiungiamo la nostra scheda al suo array.

Ci sono alcuni argomenti utili che possiamo fornire qui. Ad esempio, puoi utilizzare ‘ class‘ per controllare la visibilità della scheda in base al tipo di prodotto. Se te lo sei perso, controlla la sezione sulla visibilità del campo menzionata sopra. Ma tieni presente che nelle schede devi fornire le classi come un array, non una stringa. Puoi anche fornire ‘ priority‘ per decidere dove dovrebbe apparire la tua scheda. Usando es. 25 posizionerai la scheda subito dopo “Inventario".

Come impostazione predefinita, la tua scheda apparirà con una chiave inglese come icona. Sfortunatamente non c’è (per ora) modo di controllarlo tramite il filtro. Se questo è importante per te, puoi aggiungere admin CSS e fornire una classe diversa alla tua scheda. Ecco una panoramica delle icone disponibili in WooCommerce.

Uscita pannello

Il prossimo passo è agganciare woocommerce_product_data_panelse produrre il contenuto del tuo pannello. Una nota importante qui è iniziare l’output con a divcon un idattributo con lo stesso nome fornito come chiave nelle schede (nel mio caso ‘ additional_info‘). Per quanto riguarda il contenuto, dipende da te: puoi aggiungere qualsiasi codice HTML desideri, ma ti consiglio di utilizzare le funzioni di WooCommerce per l’output dei campi del modulo. Gli stessi vantaggi per nascondere o mostrare i campi funzioneranno anche qui.

Dopo il salvataggio, dovresti ora vedere la scheda e il suo contenuto nella metabox dei dati del prodotto (a meno che il prodotto non sia un prodotto esterno ovviamente).

Non resta che salvare i dati inseriti nei tuoi campi personalizzati, e per questo utilizziamo la stessa procedura di cui sopra:

Nota: in WooCommerce c’è una regola generale in cui tutte le caselle di controllo vengono salvate come ‘ yes‘ se sono selezionate, o come stringa vuota se sono deselezionate. Seguendo la regola di WooCommerce e salvando la mia casella di controllo selezionata come ‘ yes‘, questo assicura che il mio woocommerce_wp_checkbox()lavoro funzioni come previsto quando recupera il valore corrente del mio campo.

Conclusione

In questo post ti mostrerò come aggiungere i tuoi campi personalizzati al metabox dei dati di prodotto di WooCommerce, come salvarli, come controllarne la visibilità e un semplice esempio di output del tuo campo nel frontend. Ho anche mostrato come aggiungere una scheda personalizzata al metabox e aggiungere i tuoi campi lì. Spero che questo ti abbia aiutato a personalizzare WooCommerce da solo!