Come Creare un Tema Child WooCommerce

Immagina di avere un negozio WooCommerce attivo e funzionante.

Se stai utilizzando il tema ufficiale Storefront, potrebbe apparire piuttosto professionale. Tuttavia, potresti ancora voler personalizzare l’aspetto del tuo negozio WooCommerce per adattarlo alla tua visione.

La soluzione migliore è spesso creare un tema child WooCommerce. Questo perché un tema child ti permette di apportare modifiche al tuo tema originale senza modificarlo direttamente. Semplifica il processo di personalizzazione dell’aspetto del tuo negozio ed elimina potenziali rischi per il tuo tema e negozio.

In questo articolo, esamineremo come puoi personalizzare il tuo negozio WooCommerce utilizzando i temi. Poi, ti mostreremo come creare il tuo tema child in soli cinque passi. Iniziamo!

Uno Sguardo Rapido ai Temi di WooCommerce

Con il lancio del plugin WooCommerce nel 2011, WordPress è diventato la piattaforma di e-commerce più popolare. Attualmente WooCommerce è utilizzato per gestire il 25% di tutti i negozi online, rendendolo il 6% più popolare del suo più stretto concorrente.

Uno degli elementi che ha reso WooCommerce così di successo è la facilità con cui è possibile creare un negozio unico con il minimo sforzo. Tuttavia, questo da solo non spiega la popolarità della piattaforma.

Un altro fattore fondamentale nel successo di WooCommerce è la quasi infinita possibilità di personalizzazione che offre. Quando combinato con il tema giusto, hai accesso a molta flessibilità nel design.

WooCommerce è compatibile con quasi tutti i temi WordPress. Tuttavia, la maggior parte di essi non sarà ottimizzata per gestire le funzionalità uniche del plugin.

Fortunatamente, il tema Storefront è un’ottima opzione. Questo è il tema ufficiale di WooCommerce, creato appositamente per integrarsi con il plugin. È accattivante fin da subito, con un design semplice e pulito che mette in risalto i tuoi prodotti:

Questo design essenziale rende Storefront una base ideale per la personalizzazione. Qui entrano in gioco i temi child, che esamineremo in seguito.

Perché Potresti Voler Creare un Tema Child WooCommerce

Se hai passato molto tempo a informarti su WordPress, probabilmente hai già incontrato i temi child prima.

In breve, un tema child inizia la sua vita come copia di un altro tema, noto come ‘tema parent’. Puoi quindi apportare modifiche al tema child e testarle senza modificare direttamente il tema parent. Questo è importante perché modificare il tema originale può causare errori irreversibili e persino danneggiare il tuo sito web.

Potresti creare un tema child perché vuoi utilizzare un altro tema come base, piuttosto che dover costruire un nuovo tema completamente da zero. In alternativa, potresti voler apportare solo alcune modifiche minori al branding o all’estetica generale di un tema. Il cielo è davvero il limite, a seconda di quanto tempo sei disposto a dedicare al progetto.

Quando si tratta di WooCommerce, la maggior parte dei temi child si basa su Storefront:

Puoi scaricare diverse opzioni di temi child dal negozio ufficiale WooCommerce o da altri siti come ThemeForest. Tuttavia, è possibile che nessuno dei temi child esistenti corrisponda alle tue esigenze, o potresti semplicemente voler creare un aspetto unico. Inoltre, potresti non voler spendere soldi per un tema premium se pensi di poter fare meglio da solo.

In un post sul blog ufficiale di WooCommerce, gli sviluppatori del plugin discutono la motivazione più comune dietro l’uso di un tema child per il tuo negozio online:

“L’obiettivo con i nostri temi child Storefront è offrire un’esperienza di negozio perfetta per il tuo specifico settore. Dopo aver installato Galleria, senza modificare alcuna impostazione, hai immediatamente un negozio adatto alla vendita di articoli di moda di alta gamma. Con ProShop, puoi rapidamente allestire un elegante negozio di articoli sportivi.”

Il processo effettivo di creazione di un tema child è lo stesso sia che tu lo faccia specificatamente per WooCommerce sia per un sito WordPress più generale. Tuttavia, dovrai tenere presente lo scopo del tuo negozio mentre personalizzi il tuo tema child. Dopo tutto, un sito e-commerce richiede una filosofia di design diversa rispetto a un blog. Vediamo come si presenta questo processo nella pratica!

