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 is the most popular Plugin per WordPress for eCommerce and the preferred solution for a lot of sellers. Why? It’s free and also highly versatile, as it’s effortless to customize WooCommerce to fit your needs. While the plugin offers a series of set options, there’s a lot you can do from its 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 bisognoCustomize WooCommerce

Below, you’ll find the basic setup you’ll need to customize 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

There’s a critical WordPress concept we need to get out of the way before delving into how to customize WooCommerce: Hooks. According to WPBeginner, Hooks are “functions applicable to an Action or a Filter in WordPress. Actions and Filters in WordPress are functions that you can modify by theme and plugin developers to change the default WordPress functionality.”

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:

To implement the function, you should:

• 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.
• If it makes things more comfortable, you can display a tooltip when the user hovers the mouse over an icon.
• 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

To save the changes above, you’ll need to:

• 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

To render information on the front-end, you’ll need to create a new class. You’ll specifically need:

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:

A couple of extra notes:

• 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

Now that you know how to customize WooCommerce to add your fields to simple products, you’re on your way to providing exactly the services you want to deliver. You can find more Tutorial WooCommerce on our blog. If you’re looking for experts who know how to work around this popular eCommerce plugin, contattaci for more information!