Codifica per WooCommerce: un’introduzione

Questa è un’introduzione per sviluppatori principianti al plugin WordPress WooCommerce. In questo post esamineremo le basi di come funziona WooCommerce e come possiamo personalizzarlo nel nostro tema o plug-in utilizzando hook e modelli.

Prima di tutto, WooCommerce offre grande flessibilità agli sviluppatori di temi e plugin per regolare la sua funzionalità. Per semplici modifiche di solito hai almeno due alternative per farlo. La scelta di come modificare dipende da come preferisci lavorare, da quanto flessibile e leggibile dovrebbe essere il tuo codice e da come preferisci continuare a fare la manutenzione futura del tuo sito quando si tratta di aggiornamenti di plugin (e WordPress).

Prima di iniziare a esaminare la modifica delle funzionalità di WooCommerce tramite codice, dovresti verificare se ciò che desideri ottenere è possibile modificando le impostazioni. WooCommerce viene fornito con un’enorme pagina delle impostazioni che ti consente di cambiare un po’. Nelle versioni più recenti WooCommerce ha anche aggiunto e spostato ulteriori impostazioni su WordPress Customizer. Qui potrai, ad esempio, regolare il numero di colonne e modificare alcuni dei campi di pagamento.

Modelli WooCommerce

WooCommerce offre una vasta gamma di file modello in cui tu come sviluppatore di temi puoi sovrascrivere. Il modo in cui lo fai è creare una copia del modello WooCommerce originale nella cartella del tuo tema. E poi apporti le modifiche al file nel tuo tema.

Vai alla cartella del tuo plugin WooCommerce in /wp-content/plugins/woocommerce/. Qui troverai la sottocartella templates. L’intero contenuto dei file (ce n’è molto!) /wp-content/plugins/woocommerce/templates/Includendo le sue sottocartelle sono tutti file modello che puoi sovrascrivere nel tuo tema.

Affinché WooCommerce possa trovare i modelli modificati, è necessaria una sottocartella nella directory principale del tema denominata woocommerce. Se lo slug del tuo tema è "awhitepixel", la tua cartella dovrebbe trovarsi in /wp-content/themes/awhitepixel/woocommerce/. All’interno di questa cartella puoi inserire le tue copie modificate dei file modello di WooCommerce. Tieni presente che i file modello che si trovano nelle sottocartelle devono essere inseriti nelle sottocartelle corrispondenti nella tua cartella woocommerce. Per esempio; l’override di WooCommerce /templates/single-product/add-to-cart/simple.phprichiede di inserire la tua copia simple.phpnella /woocommerce/single-product/add-to-cart/cartella nel tuo tema.

Potresti anche aver notato che ci sono molte azioni e filtri nei modelli. La maggior parte di essi sono pieni di do_action()s. Per un uso ottimale di WooCommerce non dovresti rimuovere nessuno degli hook nei modelli. Nella maggior parte dei casi potresti prendere in considerazione la modifica della funzionalità utilizzando azioni e filtri invece di sovrascrivere i modelli. Lascia che ti spieghi perché!

Nota importante sull’override di modelli e aggiornamenti dei plug-in

Per un principiante, l’override di un modello potrebbe sembrare la soluzione più semplice e intuitiva. Perché scherzare con gli hook se puoi cambiare direttamente il modello che restituisce la cosa che vuoi cambiare? Risposta: Perché questa strategia genera più lavoro per mantenere la manutenzione del tuo negozio online.

WooCommerce si aggiorna frequentemente e talvolta aggiorna un file modello. Per mantenere aggiornato il tuo negozio online, dovresti aggiornare anche i file modello sovrascritti nel tuo tema. In genere è necessario sostituire l’intero file modello con il file aggiornato più recente, quindi aggiungere nuovamente le modifiche. Questo diventa rapidamente molto più difficile se non ricordi tutte le modifiche che hai apportato. Prendilo da me che ha anni di esperienza nella correzione dei file modello WooCommerce di altri sviluppatori durante gli aggiornamenti dei plug-in. Credimi, non è un lavoro divertente da fare!

Ora che sappiamo che gli hook sono una strategia migliore, diamo un’occhiata a come procedere.

Ganci WooCommerce

WooCommerce offre un’enorme quantità di hook, sia azioni che filtri. L’uso dei ganci è davvero molto semplice!

Con gli hook puoi anche modificare molto di più del semplice output dei modelli. Puoi personalizzare i prezzi dei prodotti, i campi di pagamento o fare in modo che il tuo negozio online faccia qualcosa quando un prodotto viene aggiunto al carrello.

Se stai sviluppando un plugin, anche gli hook sono l’unica strada da percorrere. Puoi sostituire i modelli solo in un tema, non in un plug-in. (Ok, ci sono modi per superare questo, ma è molto raro e non raccomandato).

Se hai cercato in alcuni dei file modello di WooCommerce, dovresti aver visto molti file do_action(). Questi sono ganci; checkpoint a cui puoi collegarti e aggiungere il tuo codice o modificare una variabile. Se non sei sicuro di come funzionano gli hook, ho un post che lo spiega in modo approfondito.

Se vuoi produrre qualcosa, ad esempio un testo o qualcosa di simile, cerca azioni (do_action()). Ad esempio, eseguendo l’output di qualcosa nel modello del carrello, puoi scegliere di agganciarti a woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collateralso woocommerce_after_cart. Scegli semplicemente quello che è posizionato dove vuoi il tuo output. Questo è un esempio di visualizzazione di un testo prima della tabella e del modulo nella pagina del carrello:

add_action('woocommerce_before_cart', function() {
    _e('Here are the products you have added in the cart so far', 'textdomain');
});

I filtri (cerca apply_filters()) servono per modificare un output o una variabile. Un uso comune dei filtri in WooCommerce è la modifica del testo "Aggiungi al carrello" sui pulsanti di acquisto. WooCommerce offre più filtri per questo, consentendoti di controllare il testo su pagine diverse. Ad esempio puoi personalizzare il testo nel ciclo del negozio o nella visualizzazione del singolo prodotto. I filtri spesso forniscono più argomenti per un ulteriore controllo, ad esempio l’oggetto del prodotto. Ecco un semplice esempio su come modificare i testi "Aggiungi al carrello" nella visualizzazione del singolo prodotto:

add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
    return __('Buy this', 'textdomain');
}, 10, 2);

Con una certa conoscenza di come funzionano gli hook e semplicemente guardando all’interno dei file modello puoi trovare molte funzionalità facilmente modificabili. Ovviamente WooCommerce offre modifiche molto più avanzate, variazioni di prezzi, metodi di pagamento, modifiche o importazioni di prodotti, il tutto possibile con l’uso di hook.

Conclusione

Lo scopo di questo post è fornire al principiante le basi su come apportare modifiche a WooCommerce e le conseguenze di come si apportano le modifiche. Consiglio sempre di utilizzare gli hook per sovrascrivere i file modello, a meno che non sia assolutamente necessario.

Il prossimo passo è immergersi nelle modifiche avanzate conoscendo gli hook, i processi e gli oggetti in WooCommerce. Poiché WooCommerce è la piattaforma di eCommerce più popolare che ci sia, ci sono molte risorse ed esempi di codice disponibili sul web. Dai un’occhiata anche alla categoria Woocommerce qui su questo sito per saperne di più.