Vuoi personalizzare la pagina prodotto del tuo store?
In questo articolo ti mostro come creare una pagina prodotto personalizzata e applicarla a una o più categorie di prodotti.
Dopo aver letto questo articolo potrai creare il tuo negozio personalizzato
Quando guardo le pagine prodotto di un E-commerce mi rendo subito conto se è stato creato con woocommerce o meno.
Spesso chi apre un E-commerce senza l’aiuto di un professionista non perde molto tempo a personalizzare il proprio store “accontentandosi” del layout di default.
In questo articolo ti mostrerò come creare una pagina prodotto da zero utilizzando Elementor.
La prima cosa da fare è andare sulla voce Template nel menu di WordPress e poi su nuovo
Nella schermata che si apre dobbiamo scegliere nel menu a discesa la voce Singolo Prodotto e poi inserire il nome del template
A questo punto Elementor ci proporrà alcuni template già pronti possiamo scegliere uno questi e poi modificarlo oppure costruire da zero il nostro template.
Vediamo come costruire da zero un template da applicare ai prodotti del nostro store.
Per prima cosa cambiamo il layout cliccando sull’icona dell’ingranaggio in basso a sinistra e nel campo Layout Pagina scegliamo Elementor Canvas.
Ora che abbiamo la pagina vuota dobbiamo innanzitutto inserire l’Header della pagina puoi creare un Header solo per lo store oppure inserire l’leader che utilizzi su tutte le pagine del sito.
Inserito l’Header dobbiamo passare alla creazione della pagina prodotto.
Avrai sicuramente notato che nella colonna dei Widget è comparsa una sezione Prodotto con dei nuovi Widget.
Vediamo da vicino questi widget e come usarli.
Sommario
I Widget
Breadcrumb WooCommerce
Innanzitutto capiamo cosa sono i breadcrumbs e perchè sono così importanti.
I breadcrumds aiutano la navigazione degli utenti perchè consentono ad ogni visitatore di comprendere la propria posizione all’interno del sito.
L’utilizzo dei breadcrumbs migliora l’usabilità del sito favorendo anche la SEO.
E’ importante utilizzarli anche nel tuo store per questo motivo quando andrai a creare la pagina prodotto ti consiglio di inserire questo widget subito dopo l’header.
All’interno del widget puoi cambiare:
- Il colore del test
- Il colore del link
- La tipografia (tipo di carattere, dimensione etc)
- Allineamento
Titolo Prodotto
su questo widget c’è poco da dire serve a mostrare il titolo del prodotto di quella pagina
Immagini Prodotto
questo widget ti consente di inserire le immagini del prodotto che hai aggiunto alla scheda del prodotto.
Le impostazioni di questo widget sono scarse le uniche cose che puoi fare sono aggiungere un bordo all’immagine principale e alle miniature.
Aggiungere un badge “Prodotto in offerta” attivando il campo Vendita lampo
Prezzo Prodotto
Il widget ti consente di mostrare nella pagina il prezzo del prodotto e se il prodotto è in promozione mostrerà sia il prezzo pieno con una barra sopra sia il prezzo in offerta.
Anche in questo widget puoi cambiare
- il colore di entrambi i prezzi
- la tipografia
- la spaziatura
Aggiungi al Carrello
Questo widget è ti consente di aggiungere il tasto aggiungi al carrello nella pagina prodotto.
Tra le opzioni troviamo la possibilità di cambiare il colore di sfondo del pulsante, del testo e del bordo.
Le impostazioni Quantità e Variazioni ti consentono di modificare colore e tipografia anche per il campo quantità e se presente quello delle variazioni (è presente se hai configurato i prodotti variabili).
Votazione Prodotto
Con questo widget puoi inserire nella pagina la valutazione del prodotto fatta dai clienti espressa in stelle e impostare il colore delle stelle.
Magazzino Prodotto
Mostra se il prodotto è disponibile in magazzino, questa funzione però è visibile solo se hai attivato la gestione del magazzino.
Breve Descrizione
Riporta la descrizione che hai inserito nella pagina prodotto nel campo Breve descrizione del Prodotto.
Contenuto prodotto
Riporta la descrizione inserita nella pagina prodotto
Schede Prodotto
Utilizza le tab per descrizione e recensioni.
Prodotto correlato
Questo widget ti consente di mostrare i prodotti correlati a quello presente nella pagina prodotto.
Utilizzando il campo Ordina per puoi scegliere quale tipo di prodotti mostrare es. i più popolari.
Upsell
Questa impostazione ti consente di mostrare prodotti di valore maggiore o minore ma per funzionare devi aver impostato nella scheda prodotto i prodotti collegati
Combinando questi widget puoi creare la tua pagina prodotto personalizzata che ti aiuterà a distinguerti dagli altri store.
Naturalmente non devi usare tutti i widget puoi scegliere quelli che ritieni essere più utili per i tuoi clienti.
Quello che deve guidarti nella costruzione della pagina prodotto è la chiarezza e l’usabilità due condizioni importantissime per chi vuole creare uno store di successo.
Una volta che avrai completato la creazione della pagina non devi fare altro che scegliere dove utilizzarla.
Cliccando sul tasto Pubblica si aprirà una schermata che ti chiede dove vuoi visualizzare il template che hai creato
Puoi scegliere tra:
- Prodotti
- Categorie
- Figlio categorie prodotti
- Tag
- Prodotti da autore
Questo ti consente di creare un template diverso per ogni categoria etc.
In un altro articolo ti mostrerò come costruire la pagina prodotti.
Conclusioni
In questo articolo abbiamo visto come creare una pagina prodotto personalizzata.
Ti ho mostrato il funzionamento dei widget.
Il mio consiglio è di non esagerare con la personalizzazione, nel senso che ci sono alcune azioni che il nostro cervello fa in automatico perchè conosce già la posizione degli elementi.
Spostare per esempio il tasto aggiungi al carrello in una posizione inusuale può comportare una perdita di clienti.
Per questo motivo studia bene la posizione di ogni widget e testa se l’azione è semplice o meno.
Se non lo è cambia la posizione del widget!
Spero che questo articolo ti sia utile, se hai domande scrivile pure nei commenti
A presto!