Personalizza definitivamente le pagine di WooCommerce

Uno dei plugin più famosi che permette di fare questo, acquistato da Automattic diversi anni fa, è proprio WooCommerce che aiuta a gestire il 25% di qualsiasi shop online.

Forse conoscevi già queste informazioni oppure hai un cliente che ti ha chiesto la creazione di un eCommerce e dalle prime ricerche hai trovato WooCommerce ma con questo articolo desidero presentarti gli approcci migliori per rendere compatibile un tema con WooCommerce.

Dobbiamo essere onesti, WooCommerce è sicuramente un plugin che trasforma WordPress in un potente eCommerce in grado di vendere qualsiasi tipo di prodotto ma sotto l’aspetto grafico può lasciare un po’ a desiderare.

Se lo analiziamo appena attivato, la sua grafica è molto scarna e con molte probabilità non si adatta allo stile del tema che stai sviluppando.

Come puoi vedere WooCommerce non può far altro che utilizzare i suoi stili di base e le strutture che sono state definite all’interno del plugin.

Certo, grazie a Gutenberg le cose sono migliorate parecchio ma noi sviluppatori di temi possiamo fare molto meglio.

Anche se in molti casi può bastare un pizzico di CSS per allineare i nuovi elementi allo stile generale del tema, in altri le richieste del cliente spingono al limite le nostre conoscenze dei fogli di stile.

Con i CSS potremmo modificare l’ordine degli elementi di una pagina web ma sappiamo tutti che la soluzione ideale sarebbe quella di mettere mano alla struttura delle pagine generate.

Per esempio, se per qualche strano motivo desidero modificare la pagina del singolo prodotto rimuovendo il nome, generalmente un titolo h1, è più appropriato rimuovere il tag HTML piuttosto che impostare un display: none.

Ed è proprio per questo motivo che ho deciso di scrivere questo articolo, per aiutarti a muovere i primi passi nella personalizzazione di WooCommerce per allinearlo allo stile del tuo tema.

Dichiara la compatibilità con WooCommerce

La primissima cosa che dovrebbe fare uno sviluppatore di temi WordPress è dichiarare la compatibilità del tema con il plugin stesso.

add_action( 'after_setup_theme', 'sam_add_woocommerce_support' );
/**
 * Aggiungo la compatibilita' con WooCommerce
 */
function sam_add_woocommerce_support() {
	add_theme_support( 'woocommerce' );
}

Dichiarare la compatibilità ti permette di disattivare il noioso avviso di WooCommerce che ricorda che il nostro tema non è compatibile e soprattutto attiverai la sovrascrittura dei file.

Senza questa dichiarazione, infatti, non potrai sovrascrivere le strutture delle pagine WooCommerce come andremo a fare più avanti in questo articolo.

Molto probabilmente all’interno del functions.php del tuo tema esiste già una funzione che viene eseguita all’Hook after_setup_theme, puoi aggiungere il supporto a WooCommerce direttamente lì.

La cosa ancor più bella di questo approccio è che possiamo personalizzare ulteriormente il supporto del nostro tema passando un array come secondo parametro della funzione add_theme_support().

add_action( 'after_setup_theme', 'sam_add_woocommerce_support' );
/**
 * Aggiungo la compatibilita' con WooCommerce con array aggiuntivo
 */
function sam_add_woocommerce_support() {
	add_theme_support( 'woocommerce', [
	  'thumbnail_image_width' => 150,
	  'single_image_width'    => 300,
      'gallery_thumbnail_image_width' => 100,

	  'product_grid' => [
	    'default_rows' => 3,
	    'min_rows' => 2,
	    'max_rows' => 8,
	    'default_columns' => 4,
	    'min_columns' => 2,
	    'max_columns' => 5,
	  ],
  ]);
}

Grazie a queste informazioni aggiuntive potrai:

• impostare le dimensioni delle immagini utilizzate nella pagina Shop (grazie a thumbnail_image_width e single_image_width),
• impostare le dimensioni delle immagini utilizzate nella galleria del prodotto (grazie a gallery_thumbnail_image_width),
• modificare le impostazioni di default della griglia di prodotti presenti nello Shop assieme al numero minimo e massimo di colonne e righe da utilizzare grazie all’array product_grid.

Ovviamente si tratta di piccole impostazioni ma sono sicuro che le troverai comode perché in un colpo solo avrai personalizzato due delle pagine più importanti di qualsiasi ecommerce: la pagina del singolo prodotto e quella dello Shop.

