Come personalizzare le pagine dei prodotti di WooCommerce (metodo senza codice)

Volete personalizzare le pagine dei prodotti di WooCommerce per ottenere più vendite?

Una pagina di prodotto ben progettata è fondamentale per catturare l’attenzione dei potenziali clienti. Più la pagina del prodotto è attraente e informativa, più è facile che il cliente prenda una decisione d’acquisto.

In questo articolo vi mostreremo come personalizzare le pagine dei prodotti di WooCommerce senza scrivere alcun codice.

Perché personalizzare le pagine dei prodotti WooCommerce in WordPress?

Per impostazione predefinita, WooCommerce crea pagine di prodotto nel vostro negozio online durante la procedura guidata di configurazione. Purtroppo, non sono le più belle né le più ottimizzate per le conversioni.

Ottimizzando le pagine dei prodotti, potete aiutare gli acquirenti a decidere se il prodotto è adatto a loro e possibilmente convertire più visitatori in acquirenti. È uno dei modi più semplici per aumentare le entrate senza aumentare il traffico verso il vostro negozio.

Vediamo quindi come personalizzare le pagine dei prodotti di WooCommerce senza l’uso di codice. Potete utilizzare questi collegamenti rapidi per navigare in questa guida:

Video tutorial

Subscribe to WPBeginner

Se preferite le istruzioni scritte, continuate a leggere.

Passo 1: Installare e attivare il plugin SeedProd

Il modo più semplice per creare una pagina di prodotto WooCommerce personalizzata è utilizzare SeedProd.

SeedProd è il miglior costruttore di pagine WordPress drag-and-drop e viene fornito con oltre 300 modelli progettati professionalmente.

Ancora meglio, potete usare il costruttore di temi avanzato di SeedProd per creare un tema WordPress personalizzato senza scrivere una sola riga di codice.

È possibile utilizzare questo costruttore di temi drag-and-drop per personalizzare ogni parte del vostro negozio online, comprese le pagine dei prodotti.

SeedProd dispone anche di modelli WooCommerce e blocchi eCommerce già pronti che consentono di creare rapidamente un negozio online ad alta conversione.

Si tenga presente che questo metodo sostituirà il tema WooCommerce attuale.

La prima cosa da fare è installare e attivare il plugin SeedProd. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, andare su SeedProd ” Impostazioni e inserire la chiave di licenza.

Queste informazioni si trovano nel proprio account sul sito web di SeedProd. Dopo aver inserito la chiave di licenza, fare clic sul pulsante “Verifica chiave”.

Passo 2: Scegliere un kit di modelli WooCommerce

Fatto questo, è il momento di scegliere il kit di modelli WooCommerce da utilizzare per il vostro negozio online. Basta andare su SeedProd ” Theme Builder e cliccare sul pulsante ‘Theme Template Kits’.

Poiché stiamo creando un tema WooCommerce personalizzato, fare clic sulla scheda “WooCommerce” per vedere tutti i diversi kit eCommerce.

Per visualizzare l’anteprima di un disegno, è sufficiente passarci sopra il mouse e cliccare sulla lente di ingrandimento.

Questo apre il kit di modelli in una nuova scheda.

Si tratta di un’anteprima dal vivo, per cui è possibile vedere gli altri progetti del kit facendo clic sui link, sui menu di navigazione, sui pulsanti e su altri contenuti interattivi.

Poiché state creando una pagina di prodotto WooCommerce personalizzata, assicuratevi di controllare il design della pagina di prodotto. Verificate se può essere una buona base da personalizzare in seguito.

Quando si trova un kit di modelli che si desidera utilizzare, passarci sopra e fare clic sul segno di spunta quando appare. In questa guida utilizziamo il tema WooCommerce Starter, ma potete utilizzare qualsiasi modello desideriate.

SeedProd importerà l’intero kit nel vostro sito web WordPress, in modo da poterlo utilizzare per creare un archivio prodotti personalizzato, una pagina del negozio, l’indice del blog e altro ancora.

Per vedere tutti questi modelli, visitate SeedProd ” Theme Builder.

Passo 3: personalizzare il modello di pagina del prodotto WooCommerce

Dopo aver installato il modello, si è pronti per iniziare a personalizzare la pagina del prodotto.

