Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WooCommerce
Code

Come installare e impostare un nuovo tema per WooCommerce

by
Difficulty:BeginnerLength:LongLanguages:

Italian (Italiano) translation by Fabio Pantano (you can also view the original English article)

WooCommerce è la più popolare e "personalizzabile piattaforma eCommerce per il proprio business online." È possibile scaricarlo gratuitamente, ma si iniziare a vedere le sue potenzialità con dei temi e plugin compatibili.

Ma è davvero necessario usare un tema WooCommerce?

Sebbene non sia necessario, lo consiglio vivamente.

Non solo sono temi con un design predisposto per l'eCommerce, ma presentano stili interamente focalizzati per WooCommerce. Il CSS che WooCommerce utilizza per definire la modalità di visualizzazione dei prodotti, viene utilizzato dal tema per perfezionare interamente WooCommerce, rendendolo una splendida vetrina eCommerce.

Per non parlare del fatto che l'installazione e la configurazione di un nuovo tema è del tutto semplice, come con qualsiasi altro tema WordPress.

Vediamo come fare.

Come installare e configurare un nuovo tema per WooCommerce

Se avete già installato WooCommerce, ottimo lavoro! In caso contrario, consiglio vivamente il tutorial di Rachel McCollin Beginner's Guide to Using WooCommerce (Guida all'uso di WooCommerce per principianti). Questo vi introdurrà a WooCommerce e illustrerà i passaggi necessari per mettere online un negozio virtuale.

Ora vediamo come installare e configurare un nuovo tema per WooCommerce.

Passi 1: Installare dati fittizi

Se hai già aggiunto una serie di prodotti a WooCommerce, vi consiglio di saltare questo primo passo e iniziare con il secondo.

L'installazione di dati fittizi aggiunge prodotti immaginari al tuo negozio virtuale, cioè per darti un'idea su come viene visualizzato con i vari prodotti. Dopo aver completato l'installazione e impostato il vostro nuovo tema WooCommerce, consigliamo di eliminare tutti i dati fittizi prima di aggiungere i vostri prodotti, altrimenti si rischia di eliminare accidentalmente i propri prodotti.

I dati fittizi sono inclusi con il plugin WooCommerce. Se hai installato WooCommerce tramite la dashboard di WordPress, andate online e scaricate sul computer il plugin dalla directory dei plugin di WordPress. Questo sarà più facile che accedere via FTP, andare nella directory dei plugin e scaricare i dati fittizi da lì.

Una volta completato il download, decomprimere il file zip per poter importare il file dummy-data.xml.

Vai su Tools (strumenti) e fare clic su Import (importa):

How to Install and Setup a New WordPress WooCommerce Theme

Non lasciarsi confondere dalla voce "WooCommerce Tax Rates (CSV)". Quest'opzione può essere usata più tardi se si vuole. Per i dati fittizzi di WooCommerce, ti consigliamo di scegliere WordPress.

How to Install and Setup a New WordPress WooCommerce Theme

Probabilmente non avete installato il plugin di WordPress per importare dati, quindi procedete con l'installazione.

How to Install and Setup a New WordPress WooCommerce Theme

Una volta installato, attivatelo e avviatelo per poter fare l'import.

Ricordate dove avete scaricato e decompresso il plugin WooCommerce? Bene! Ora fare clic su Choose File (scegli file) e scegliete il file.

How to Install and Setup a New WordPress WooCommerce Theme

I dati fittizi dovrebbero essere nella cartella decompressa: (woocommerce.versione.numero) > woocommerce > dummy-data.

How to Install and Setup a New WordPress WooCommerce Theme

Aprire la cartella dummy-data e selezionate dummy-data.xml per caricarlo e importarlo.

Questa è l'ultima cosa da fare prima di importare tutti i dati fittizi.

Successivamente si eseguono scelte di import personali, ecco le mie (vedere gli screenshot sotto):

Importare l'autore predefinito "wooteam", invece di crearne uno o utilizzarne uno preesistente. In questo modo sai quali contenuti sono stati importati/creati con questo nome autore (mi raccomando di eliminare l'autore quando si rimuove i dati fittizi e dopo aver finito di installare e impostare il nuovo tema WooCommerce).

Consiglio anche di scaricare e importare gli allegati, per poter disporre di immagini associate a ciascun prodotto (ancora una volta, assicuratevi di eliminare tutte le immagini quando avete finito con i dati fittizi).

Al termine della selezione, inviate:

How to Install and Setup a New WordPress WooCommerce Theme

Visitando yourwebsite.com/shop/ si dovrebbe vedere una sorta di negozio test:

How to Install and Setup a New WordPress WooCommerce Theme

Bene! Ce l'hai fatta!

Non ha un design ben progettato, non credi? Ora installeremo Savoy, un'accattivante tema per WooCommerce.