Ora che il tuo tema è compatibile con WooCommerce e puoi sovrascrivere i suoi file template è giunto il momento di andare a scoprire in quanti modi possiamo personalizzare le pagine che vengono generate.

Iniziamo con i CSS.

Come modificare gli stili CSS di WooCommerce

Partiamo dalle cose più semplici che ci permettono di applicare lo stile del nostro tema sovrascrivendo quelli impostati da WooCommerce.

Esistono due metodi che ci permettono di fare questo, il primo è sicuramente il più veloce e lo consiglio per piccole modifiche mentre il secondo ti offre una completa personalizzazione.

Sovrascrivere le regole CSS

Come per qualsiasi pagina HTML, anche quelle generate da WooCommerce sono soggette alla cascata dei fogli di stile.

Questo significa che è possibile sovrascrivere le regole CSS impostate in un foglio di stile in due modi:

• utilizzando lo stesso selettore CSS all’interno di un foglio di stile caricato successivamente,
• utilizzando un selettore che ha una specificità più alta rispetto a quella dichiarata nei fogli di stile di WooCommerce.

Se stai leggendo questo articolo molto probabilmente conosci già la cascata dei fogli di stile e la gestione della specificità di un selettore CSS ma puoi rinfrescarti la memoria leggendo questo interessante articolo apparso su Dev.to.

Qualsiasi sia la strada che scegli di percorrere per sovrascrivere le regole di default di WooCommerce devi comunque stare attento alle prestazioni del tema che stai sviluppando perché:

1. i CSS di WooCommerce vengono comunque scaricati (quasi 1MB sparso in 33 file distinti),
2. il browser applicherà prima gli stili definiti da WooCommerce per poi sovrascriverli con le regole che hai specificato.

Infatti le prestazioni di un sito web non vengono definite solo dalla velocità con la quale le pagine vengono inviate dal server ma anche da quanto tempo lo stesso browser impiega nel disegnare le pagine.

Ecco perché, soprattutto per grandi personalizzazioni, preferisco seguire il prossimo metodo.

Sostituisci le regole CSS di WooCommerce

Come detto in precedenza, sovrascrivere gli stili impostati da WooCommerce non è sempre la soluzione migliore ed è per questo motivo che ti consiglio di dare uno sguardo a questa seconda soluzione.

Praticamente si tratta di dire a WooCommerce di non caricare i suoi CSS perché tutti gli stili verranno applicati dai fogli di stile creati dallo stesso tema.

Per fare questo ti basterà aprire il tuo functions.php e inserire quanto segue:

// Disabilito il caricamento di tutti gli stili di WooCommerce
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Con questa singola riga puoi disattivare in un colpo solo tutti i fogli di stile che WooCommerce va a caricare all’interno del tuo tema.

Parlo di tutti i fogli di stile perché come indica WooCommerce nella sua documentazione, nel frontend vengono caricati 3 fogli di stile distinti:

• woocommerce.css – un foglio di stile generale dove vengono dichiarate le principali regole da applicare,
• woocommerce-layout.css – attraverso il quale vengono gestite le regole da applicare ai vari elementi a seconda delle risoluzioni del browser,
• woocommerce-smallscreen.css – un foglio di stile specifico che ottimizza gli elementi WooCommerce per gli schermi di piccole dimenzioni.

Ovviamente se la tua intenzione è quella di escludere dal caricamento soltanto alcuni di questi fogli di stile è sempre possibile farlo, solo che il codice che dobbiamo inserire all’interno di functions.php cambia leggermente:

// Specifico gli stili WooCommerce da rimuovere.
add_filter( 'woocommerce_enqueue_styles', 'sam_dequeue_woocommerce_styles' );
function sam_dequeue_woocommerce_styles( $enqueue_styles ) {
	unset( $enqueue_styles['woocommerce-general'] );	// Rimuovo woocommerce.css
	unset( $enqueue_styles['woocommerce-layout'] );		// Rimuovo woocommerce-layout.css
	unset( $enqueue_styles['woocommerce-smallscreen'] );	// Rimuovo woocommerce-smallscreen.css

	// Ritorno array modificato.
	return $enqueue_styles;
}

Utilizzando la funzione unset() possiamo specificare ciascun foglio di stile che vogliamo rimuovere dal caricamento del nostro tema.