Per iniziare, passate il mouse sul modello della pagina del prodotto e fate clic sul link “Modifica design” quando appare.

Questo aprirà il modello nell’editor drag-and-drop di SeedProd, con un’anteprima del modello WooCommerce a destra e alcune impostazioni del blocco a sinistra.

SeedProd mostrerà un esempio di come apparirà la pagina del prodotto utilizzando il contenuto di uno dei vostri prodotti WooCommerce.

Tutti i modelli WooCommerce sono dotati di blocchi integrati, che sono una componente fondamentale di tutti i design di SeedProd.

Per personalizzare un blocco, è sufficiente fare clic per selezionarlo nell’anteprima della pagina e quindi apportare le modifiche nel menu di sinistra.

Ad esempio, il modello è dotato di un blocco di prodotti in primo piano che può essere personalizzato in diversi modi.

Per iniziare, è possibile modificare le dimensioni e l’allineamento del blocco utilizzando le impostazioni del menu di sinistra.

Altre impostazioni si trovano nella scheda “Avanzate”. Qui è possibile far risaltare l’immagine aggiungendo un bordo o un’ombra, aggiungendo un’animazione CSS e altro ancora.

Man mano che si apportano modifiche, l’anteprima dal vivo si aggiorna automaticamente, in modo da poter provare diverse impostazioni per vedere quale sia l’aspetto migliore per il vostro negozio online.

Il modello WooCommerce dispone anche di un pulsante di invito all’azione Aggiungi al carrello. Questo pulsante consente agli acquirenti di acquistare i vostri prodotti, per cui dovrete farlo risaltare.

Per cominciare, è possibile sostituire Aggiungi al carrello con un messaggio personalizzato, ad esempio Compralo subito o Ricevilo oggi. Per effettuare questa modifica, è sufficiente selezionare il pulsante Aggiungi al carrello e digitare il nuovo testo nel campo ‘Testo del pulsante’.

Si può anche aggiungere un carattere icona al pulsante, per aiutare i visitatori a capire a colpo d’occhio cosa fa questo pulsante.

SeedProd è dotato di una libreria integrata di oltre 1400 icone Font Awesome che è possibile utilizzare nelle pagine dei prodotti. Nel menu di sinistra, fate clic per espandere la sezione “Icone”.

È ora possibile scegliere se mostrare l’icona prima o dopo il testo del pulsante.

È sufficiente prendere una decisione e fare clic sul pulsante “Scegliere l’icona”.

Ora vedrete tutte le diverse icone di Font Awesome che potete utilizzare. Quando trovate un’icona che vi piace, fateci un clic.

Quando si è soddisfatti del messaggio del pulsante, è possibile modificarne l’aspetto facendo clic sulla scheda “Modelli”. Qui troverete diversi modelli di pulsanti che potrete utilizzare.

Per utilizzare uno qualsiasi di questi disegni, è sufficiente fare clic su quello desiderato.

Dopo aver scelto un modello, è possibile perfezionare l’aspetto del pulsante facendo clic sulla scheda “Avanzate”. Qui è possibile modificare la spaziatura tra il pulsante e la casella della quantità, aumentare il raggio del bordo per creare angoli curvi e altro ancora.

Un’altra opzione è quella di aprire il menu a tendina ‘Stile pulsante’ e scegliere un nuovo stile dall’elenco.

La maggior parte delle impostazioni si spiega da sé, quindi vale la pena di esaminarle per vedere i diversi tipi di effetti che si possono creare.

Un’altra sezione importante è il blocco Schede dati prodotto. Qui vengono mostrate agli acquirenti informazioni dettagliate, come i tag, gli attributi e le categorie dei prodotti.

Per questo motivo, vale la pena di fare clic per selezionare il blocco e vedere quali modifiche si possono apportare nel menu di sinistra. Ad esempio, è possibile modificare il colore dello sfondo, il colore del testo, aumentare il padding e altro ancora.

Per rimuovere uno dei blocchi predefiniti, è sufficiente passare il mouse su di esso.

Quindi, fare clic sull’icona del cestino quando appare.

È inoltre possibile spostare i blocchi all’interno della pagina utilizzando il movimento di trascinamento nell’editor.

Passo 4: Ottimizzare la pagina del prodotto WooCommerce personalizzata

