Personalizza WooCommerce: Aggiunta di Campi Personalizzati ai Tuoi Prodotti Semplici

Forse stai configurando il tuo sito di e-commerce da zero e vuoi vendere diversi tipi di prodotti. Forse hai un eStore da un paio d'anni e vuoi espandere i tuoi orizzonti e offrire nuovi prodotti. Qualunque cosa ti abbia portato a questo tutorial, il fatto è che devi personalizzare WooCommerce. E puoi trovare tutto ciò che devi sapere con Bright Vessel!

WooCommerce è il più popolare Plugin per WordPress per l'eCommerce e la soluzione preferita da molti venditori. Perché? È gratuito e anche molto versatile, in quanto è facile personalizzare WooCommerce in base alle tue esigenze. Sebbene il plug-in offra una serie di opzioni impostate, c'è molto che puoi fare dal suo backstage.

Molti dei nostri clienti di Bright Vessel sono alla ricerca di una soluzione di e-commerce unica che tenga conto delle sfumature della loro attività specifica. Con la nostra vasta esperienza con WooCommerce, possiamo aiutarti a configurare il tuo eStore in base alle tue esigenze. Con questo in mente, iniziamo!

Di cosa avrai bisogno Personalizza WooCommerce

Di seguito, troverai la configurazione di base di cui avrai bisogno per personalizzare WooCommerce:

• Il tuo sistema operativo desktop preferito, che si tratti di distribuzioni MacOS, Microsoft Windows, Linux, ecc.
• Preprocessore ipertestuale (PHP) almeno 5.6.25.
• Server HTTP Apache o Nginx.
• MySQL 5.6.33.
• Un WordPress aggiornato, o almeno la versione 4.7.
• Il plugin WooCommerce almeno nella versione 3.9.
• L'ambiente di sviluppo integrato (IDE) di tua scelta.

Personalizza WooCommerce per aggiungere campi personalizzati

Detto questo, i campi personalizzati in WooCommerce differiscono leggermente da quelli in WordPress. Invece di lavorare con i metadati sui post, come lo definisce WordPress, ci riferiremo ai "campi personalizzati" come a un vero e proprio campo di testo. Nel menu WooCommerce, vai alla scheda Prodotti collegati del tipo Prodotti semplici.

API WooCommerce - Ganci

C'è un concetto critico di WordPress che dobbiamo toglierci di mezzo prima di approfondire come personalizzare WooCommerce: gli hook. Secondo WPBeginner , Gli hook sono "funzioni applicabili a un'azione o a un filtro in WordPress. Le azioni e i filtri in WordPress sono funzioni che puoi modificare dagli sviluppatori di temi e plug-in per modificare la funzionalità predefinita di WordPress.

WooCommerce fornisce la sua API che consente agli utenti di agganciarsi ai cicli di vita delle sue pagine. Tuttavia, l'API di WooCommerce è un po' diversa da quella dei metadati di WordPress. Ci sono due agganci principali che devi conoscere:

• Woocommerce_product_options_grouping. Questo hook ha lo scopo di creare una descrizione e un input di testo che accetti i nostri valori.
• woocommerce_process_product_meta. L'uso di questa funzione è quello di elaborare, sanificare e salvare il valore del testo inserito.

Per utilizzare questi hook, è necessario definirli e personalizzarne la funzionalità.

Personalizzazione delle funzionalità

• Definire una classe con una variabile since come dati di istanza. Questa variabile sarà una rappresentazione dell'ID del campo di input come mostrato all'utente:

È ora possibile utilizzare gli hook precedenti aggiungendo una funzione di inizializzazione che registra due funzioni personalizzate sull'hook.

Campo di immissione del testo

Per aggiungere un campo di input di testo, è necessario prima aggiungere una funzione collegata a woocommerce_product_options_grouping:

Per implementare la funzione, è necessario:

• Crea un ID univoco per identificare il campo di testo. Utilizzare i dati dell'istanza nel costruttore.
• Utilizza un'etichetta per aggiungere una descrizione al campo di input.
• Se lo si desidera, è possibile specificare un segnaposto.
• Se le cose risultano più comode, è possibile visualizzare una descrizione comando quando l'utente passa il mouse su un'icona.
• Per aggiungere testo alla descrizione comando, è possibile utilizzare l'opzione per una descrizione.

Le informazioni di cui sopra saranno in un array associato e raggiungeranno quindi woocommerce_wp_text_input. Questa funzione API per personalizzare WooCommerce produce un elemento di testo con le informazioni che hai appena fornito.

Salvataggio delle informazioni

Per salvare le modifiche di cui sopra, dovrai:

• Nel metodo init, aggiungi questo codice:
• Verificare che siano presenti diversi valori nonce; In caso contrario, è necessario restituire false come precauzione di sicurezza. È possibile rilevare i valori nonce esaminando ciò che WooCommerce fornisce specificamente il codice sorgente.
• Nella raccolta di $_POST corrispondente all'input dell'utente, disinfettare i dati.
• Salva le informazioni registrate in precedenza nella tabella dei metadati del post.

Rendering delle informazioni sul front-end

Per eseguire il rendering delle informazioni sul front-end, è necessario creare una nuova classe. In particolare, avrai bisogno di:

Un ID campo di testo e l'inizializzazione nel costruttore.

• Una funzione di inizializzazione per agganciare il front-end al codice creato in precedenza.
• Per rendere il valore reale.

Avvio del plug-in

Hai quasi finito con questo tutorial su come personalizzare WooCommerce! L'ultimo passaggio consiste nell'impostare un file di bootstrap per avviare il plug-in con tutte le modifiche recenti. Ecco il codice per iniziare:

Un paio di note extra:

• Qui è dove si includono le dipendenze.
• Una volta che la funzione è in funzione, controlla se sta visualizzando il cruscotto. In tal caso, la parte corretta del plugin è caricata correttamente; in caso contrario, lo è il display standard.

Insomma

Ora che sai come personalizzare WooCommerce per aggiungere i tuoi campi a prodotti semplici, sei sulla buona strada per fornire esattamente i servizi che desideri fornire. Puoi trovare di più Tutorial WooCommerce sul nostro blog. Se stai cercando esperti che sappiano come aggirare questo popolare plug-in di eCommerce, contattaci per maggiori informazioni!