A questo punto tutto quello che ti resta da fare è replicare le regole di WooCommerce per personalizzarle dove serve.

Sicuramente questo è un compito molto impegnativo, WooCommerce introduce decine di elementi con centinaia di regole applicate su di essi e andare a ricrearle tutte per modificare solo le porzioni di nostro interesse è veramente un lavoro impegnativo!

Ecco perché io preferisco prendere i file .scss che si trovano in asset/css/ nel repository GitHub e personalizzare le regole di cui ho bisogno e rimuovere i file che non utilizzo.

Questo richiede un po’ di lavoro in più ma offre una completa personalizzazione e evita di dover caricare file CSS aggiuntivi a quelli del mio tema.

WooCommerce non è tutto CSS.

Anzi se andiamo a controllare i fogli di stile rappresentano una minima parte del suo codice (neanche il 4%) e in molti casi non basta qualche regola CSS per raggiungere i risultati desiderati.

In molti casi quello che uno sviluppatore desidera fare è modificare la struttura di una pagina per raggiungere i propri scopi.

Potremmo raggiungere dei risultati soddisfacenti grazie a moduli come Flexbox o CSS Grid che ci permettono di organizzare al meglio il nostro contenuto ma cosa succede se desideri aggiungere o rimuovere dei nuovi elementi nella pagina?

Ecco che è giunto il momento di scoprire come sovrascrivere i file template offerti da WooCommerce.

Dove trovare i file template e come sovrascriverli

Se andiamo a controllare la cartella del plugin WooCommerce all’interno della nostra installazione WordPress scopriremo che è piena zeppa di cartelle e file PHP.

La cartella che ci interessa in questo momento prende il nome di templates/ e andando a curiosare al suo interno scopriremo che anche in questo caso ci sono moltissimi file PHP e cartelle (che contengono altri file PHP).

Come puoi notare tu stesso tutto è molto ben organizzato e abbiamo una cartella specifica per ogni pagina che gestisce. Le più interessanti e che con molta probabilità modificherai frequentemente sono:

• cart/ – i file che ti permetteranno di personalizzare il carrello,
• checkout/ – modificando i file presenti in questa cartella potrai personalizzare la sezione di pagamento del tuo tema oltre che la pagina di ringraziamento e di riassunto ordine,
• emails/ – se il tuo cliente dovesse avere la necessità di personalizzare le email inviate da WooCommerce trovi tutti i suoi template all’interno di questa cartella,
• global/ – molto utile se devi personalizzare il modulo di login o altri elementi utilizzati globalmente nel sito,
• loop/ – al suo interno troverai tutti i file template utilizzati per creare il loop dei prodotti e nella pagina Shop,
• myaccount/ – incredibilmente utile se, come al sottoscritto, ti è stato richiesto di personalizzare la dashboard di un utente,
• single-product/ – tutti i file di cui avrai bisogno per personalizzare la pagina dei singoli prodotti.

Questa è soltanto una mia selezione personale delle cartelle che contengono i file da utilizzare per personalizzare le strutture, se sei interessato a vedere tutte le possibilità di personalizzazione ti consiglio di andare a controllare la cartella templates/ in wp-plugins/woocommerce/ oppure puoi consultare il sorgente direttamente su GitHub.

Adesso che sai dove trovare i file template che WooCommerce mette a disposizione è giunto il momento di passare alla parte divertente di questa sezione: applicare le nostre modifiche!

Se hai avuto il piacere di lavorare con plugin ben sviluppati hai già capito come applicare le tue modifiche ma un piccolo ripasso non farà certo male.

Per sovrascrivere uno dei file contenuti in templates/ la prima cosa da fare, beh la seconda perché la prima è sempre la dichiarazione della compatibilità del nostro tema con WooCommerce, è creare la cartella woocommerce/ all’interno della cartella del nostro tema.

Tutto qua.

Un aspetto fondamentale per la sovrascrittura corretta dei nostri file è quella di seguire la stessa struttura di cartelle e file.

Per esempio se hai la necessità di modificare il codice che usa WooCommerce per generare la valutazione del prodotto il file di tuo interesse sarà rating.php ma non ti basterà inserirlo nella cartella woocommerce/ perché nel plugin si trova all’interno della cartella templates/single-product/.