I blocchi integrati nel template sono un ottimo inizio, ma per garantire i migliori risultati dalle pagine dei prodotti, è necessario ottimizzarle.

SeedProd ha molti blocchi WooCommerce che potete utilizzare per creare un mercato o un negozio online ad alta conversione. Per aiutarvi, ecco alcuni blocchi che potreste voler aggiungere alla vostra pagina di prodotto WooCommerce.

Mostra i prodotti WooCommerce correlati

Potreste essere in grado di ottenere più vendite e aumentare il valore medio dell’ordine mostrando articoli correlati nelle pagine dei vostri prodotti. Potrebbe trattarsi di prodotti che gli acquirenti acquistano spesso insieme o di articoli che si completano a vicenda.

Ad esempio, se un cliente acquista un computer portatile, potrebbe essere interessato anche a una borsa per computer portatile.

SeedProd è dotato di un blocco di prodotti correlati già pronto. Tuttavia, per ottenere il massimo da questo blocco, è necessario impostare i prodotti collegati nel plugin WooCommerce, come si può vedere nell’immagine seguente.

Per istruzioni passo passo su come aggiungere prodotti collegati, consultare la nostra guida su come fare upselling in WooCommerce.

A questo punto, è sufficiente trovare il blocco Prodotti correlati nell’editor di SeedProd e trascinarlo nel layout.

Per impostazione predefinita, il blocco mostra un prodotto correlato in un’unica colonna.

È possibile mostrare più prodotti digitando nuovi numeri nelle caselle “Colonne” e “Messaggi per pagina” o facendo clic sui pulsanti freccia.

Se si visualizzano più prodotti, è possibile modificare la disposizione degli articoli utilizzando la casella “Ordina per”. Ad esempio, si possono mostrare per primi i prodotti con le valutazioni più alte, poiché i clienti sembrano apprezzarli di più.

È inoltre possibile aprire il menu a tendina “Ordine” e scegliere se visualizzare gli elementi correlati in ordine crescente (ASC) o decrescente (DESC).

Aggiungi una stella di valutazione

Mostrare una valutazione in stelle per ogni prodotto può aiutare a rassicurare gli acquirenti sulla qualità dei vostri articoli. Per questo motivo, si consiglia di trascinare il blocco Valutazione in stelle nel proprio progetto.

Per ottenere i migliori risultati, si consiglia di mostrare la valutazione in stelle nella parte superiore dello schermo, dove è facile per i clienti individuarla. Questo può aiutare gli acquirenti a prendere decisioni d’acquisto più rapide, poiché possono vedere immediatamente se altri acquirenti raccomandano un prodotto.

Sfruttare la FOMO mostrando lo stock di prodotti

LaFOMO, o “paura di perdersi”, incoraggia gli acquirenti ad agire subito.

Se vendete articoli in edizione limitata o avete regolarmente una piccola quantità di scorte, potreste voler mostrare il numero di prodotti rimanenti. Questo può convincere gli acquirenti a comprare subito piuttosto che aspettare e rischiare che il prodotto sia esaurito.

Per visualizzare queste informazioni, trascinare il blocco Product Stock nel progetto.

Per impostazione predefinita, il blocco visualizza il numero di articoli rimanenti, seguito da “in stock”. È possibile aggiungere il proprio messaggio a questo testo predefinito.

Per farlo, è sufficiente digitare nel piccolo editor di testo nel menu di sinistra. Se si aggiunge del testo, fare attenzione a non modificare il tag ‘[sp_product_stock]’, che consente a SeedProd di mostrare il numero totale di articoli rimanenti.

Sostituire l’immagine in primo piano con un prodotto

Un’immagine in primo piano di un prodotto consente agli acquirenti di vedere cosa stanno acquistando in un negozio online.

Tuttavia, a volte è possibile sostituire una singola immagine in evidenza con una galleria di prodotti. Ad esempio, potreste mostrare lo stesso prodotto da diverse angolazioni. Alcuni negozi utilizzano anche immagini interattive a 360 gradi per consentire agli acquirenti di esplorare un prodotto in modo più dettagliato.

Se avete aggiunto una galleria ai vostri prodotti WooCommerce, allora ha senso sostituire il blocco Product Featured Image predefinito con un blocco galleria.

Per farlo, è sufficiente passare il mouse sul blocco Prodotto in primo piano e cliccare sull’icona del cestino quando appare.