Come Creare un Tema Child WooCommerce (In 5 Passaggi)

Ora, ti guideremo su come creare un tema child WooCommerce. In questo esempio, creeremo un tema base che utilizza Storefront come genitore, anche se puoi usare qualsiasi tema come base.

Ti mostreremo come funziona il processo partendo da zero. Tuttavia, se vuoi saltare alcuni di questi passaggi e passare direttamente alla personalizzazione del tuo sito, puoi anche scaricare e installare un tema child Storefront di esempio.

Infine, ti consigliamo vivamente di creare un backup del tuo sito prima di procedere ulteriormente. Questo manterrà il tuo negozio al sicuro in caso qualcosa si interrompa durante il processo di sviluppo.

È anche intelligente utilizzare un ambiente di staging per creare e modificare il tuo tema child. Una volta prese queste precauzioni di sicurezza, puoi procedere al primo passo!

Passo 1: Crea una Cartella per il Tuo Tema Child WooCommerce

La prima cosa che devi fare è creare la cartella che conterrà il tuo tema. Se stai aggiungendo il tema child direttamente a un sito esistente, il modo migliore per farlo è tramite SFTP. Puoi farlo utilizzando un’applicazione gratuita come FileZilla.

Una volta che il programma è attivo e funzionante, accedi al tuo sito con le tue credenziali di hosting. Poi, dovrai navigare nella cartella wp-content/themes/. Qui sono installati i temi del tuo sito.

Tutto quello che devi fare è creare una nuova cartella all’interno di questa:

Quando crei un tema child, è meglio dargli un nome che rifletta il tema parent. Ad esempio, stiamo creando un tema child per Storefront, quindi chiameremo la nostra cartella “storefront-child”.

La prima cosa di cui avrai bisogno per creare e posizionare in questa cartella è un semplice file di testo chiamato functions.php. Questo è un importante file principale che aiuta a dettare come appare e funziona il tuo sito. Tuttavia, la maggior parte dei temi child possono usare le funzioni contenute nel file del tema parent e non ne hanno bisogno di uno proprio.

Per questo motivo, questo file può rimanere vuoto per ora. Crea semplicemente un file di testo con il nome functions.php e salvalo nella cartella del tuo tema child:

Il tuo tema è ora quasi pronto per essere attivato e utilizzato. Prima, tuttavia, avrà bisogno di un foglio di stile.

Passo 2: Crea il Foglio di Stile del Tuo Tema Child

Il prossimo file che devi creare è il Foglio di Stile a Cascata (CSS) del tuo tema. Questo file definisce gli stili che saranno applicati alle pagine e ai contenuti del tuo sito. In altre parole, ti permette di specificare l’aspetto degli elementi individuali sul tuo sito web. Quando le persone parlano di aggiornare gli stili, di solito si riferiscono all’aggiornamento del file CSS di un sito.

Il tuo tema parent conterrà già un foglio di stile, ma il CSS del tema child può essere usato per sovrascrivere questi stili. Esamineremo come funziona esattamente più avanti.

Per ora, devi solo creare il file CSS. Per farlo, aggiungi nuovamente un file di testo alla tua cartella wp-content/themes/storefront-child (o qualunque nome tu abbia utilizzato per il tuo tema child). Questo dovrebbe chiamarsi style.css:

Dovrai anche aggiungere alcune informazioni di base. Copia e incolla il seguente snippet nel tuo nuovo file style.css:

/*
Theme Name: Storefront Child
Theme URI: http://example.com/storefront-child/
Description: Il mio primo tema child WooCommerce
Author: Il Tuo Nome
Author URI: http://example.com
Version: 1.0.0
License: Licenza Pubblica Generale GNU v2 o successiva
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Questi sono i dettagli del tuo tema che vedrai quando lo visualizzi in una directory di temi o nella tua dashboard di WordPress. Sentiti libero di sostituire i dati di esempio con informazioni più specifiche per te e il tuo tema.

Passo 3: Configura il Tema Child per Ereditare gli Stili del Tema Parent

Come abbiamo già menzionato, vorrai che il tuo tema child utilizzi gli stili predefiniti del tema parent. Tuttavia, dovrai anche sovrascrivere gli stili che desideri modificare. Questo potrebbe sembrare complesso — e CSS può effettivamente diventare difficile — ma in sostanza, il child utilizzerà sempre gli stili del tema parent a meno che non contenga specificamente una sostituzione.

Ad esempio, supponiamo che il tuo tema parent definisca lo stile per gli elementi dell’intestazione h1 come 20px e rosso. Se il file style.css del tema child non contiene una voce per le intestazioni H1, allora lo stile del parent sarà applicato a tutto il contenuto H1. Tuttavia, se aggiungessimo uno stile H1 al foglio di stile del child che definisce queste intestazioni come 18px e blu, sovrascriverebbe le indicazioni del parent.

Aggiungere questa funzionalità al tuo tema child è veramente semplice. Tutto quello che devi fare è fare riferimento al tuo tema parent nel foglio di stile del tuo child.

Aggiungi semplicemente il seguente frammento dopo le informazioni che hai incollato precedentemente nel file style.css:

Template: storefront

Questo codice definisce il tema parent e garantirà che il tuo tema child utilizzi gli stili di Storefront ovunque tu non abbia specificato una sostituzione. Se stai creando un child per un tema diverso, puoi semplicemente usare il nome della sua cartella.

Passaggio 4: Attiva il Tema Child

A questo punto, il tuo tema child è tecnicamente pronto. È configurato per funzionare sul tuo sito, quindi attivalo e vediamo come appare.

Vai su Appearance > Themes nella tua dashboard di WordPress, e vedrai il tuo tema child già installato:

Seleziona Attiva per renderlo il tema attuale del tuo sito. Ora puoi visualizzarlo in anteprima dal frontend:

Come puoi vedere, appare esattamente come il tema originale al momento. Mentre il tema child è attivo, sta solo importando gli stili dal tuo tema parent. Per personalizzare l’aspetto, dovrai essere creativo con il foglio di stile del tuo tema child.

Passo 5: Aggiungi Stili al Tema Child

Finalmente, è il momento di iniziare a stilizzare il tuo tema child. Il modo in cui lo fai dipende da te, dalla tua creatività e da come desideri che appaia il tuo negozio. Tuttavia, facciamo un esempio di ciò che puoi fare.

Per illustrare come funziona la modifica del tuo tema child, cambieremo l’aspetto dei pulsanti del nostro negozio. Al momento, appaiono grigi con testo nero, ma potremmo aggiornare questo stile per renderli più evidenti:

Apri nuovamente il file style.css del tuo tema child, e aggiungi il seguente codice dopo l’ultimo */ nell’intestazione del file:

a.button,
button.button,
input.button,
#review_form #submit {
background: pink;
color: red;
}

Se salvi il tuo file e lo visualizzi nel frontend ora, vedrai il cambiamento in atto. I pulsanti saranno ora di un rosa vivace con testo rosso:

Puoi anche apportare modifiche ai file di template del tema. Dovrai semplicemente copiare il file di template che desideri modificare, come header.php, dalla cartella del tema parent a quella del tema child.

Tuttavia, dovrai anche apportare alcune modifiche per specificare quale funzione WordPress usa per fare riferimento ai file del template. Questo richiede l’uso della funzione get_stylesheet_directory(); invece di get_template_directory() per fare riferimento ai tuoi template.

Per saperne di più su come fare questo, puoi leggere tutte le template che WooCommerce utilizza.

A questo punto, hai creato un tema child WooCommerce! Naturalmente, c’è molto altro che puoi fare, ma ora sai come iniziare a sperimentare. Ti consigliamo di approfondire CSS per ottenere il massimo dal tuo stile!

Crea un Tema Child WooCommerce

WooCommerce rende facile creare un negozio online, e puoi anche cambiare il suo aspetto utilizzando il tema Storefront o uno dei tanti temi personalizzati.

Tuttavia, non devi affidarti alla creatività degli altri. Creare il tuo tema child WooCommerce non è difficile come potresti pensare e ti dà quasi il totale controllo sull’aspetto e sulla funzionalità del tuo negozio.

Buona vendita!