(Nota: dopo aver finito di installare e configurare il vostro tema, non dimenticate di eliminare i prodotti e le immagini dei dati fittizi prima di iniziare ad aggiungerne di propri).

Passo 2: Installare un tema WooCommerce

Ora, diamo un'occhiata a come installare un tema WooCommerce. Se non avete già scaricato il vostro tema eCommerce per WordPress, procedete e scaricatelo sul computer (assicuratevi di sapere dove si sta scaricando per poterci poi accedere).

Ci sono due diversi modi per installare il tema:

  1. Tramite FTP
  2. Dalla dashboard di WordPress come admin

Caricare il tema via FTP

Se sei a tuo agio a utilizzare l'FTP, connettiti al server e aprite la cartella wp-content > themes. Qui è la posizione in cui caricare il vostro tema. Tuttavia, prima di inviare la cartella decompressa sul server, assicurarsi di inviare proprio i file del vostro tema. Diamo un'occhiata più da vicino utilizzando un tema di esempio di ThemeForest.

Dopo aver decompresso il download, si avranno una serie di cartelle diverse:

How to Install and Setup a New WordPress WooCommerce Theme

Non tutti i temi scaricati saranno simili a questo. A volte la cartella zip che si scarica è effettivamente la cartella del tema. È sempre una buona idea fare un doppio controllo, dato che possono variare da tema a tema.

Il Savoy - Minimalist AJAX WooCommerce Theme include alcune cose extra come documentazione, materiali, ecc... Se si guarda tra tutti i file del cartella del tema Savoy, troverete il vostro tema da poter caricare (savoy.zip).

Se si sta installando il tema via FTP, caricare la cartella del tema scompattato (ad esempio: "savoy") nella cartella dei temi. Se non sei sicuro come utilizzare l'FTP, va bene anche installarlo tramite la dashboard di Wordpress. Personalmente preferisco usare quest'ultima.

Caricare il tema via WordPress

L'installazione di un tema tramite WordPress richiede che la cartella del tema sia compressa (themefolder.zip). Come abbiamo discusso in precedenza, ti consigliamo di controllare di caricare l'effettiva cartella del tema e non tutti i file contenuti nello zip del tema.

In WordPress, aprire Appearance (aspetto) e fare clic su Theme (temi):

How to Install and Setup a New WordPress WooCommerce Theme

Aggiungere un nuovo tema:

How to Install and Setup a New WordPress WooCommerce Theme

Caricare il tema:

Vi ricordate dove si trova il file zip del tema?

(Il nostro tema di esempio si chiama: savoy.zip)

Fare clic su Choose File (scegli file) e selezionatelo:

Una volta installato, è possibile aprire Appearance > Themes in WordPress per vedere se è installato o cliccare per attivarlo subito.

Come si può vedere qui sotto, il tema Savoy è installato correttamente, preme su Activate (attiva):

How to Install and Setup a New WordPress WooCommerce Theme

Ora che il vostro tema WooCommerce è correttamente installato e attivato, vediamo di configurarlo.

Passo 3: configurare un tema WooCommerce

Non tutti i temi si personalizzano allo stesso modo. Come un tema viene progettato e sviluppato ha la sua importanza, quindi è possibile trovare differenze tra questo tutorial e il tema che vi trovate di fronte. In generale, tuttavia, questo dovrebbe favorire la configurazione del tema WooCommerce, senza tenere conto se si sta usando un tema WooCommerce di ThemeForest o altro.

Plugin necessari/consigliati

Dopo aver installato e attivato il tema Savoy, riceverete una notifica con i plugin consigliati:

How to Install and Setup a New WordPress WooCommerce Theme

A volte il vostro tema vi segnala i plugin raccomandati, mentre altri includono consigli nella loro documentazione. Nel tema ci possono essere particolari funzioni, come slider opzionali, che non hanno un proprio codice nel tema, ma vengono predisposti per il loro utilizzo.

Fare clic su Begin installing plugins (inizia installazione plugin) nel tema Savoy per vedere la lista dei plugin consigliati:

How to Install and Setup a New WordPress WooCommerce Theme

Questa lista può variare da tema a tema, ma in questo caso, si può o non, decidere di installarli.

Ad esempio, Savoy raccomanda di usare Contact Form 7, includendo gli stili appropriati, per i form. Ma non si è obbligati a usarlo. Potresti voler usare un plugin tipo Gravity Forms o Ninja Forms.

Un plugin tipo Regenerate Thumbnails è un ottimo plugin da utilizzare per coloro che hanno già delle immagini nel negozio, ma configurate per un tema usato in precedenza. Questo plugin scansionerà l'archivio multimediale di WordPress ridimensionando tutte le immagini da usare con il nuovo tema. Si può o non può decidere di usarlo con i dati fittizi ed evitare del tutto l'uso del plugin (ma vi consiglio di farlo comunque, in modo che tutte le immagini sono ridimensionate correttamente durante la fase di test).