È quindi possibile trovare il blocco Immagine della galleria di prodotti nel menu di sinistra e trascinarlo nel layout della pagina.

Si consiglia di aggiungere questo blocco all’inizio della pagina, in modo che i visitatori possano vedere immediatamente cosa stanno acquistando.

Gli acquirenti possono ingrandire l’immagine passando il mouse sulla galleria dei prodotti.

Per impostazione predefinita, l’icona dello zoom appare nell’angolo superiore destro dell’immagine in primo piano, ma è possibile modificarla utilizzando i cursori “Posizione in alto” e “Posizione a destra”.

È inoltre possibile ingrandire o rimpicciolire l’icona della lente d’ingrandimento utilizzando il cursore “Dimensione carattere” o modificare il colore dell’icona e dello sfondo.

È anche possibile aggiungere bordi intorno alle diverse immagini utilizzando le impostazioni dei bordi “Bordo immagine” e “Miniature”.

Creare un’eco sui social media con i pulsanti di condivisione

Se un acquirente condivide il vostro prodotto sui social media, può portare più persone al vostro negozio online. Per questo motivo, è una buona idea aggiungere i pulsanti di condivisione sociale alle pagine dei prodotti.

SeedProd dispone di un blocco per la condivisione sociale che supporta Facebook, Twitter, LinkedIn e Pinterest. È sufficiente trascinare questo blocco sulla pagina per aggiungere automaticamente i pulsanti di condivisione di Facebook e Twitter.

Per aggiungere altre reti sociali, è sufficiente fare clic sul pulsante “Aggiungi nuova condivisione”.

È quindi possibile scegliere un sito di social media dal menu a discesa.

Dopo aver aggiunto tutte le reti che si desidera utilizzare, è possibile modificare le dimensioni dei pulsanti di condivisione utilizzando il menu a tendina “Dimensioni”.

I pulsanti di condivisione sociale più grandi risaltano maggiormente, anche se possono distrarre dagli altri contenuti della pagina, compresa la call to action Aggiungi al carrello.

Mostrare le testimonianze dei clienti e le recensioni aziendali

WooCommerce consente ai clienti di recensire i vostri singoli prodotti, ma potreste anche voler mostrare le testimonianze dei clienti. Potrebbero essere citazioni delle vostre migliori recensioni, commenti sul vostro eccellente servizio clienti o qualsiasi altro contenuto che vogliate mettere in evidenza.

Il blocco Testimonianze di SeedProd consente di creare testimonianze a rotazione, un ottimo modo per mostrare molte informazioni in poco spazio.

Per ulteriori informazioni, consultate la nostra guida su come aggiungere testimonianze a rotazione in WordPress.

Evidenziare i prodotti visti di recente in WooCommerce

Una sezione “visti di recente” incoraggia i clienti a rivedere i prodotti che hanno visto di recente ma che non hanno aggiunto al carrello. Questo aiuta i clienti a confrontare i prodotti e a trovare l’articolo che fa per loro.

Inoltre, offre loro la possibilità di cambiare idea e di acquistare un prodotto che hanno visitato di recente ma che non hanno aggiunto al loro carrello.

Detto questo, è possibile aggiungere il blocco Prodotti recenti di SeedProd al proprio progetto.

Dopo aver aggiunto il blocco, è possibile modificare il numero di colonne utilizzando le impostazioni nel menu di sinistra.

Se si desidera mostrare molti prodotti diversi, è possibile aggiungere la paginazione attivando la levetta “Paginazione”.

Se si attiva la “Paginazione”, si avrà accesso ad alcune impostazioni aggiuntive.

Per iniziare, è possibile mostrare il numero totale di risultati nella parte superiore del blocco Prodotti recenti, attivando la levetta “Mostra conteggio articoli”.

Si consiglia inoltre di attivare il cursore “Mostra ordine per”, che consente ai visitatori di ordinare i prodotti recenti.

Come si può vedere nell’immagine seguente, questo aggiunge un menu a tendina “Ordinamento predefinito” all’area.

Mostrare i prodotti WooCommerce più popolari

Potreste voler mostrare i prodotti più venduti o più quotati nelle vostre pagine di prodotto. Poiché questi articoli hanno già un buon rendimento, mostrarli a un maggior numero di persone può essere un modo semplice per ottenere più vendite.

