Tema Storefront: come installarlo e configurarlo

Pubblicato: 2018-01-12

Storefront è uno dei temi più flessibili ed estensibili quando si tratta di lanciare un negozio WooCommerce utilizzando WordPress.

Grazie alla sua architettura di codice pulita, è diventato estremamente popolare tra gli utenti e attualmente più di 100.000 negozi online utilizzano Storefront come tema WordPress.

Installazione del tema WooCommerce Storefront

Esistono due modi per installare il tema Storefront, sia cercando il tema dalla dashboard di WP o caricando il tema manualmente.

Installazione tramite dashboard di WordPress

Il modo più veloce per installare Storefront è attraverso la dashboard di WordPress. Segui questi passaggi per installare Storefront tramite la dashboard di WordPress.

Vai su Aspetto > Temi > Aggiungi nuovo
Digita " storefront " nella casella di ricerca e premi invio.
Passa il mouse sopra lo screenshot di Storefront.
Seleziona il pulsante ' Installa '.
Fare clic su Attiva

Installazione manuale di Storefront

Scarica l'ultima versione di Storefront da wordpress.org
Vai su Aspetto > Temi > Aggiungi nuovo
Clicca su Carica tema e scegli il file zip precedentemente scaricato.
Fare clic su Installa ora
Fare clic su Attiva

Configurazione della home page

Storefront ha un modello di home page integrato che è ben congegnato. La sua struttura pulita aiuterà il tuo pubblico a trovare facilmente i prodotti che vendi.

Ci sono 6 sezioni nel modello predefinito della home page di Storefront. Ma puoi aggiungere o eliminare la sezione in base alle tue esigenze.

Sezioni predefinite della home page:

Contenuto della pagina
Categorie di Prodotto
Prodotti recenti
prodotti sponsorizzati
Prodotti popolari
Prodotti in vendita
I prodotti più venduti

Assegnazione del modello di home page

Per impostare il modello di home page, attenersi alla seguente procedura:

Vai su Dashboard -> Pagine e crea una pagina intitolata " Home " o qualsiasi cosa ti piaccia.
Aggiungi qualsiasi contenuto di benvenuto che ti piace, che verrà visualizzato sopra i prodotti.
Sul lato destro, troverai una casella intitolata " Attributi della pagina "
Seleziona " Home page " dal menu a discesa " Modello ".
Fare clic su Pubblica o Aggiorna per salvare la modifica.

Visualizzazione del modello di home page

Dopo aver pubblicato la pagina, ora devi visualizzare questa home page come prima pagina del tuo sito web. Quindi chiunque atterri sul tuo sito web per prima cosa vedere questa pagina. Per configurarlo, attenersi alla seguente procedura:

Vai su Dashboard > Impostazioni > Lettura
In Visualizza la tua home page seleziona Una pagina statica (seleziona sotto)
Seleziona la pagina di assegnazione del modello di home page precedente nel menu a discesa Homepage .
Fare clic su Salva modifiche

Riordina le sezioni della home page di Storefront

Puoi modificare l'ordine delle sezioni della Homepage di Storefront utilizzando gli hook o utilizzando un plug-in chiamato Homepage Control. Segui i passaggi seguenti per riordinare le sezioni della tua home page:

Scarica e installa il controllo della home page
Vai su Aspetto -> Personalizza -> Controllo home page
Trascina e riordina le sezioni in base alle tue esigenze.
Fare clic su Salva e pubblica per salvare le modifiche.

Configurazione del menu di navigazione

Nel tema Storefront puoi visualizzare il menu in 3 posizioni.

Menu principale: appare appena sotto il logo del sito.
Menu secondario: accanto al logo vicino alla casella di ricerca.
Menu palmare: menu per dispositivi mobili.

Impostazione dei menu

Per impostazione predefinita, se non è impostato un menu principale specifico, WordPress visualizza tutte le tue pagine come menu principale. A volte confonde gli utenti e dà loro difficoltà a capire come queste pagine siano entrate nel menu.