Un plugin come Envato Toolkit, tuttavia, è molto importante con i temi acquistati su ThemeForest, grazie al quale si può essere avvisati di eventuali aggiornamenti del tema.

All'inizio, suggerisco di installare tutti i plugin raccomandati. È sempre possibile rimuovere un plugin di cui non si ha bisogno, più avanti. Invece se non si installa un plugin di cui il tema ha bisogno, si rischia di cadere nella frustrazione di vedere il tema "non funzionante" come nella demo.

Una volta installati, alcuni o nessuno dei plugin consigliati e/o richiesti, ricordate di attivarli:

How to Install and Setup a New WordPress WooCommerce Theme

Se si usa un tema acquistato su ThemeForest, ad esempio il nostro tema di esempio Savoy, ricordate di inserire il nome utente del Marketplace e la API key segreta nel Toolkit di Envato, in modo da far funzionare adeguatamente gli aggiornamenti.

Personalizzare

Questa è la parte più divertente quando si installa e si configura il tema WooCommerce, per poi vedere i cambiamenti prendere vita online.

È possibile accedere alla personalizzazione di WordPress dal menu Appearance > Customize. O aprire la pagina dei temi su Appearance > Themes e quindi fare click su Customize:

How to Install and Setup a New WordPress WooCommerce Theme

Benvenuto alla personalizzazione di WordPress:

How to Install and Setup a New WordPress WooCommerce Theme

Ecco dove faremo qualche modifica prima di approfondire la configurazione.

La prima cosa è Site Identity (identità del sito). Qui è dove possibile modificare il titolo del sito e lo slogan.

How to Install and Setup a New WordPress WooCommerce Theme

A volte è possibile aggiungere un'immagine personalizzata nell'intestazione e/o aggiungere una favicon per il sito (questo può variare da tema a tema).

Poi, configurare i menu:

How to Install and Setup a New WordPress WooCommerce Theme

Se si ha davanti una nuova configurazione di WooCommerce o non sono state create tutte le pagine, non si ha molto da fare in questa fase di "personalizzazione". Con WooCommerce installato, tuttavia, esso aggiungerà automaticamente alcune pagine che di sicuro vorrete inserire nel menu.

Puoi facilmente aggiungere e creare un nuovo menu:

How to Install and Setup a New WordPress WooCommerce ThemeHow to Install and Setup a New WordPress WooCommerce Theme

Una volta che hai aggiunto un menu (o più), è possibile selezionare dove si desidera visualizzarlo come anche le varie voci (ad esempio collegamenti personalizzati, post, pagine, prodotti, ecc.).

How to Install and Setup a New WordPress WooCommerce Theme

Questo dà un sacco di flessibilità su come vorresti far funzionare il vostro sito WooCommerce. Non abbiate paura di analizzarlo o modificarlo in seguito.

Prima di lasciare questa schermata, c'è da dire a WordPress quale pagina usare come pagina principale del negozio:

How to Install and Setup a New WordPress WooCommerce Theme

Seleziona Front page display come A static page e la pagina Shop come Front page. La pagina Shop del negozio è stata creata automaticamente quando si è installato il plugin WooCommerce.

Per la pagina Posts, dipende dove o se non si desidera un blog sul sito WooCommerce. Se si vuole, create una pagina per il blog e selezionatela in questa schermata di personalizzazione di WordPress o nel menu Settings  > Reading.

I risultati

Con alcune configurazioni di base, è possibile vedere quanto è bello il negozio usando un tema WooCommerce per wordPress:

How to Install and Setup a New WordPress WooCommerce Theme

La pagina con il singolo prodotto è notevole:

How to Install and Setup a New WordPress WooCommerce Theme

Essa comprende anche i prodotti correlati:

How to Install and Setup a New WordPress WooCommerce Theme

Il tema Savoy - Minimalist AJAX WooCommerce permette di regolare facilmente molti elementi all'interno del sito e può contenere ulteriori aspetti non affrontati in questo tutorial (assicurarsi di leggere la documentazione del vostro tema per saperne di più). Ho solo mostrato le modifiche che si possono applicare nella personalizzazione di WordPress che solitamente possono essere fatte su qualsiasi tema che si andrà a utilizzare.

Conclusione

Con un tema WordPress, progettato specificamente per WooCommerce, si può chiaramente vedere quanto siano facili questi primi passi iniziali nella configurazione del vostro nuovo tema WooCommerce e come appare online.

Ci sono molti utili plugin WooCommerce disponibili su CodeCanyon e alcuni splendidamente progettati ed efficaci con temi WooCommerce su ThemeForest.

Guardare i temi Woocommerce più venduti su ThemeForest potrebbe essere un buon punto di partenza (Savoy è uno dei miei preferiti). Sono sicuro che troverete qualcosa di adatto per il vostro negozio eCommerce. O sfogliate quelli in evidenza per trovare quello giusto per il vostro negozio:

Cosa stai vendendo con WooCommerce?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.