Un’altra opzione è quella di mostrare i prodotti attualmente in saldo. In questo modo si possono motivare gli acquirenti ad acquistare subito questi articoli per ottenere le migliori offerte.

SeedProd dispone di alcuni blocchi che possono recuperare automaticamente questi prodotti. Se volete mostrare i vostri prodotti più venduti, aggiungete il blocco Best Selling Products al vostro progetto.

Per ulteriori informazioni, consultate la nostra guida su come visualizzare i prodotti più popolari nelle pagine dei prodotti di WooCommerce.

Se si desidera mostrare i prodotti con la valutazione più alta, è possibile trascinare il blocco Prodotti più votati nella pagina.

Infine, c’è un blocco Prodotti in vendita che mostra tutti gli articoli attualmente in vendita.

Indipendentemente dal blocco aggiunto, fare clic su di esso per selezionarlo e poi dare un’occhiata alle impostazioni nel menu di sinistra. Tutte le impostazioni sono semplici, quindi vale la pena di esaminarle per vedere quali effetti diversi si possono creare.

Passo 5: Pubblicare la pagina di prodotto WooCommerce personalizzata

Quando si è soddisfatti dell’aspetto della pagina del prodotto, è il momento di salvare le modifiche. Basta fare clic sulla freccia a discesa accanto a “Salva” e poi selezionare l’opzione “Pubblica”.

La pagina di prodotto personalizzata non apparirà sul vostro negozio online finché non avrete attivato l’intero tema WooCommerce personalizzato. Questo vi dà la possibilità di dare un’occhiata agli altri design del vostro kit di temi e di apportare eventuali modifiche utilizzando il costruttore drag-and-drop di SeedProd.

Ad esempio, in genere si desidera modificare i modelli di intestazione e piè di pagina per inserire i propri menu di navigazione, il logo personalizzato del negozio e altri contenuti. Per trarre ispirazione, consultate la nostra lista di controllo delle cose da aggiungere al piè di pagina del vostro sito WordPress.

Per modificare qualsiasi altro modello, andare su SeedProd ” Theme Builder. Quindi, passare il mouse sul modello che si desidera personalizzare.

A questo punto è possibile fare clic sul link “Modifica design”.

A questo punto, è sufficiente modificare il design aggiungendo altri blocchi e personalizzandoli con le impostazioni nel menu a sinistra.

Continuare a ripetere questi passaggi finché non si è soddisfatti della configurazione di tutti i modelli.

Quando si è pronti a rendere operativo il tema WooCommerce personalizzato, andare su SeedProd ” Theme Builder. È possibile fare clic sulla levetta “Abilita tema SeedProd” in modo che sia visualizzata la dicitura “Sì”.

Ora, se visitate il vostro negozio online, vedrete la pagina di prodotto WooCommerce personalizzata dal vivo.

Suggerimento bonus: Aggiungere notifiche di vendita in tempo reale per incoraggiare più acquisti

Oltre all’ottimizzazione delle pagine dei prodotti, un altro modo per aumentare le vendite è rappresentato dalle notifiche di vendita in tempo reale. Si tratta di piccoli messaggi che appaiono quando un cliente ha acquistato un prodotto specifico mentre si trova su un sito web.

Con queste notifiche, gli utenti possono vedere che persone reali stanno acquistando un prodotto da voi. Questo può far sentire i potenziali clienti più sicuri di effettuare un ordine, il che è importante quando si gestisce una piccola impresa.

Se volete aggiungere notifiche di vendita in tempo reale al vostro negozio, potete utilizzare TrustPulse. Questo plugin è l’opzione migliore per aggiungere notifiche in tempo reale di riprova sociale sul vostro sito web.

Per saperne di più su TrustPulse, consultate la nostra recensione completa di TrustPulse. Se volete altri consigli sui plugin per la riprova sociale, date un’occhiata alla nostra lista dei migliori plugin per la riprova sociale per WordPress e WooCommerce.

Ci auguriamo che questo articolo vi abbia aiutato a personalizzare le pagine dei prodotti di WooCommerce senza dover ricorrere alla codifica. Potreste anche consultare la nostra guida su come creare un popup WooCommerce per aumentare le vendite o la nostra scelta dei migliori plugin WooCommerce per il vostro negozio.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.