Creazione di un nuovo menu e aggiunta di pagine

Vai al Pannello di amministrazione quindi, Aspetto> Menu
In alto troverai il campo Nome menu. Scrivi qui il nome del tuo menu.
Dal lato sinistro fai clic su Pagine (supponendo che tu voglia aggiungere pagine al menu)
Fare clic su Visualizza tutto per ottenere un elenco di tutte le pagine pubblicate.
Spunta le pagine che vuoi che appaiano nel menu.
Dopo aver selezionato la pagina, fare clic sul pulsante Aggiungi al menu.
Trascina e rilascia la voce di menu per riordinarli a tuo piacimento.
Fare clic su Salva menu

Assegnazione del menu

Dopo aver creato il menu, assegna il menu alla posizione in cui desideri che venga visualizzato. Passa a Aspetto > Menu > Impostazioni menu e seleziona la posizione dalla casella di controllo Visualizza posizione .

Aggiunta di categorie di prodotti al tuo menu

Vai al Pannello di amministrazione quindi, Aspetto> Menu
Fai clic su Opzioni schermo in alto a sinistra e controlla Categorie di prodotti
Ora nel riquadro di sinistra verrà visualizzata una scheda Categorie di prodotti.
Fare clic sulla scheda Categorie di prodotti per espandere, selezionare le categorie
Dopo aver selezionato, fare clic sul pulsante Aggiungi al menu .
Trascina e rilascia la voce di menu per riordinarli a tuo piacimento.
Fare clic sul menu Salva

Impostazioni del widget

Storefront ti consente di visualizzare sei regioni widget in 3 aree diverse.

Barra laterale: a sinistra o a destra del contenuto principale del sito,
Sotto l'intestazione: appena sotto l'intestazione del sito e sopra il contenuto.
Colonna 1 del piè di pagina – Area del piè di pagina
Colonna 2 del piè di pagina – Area del piè di pagina
Colonna 3 del piè di pagina – Area del piè di pagina
Colonna 4 del piè di pagina – Area del piè di pagina

Configurazione di WooCommerce

Installazione di WooCommerce

Vai su Dashboard > Plugin > Aggiungi nuovo > Cerca plugin
Cerca "WooCommerce".
Fare clic su Installa ora .
Fare clic su Attiva .

Configurazione di WooCommerce

Dopo aver attivato WooCommerce, ti verrà chiesto di installare WooCommerce con una procedura guidata. Si occuperà di tutte le impostazioni iniziali. È diviso in 6 parti.

Imposta pagina : configura automaticamente le pagine essenziali (Negozio, Carrello, Cassa, Il mio account).
Posizione del negozio : configura la posizione del negozio, la valuta e l'imposta sulle vendite
Spedizione : configurare l'unità di peso e l'unità di misura
Pagamenti : imposta il gateway di pagamento.
Tema : installa il tema compatibile con WooCommerce.
Pronto – (opzionale) Consenti a WooCommerce di raccogliere informazioni sull'utilizzo.

Puoi tutte queste impostazioni quando vuoi dalla dashboard di WooCommerce.

Aggiungi un prodotto a WooCommerce

Vai alla dashboard di WordPress
Fare clic su Prodotti > Aggiungi nuovo
Scrivi il nome o il titolo del prodotto nel campo Nome prodotto .
Scrivi la descrizione del tuo prodotto nell'editor sottostante.
Ora devi caricare un'immagine in primo piano del tuo prodotto e un'immagine aggiuntiva in una galleria di prodotti.
Uno a destra troverai la casella intitolata Immagine del prodotto e galleria del prodotto
Carica l'immagine in primo piano nell'immagine del prodotto e le immagini aggiuntive nella galleria del prodotto
Fare clic su Pubblica .

Impostazione del prezzo e dell'attributo del prodotto

Per impostare il prezzo del prodotto Vai su Dashboard > Prodotti e seleziona un prodotto qualsiasi. Quindi scorri verso il basso fino alla sezione Dati prodotto. Ecco una breve descrizione di tutte le impostazioni della sezione dei dati del prodotto:

Tipologia di prodotto

Prodotto semplice : Un unico prodotto semplice.
Prodotto raggruppato : un prodotto che fa parte di una collezione.
Prodotto esterno/affiliato : prodotto elencato nel tuo negozio ma il prodotto effettivo è venduto altrove.
Prodotto variabile : Un prodotto con variazioni (taglia, colori)
Prodotto virtuale : un prodotto che non necessita di spedizione.
Prodotto scaricabile : un prodotto in cui è necessario fornire un file scaricabile.

Generale

Prezzo normale : prezzo normale del prodotto.
Prezzo di vendita: Prezzo scontato del prodotto.

Inventario

SKU : Stock Keep Unit (SKU) tiene traccia dei prodotti
Gestisci le scorte : abilita la gestione delle scorte
Stato delle scorte: indipendentemente dal fatto che il prodotto sia disponibile o esaurito.
Venduti singolarmente : vendibili in un unico ordine.

Spedizione

Peso: Peso del prodotto.
Dimensioni: lunghezza, larghezza e altezza del prodotto.
Classe di spedizione: raggruppa prodotti di tipo simile a un determinato metodo di spedizione.

Prodotti collegati

Upsell : mostra i prodotti correlati sotto la pagina dei dettagli del prodotto.
Vendite incrociate : mostra i prodotti correlati nella pagina del carrello.
Attributi : seleziona l'attributo globale dei tuoi prodotti.

Avanzate

Nota di acquisto : Nota da inviare al cliente dopo aver completato l'acquisto.
Ordine menu : posizione di ordinazione personalizzata per questo prodotto.
Abilita recensioni : abilita o disabilita le recensioni dei prodotti.

Personalizzazione della vetrina

Come aggiungere un logo

Segui questi passaggi per aggiungere e visualizzare il logo sul tuo sito web:
1. Vai su WordPress Admin quindi Aspetto > Personalizza
2. Quindi vai su Identità del sito > Logo
3. Fare clic su Seleziona logo per caricare l'immagine del logo. (Dimensione immagine consigliata: 470px X 110px)
4. Fare clic su Pubblica.

Dove caricare la favicon del sito

Segui questi passaggi per aggiungere e visualizzare la favicon sul tuo sito web:
1. Vai su WordPress Admin quindi Aspetto > Personalizza
2. Quindi vai su Identità del sito > Icona del sito
3. Fare clic su Seleziona immagine per caricare l'immagine del logo. (Dimensione immagine consigliata: 512px X 512px)
4. Fare clic su Pubblica.

Come modificare l'archivio dei post o il layout del blog

Vai su Aspetto > Personalizza > Personalizza blog > Archivi post
Seleziona il layout da Layout post archivio
Fare clic su Pubblica

Come modificare l'archivio dei post o la colonna del blog

Vai su Aspetto > Personalizza > Personalizza blog > Archivi post
Seleziona il numero di colonna (larghezza intera, 2 colonne, 3 colonne e 4 colonne) dalla colonna post archivio
Fare clic su Pubblica

Come modificare il layout del singolo post o dell'articolo

Vai su Aspetto > Personalizza > Personalizza blog > Post singolo
Seleziona il layout da Layout a post singolo
Fare clic su Pubblica

Come cambiare il carattere

Vai su Aspetto > Personalizza > Stili generali > Tipografia
Seleziona il carattere da Abbinamenti caratteri
Fare clic su Pubblica

Personalizzazione WooCommerce

Come modificare il layout della pagina del negozio

Vai su Aspetto > Personalizza > WooCommerce > Pagina Negozio – Elenchi di prodotti
Seleziona il layout da Layout archivio prodotti
Fare clic su Pubblica

Come modificare il layout della pagina dei dettagli del prodotto

Vai su Aspetto > Personalizza > WooCommerce > Pagina Negozio – Elenchi di prodotti
Seleziona il layout da Layout archivio prodotti
Fare clic su Pubblica