Quindi per sovrascrivere la valutazione del singolo prodotto dovrai rispettare la stessa struttura e posizionare il tuo file in woocommerce/single-product/rating.php, a questo punto potrai apportare tutte le modifiche che desideri e vederle nelle tue pagine!

Ultimi consigli prima di personalizzare WooCommerce

Siamo quasi giunti alla fine di questo articolo ma vorrei concludere con il botto.

Adesso sai come personalizzare le pagine generate da WooCommerce sia con il CSS che attraverso le strutture di base offerte dai template PHP ma ci sono ancora un paio di punti che vorrei tu tenessi bene a mente.

Non cancellare MAI un Hook WooCommerce

Man mano che andrai a modificare i template noterai che alcuni di questi sembrano non fare assolutamente niente se non utilizzare una manciata di do_action(), come per esempio content-single-product.php.

La prima volta che ho aperto questo file mi aspettavo di trovarmi un complesso loop che andava a pescare i dati del prodotto e tutti gli elementi relativi, invece mi sono trovato diverse dichiarazioni di questo tipo:

/**
 * Hook: woocommerce_single_product_summary.
 *
 * @hooked woocommerce_template_single_title - 5
 * @hooked woocommerce_template_single_rating - 10
 * @hooked woocommerce_template_single_price - 10
 * @hooked woocommerce_template_single_excerpt - 20
 * @hooked woocommerce_template_single_add_to_cart - 30
 * @hooked woocommerce_template_single_meta - 40
 * @hooked woocommerce_template_single_sharing - 50
 * @hooked WC_Structured_Data::generate_product_data() - 60
 */
do_action( 'woocommerce_single_product_summary' );

Quello che ci fa capire questo blocco di codice è che con WooCommerce rimuovere o aggiungere codice è estremamente semplice e indipendente dalla struttura del nostro progetto.

Così come WordPress anche WooCommerce mette a disposizione un gran numero di Action e Filter Hook che possiamo utilizzare per modificare a nostro piacimento i contenuti delle pagine generate.

Se per esempio hai la necessità di rimuovere il riassunto del prodotto non dovrai far altro che scrivere il seguente codice nel tuo functions.php:

// Rimuovo il riassunto dalla pagina del singolo prodotto.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

WooCommerce e tutto l’ecosistema di plugin che gli gravita intorno dipendono da questi Hook ed è per questo motivo che devi stare attento a non rimuoverli mai!

Se durante le tue modifiche andrai a cancellare gli Hook di WooCommerce puoi star certo che prima o poi rimpiangerai questa scelta.

Magari perché hai perso delle ore nella configurazione di un nuovo plugin che non vuol funzionare o perché, pur seguendo attentamente quel tutorial online, il tuo codice non realizzerà le modifiche di cui hai bisogno.

Quindi anche se hai la necessità di modificare da capo a piedi un template ricorda sempre che devi mantenere gli Hook dichiarati al suo interno.

Mantieni aggiornati i tuoi template

WooCommerce è un plugin in costante aggiornamento ed è molto probabile che i template vengono aggiornati per implementare nuove caratteristiche.

Per questo motivo ricorda sempre di mantenere aggiornati i tuoi template.

Farlo è abbastanza semplice, ogni file template che viene utilizzato da WooCommerce ha un blocco di documentazione all’inizio del file. Al suo interno ci sono diverse informazioni inclusa la versione di aggiornamento del template stesso.

Ecco per esempio il blocco presente in content-single-product.php:

/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.6.0
 */

Come puoi vedere al rigo 14 viene dichiarato che l’ultima volta in cui è stato modificato questo template è stato nella versione 3.6.0.

WooCommerce ci permette di sapere facilmente quali sono le pagine template che sono state aggiornate consultando la sezione dedicata nella pagina Stato dello stesso plugin.

Pronto a personalizzare WooCommerce?

Con tutte le informazioni contenute in questo articolo dovresti essere in grado di piegare le strutture WooCommerce alla tua volontà ma se ancora non ti senti sicuro non esitare a chiedere degli approfondimenti nei commenti.

Anzi ti voglio invitare a condividere la tua opinione su questo articolo!

Pensi che ho scritto troppo?

Ho trattato alcuni aspetti con troppa leggerezza?

Torneremo sicuramente a trattare WooCommerce da vicino perché ci sono ancora molti aspetti che dovrai padroneggiare per lavorare al meglio con questo potente strumento ma per il momento mi sembra di averti fornito abbastanza informazioni per iniziare a muovere i primi passi.