Come personalizzare la pagina del prodotto WooCommerce in Divi

Utilizzi Divi e desideri modificare la pagina del tuo prodotto per aumentare i tassi di conversione? Sei nel posto giusto! In questa guida, ti mostreremo diversi modi per personalizzare la pagina del prodotto WooCommerce in Divi .

WooCommerce è il miglior strumento di eCommerce in circolazione. I plugin giusti e un tema WordPress ottimizzato sono il primo passo per avere un negozio WooCommerce di successo. Ma non basta per avere un business di successo. Per portare il tuo negozio al livello successivo, dovresti personalizzare le sezioni più importanti. Abbiamo già visto come modificare la pagina del negozio e la pagina del pagamento, quindi oggi ti mostreremo come personalizzare la pagina del prodotto WooCommerce in Divi .

Perché personalizzare la pagina del prodotto WooCommerce?

La pagina del prodotto è dove mostri gli articoli che vendi nel tuo negozio. Può creare o distruggere la tua attività, quindi devi dedicare del tempo a ottimizzarla per aumentare i tassi di conversione.

Per impostazione predefinita, il plug-in WooCommerce viene fornito con un modello di pagina del prodotto personalizzato. Quindi, sia che tu stia utilizzando un tema semplice come GeneratePress o uno complesso come Avada, gli elementi e il design della pagina del prodotto saranno gli stessi. Ecco perché se vuoi fare colpo sui tuoi clienti, dovresti personalizzare la pagina del prodotto WooCommerce predefinita .

Cambiare i colori e gli elementi della pagina del prodotto è un buon inizio, ma c'è molto di più che puoi fare. Un'opzione è creare un nuovo modello di pagina del prodotto con un design personalizzato. Con un po' di PHP, HTML e CSS puoi riprogettare completamente la pagina del tuo prodotto. Tuttavia, se usi Divi, c'è un'opzione molto migliore.

Il tema Divi viene fornito con il suo generatore di pagine personalizzato chiamato Divi Builder . Ti consente di personalizzare facilmente la pagina del prodotto WooCommerce e ogni centimetro del tuo sito senza scrivere una sola riga di codice. Diamo un'occhiata più da vicino a come farlo.

Come personalizzare la pagina del prodotto WooCommerce in Divi

Per questa dimostrazione, utilizzeremo il plug-in Divi Builder per apportare tutte le modifiche alla nostra pagina del prodotto. Prima di iniziare, assicurati di avere Divi con Divi Builder installato sul tuo sito.

Abilita l'editor visivo

Per iniziare a personalizzare la pagina del tuo prodotto WooCommerce in Divi con Divi Builder, apri qualsiasi pagina del prodotto che desideri modificare. Una volta aperta la pagina, vedrai un pulsante chiamato Abilita editor visivo sulla barra di amministrazione. Fare clic per attivare Divi Builder .

Ora che hai abilitato l'editor visivo di Divi, sarai in grado di selezionare qualsiasi modulo su quella pagina e modificarlo. Per personalizzare il tuo modello attuale, puoi semplicemente modificare i moduli esistenti o aggiungerne di nuovi. Nella sezione moduli, vedrai i moduli basati su WooCommerce come:

• Aggiungi al carrello
• informazioni addizionali
• Percorso di navigazione
• Avviso carrello
• Descrizione
• Galleria
• immagini
• Meta
• Prezzo
• Valutazione
• Prodotti correlati
• Recensioni
• Azione
• Schede
• Titolo
• Upsell

Puoi aggiungere uno qualsiasi di questi moduli alla tua pagina e renderla più user-friendly semplicemente facendo clic su di esso. Inoltre, l'ultima versione del builder Divi funziona estremamente bene con WooCommerce, quindi puoi personalizzare facilmente qualsiasi modulo. Diamo un'occhiata ad alcune delle cose che puoi modificare.

1. Visualizza o nascondi recensioni

Cominciamo con qualcosa di semplice. Come puoi vedere sopra, puoi facilmente visualizzare o nascondere la funzione di valutazione a stelle e disattivare il conteggio delle recensioni dei clienti. Basta fare clic sull'elemento di recensione e quindi premere l' icona Impostazioni . Quindi vai alla sezione Elementi e avrai la possibilità di visualizzare o nascondere la valutazione a stelle e il conteggio delle recensioni dei clienti.

Per creare fiducia tra i tuoi clienti online, ti consigliamo di visualizzare sia la valutazione in stelle che le recensioni sulla pagina del prodotto.

2. Modifica galleria

Non è un segreto che un'immagine vale più di mille parole. Ecco perché per aumentare i tassi di conversione, è una buona idea aggiungere una galleria di prodotti alle pagine dei prodotti. WooCommerce include questa funzione per impostazione predefinita, quindi tutto ciò che devi fare è caricare le immagini sulla pagina del prodotto o sceglierle dalla pagina dei media.

Dopo aver aggiornato la pagina del prodotto con le tue immagini, apparirà così:

Se per qualche motivo vuoi visualizzare solo un'immagine di ogni prodotto, con Divi Builder puoi nascondere la galleria di qualsiasi prodotto. Basta fare clic sulla galleria, premere l' icona Impostazioni , andare su Elementi e avrai la possibilità di disabilitare la galleria.

Inoltre, puoi nascondere l'immagine in primo piano e il badge di vendita. Considerando l'importanza delle immagini durante la vendita, ti consigliamo di aggiungere almeno 3-4 immagini di ciascuno dei tuoi prodotti.

3. Modifica dell'immagine in primo piano

Un altro modo interessante per personalizzare la pagina del prodotto WooCommerce in Divi è modificare l'immagine in primo piano . Le prime impressioni contano, quindi dovresti scegliere un'immagine caratteristica attraente per il tuo prodotto. Questa immagine sarà visibile anche nella pagina dell'archivio del negozio.

Quando apri le opzioni dell'immagine in primo piano utilizzando il builder Divi, sarai in grado di modificare l'immagine in primo piano e il badge di vendita.

Come accennato in precedenza, ti consigliamo di visualizzare immagini in evidenza interessanti in quanto possono avere un grande impatto sui tassi di conversione.

4. Modifica del pulsante Aggiungi al carrello

Per aggiungere prodotti al carrello, gli utenti devono fare clic sul pulsante Aggiungi al carrello. WooCommerce viene fornito con un campo quantità con il pulsante Aggiungi al carrello per impostazione predefinita, quindi non è necessario creare un pulsante manualmente. In questa sezione, ti mostreremo come modificare il pulsante Aggiungi al carrello con il builder Divi.

Nella sezione Elementi , vedrai due opzioni principali.

• Campo della quantità
• Azione

Se vuoi dare all'utente la possibilità di selezionare la quantità del prodotto lascia il campo della quantità così com'è. Tuttavia, se vendi corsi online, ad esempio, potresti voler disabilitare l'opzione quantità per rimuovere il rumore dalla pagina del prodotto.

Come puoi vedere, una volta disattivato il campo della quantità, il campo scomparirà. In questa pagina del prodotto, non abbiamo un'opzione per vedere l'opzione stock, ma se visualizzi lo stock sul tuo sito, puoi abilitarlo o disabilitarlo allo stesso modo.

5. Applicare le modifiche ai Prodotti correlati

Mostrare prodotti correlati agli acquirenti è un ottimo modo per aumentare le vendite. Di solito, WooCommerce mostra i prodotti correlati in base alla categoria principale dell'articolo per impostazione predefinita. Tuttavia, se il tuo tema o modello non mostra prodotti correlati, abbiamo una soluzione per te. Vediamo come personalizzare la pagina del prodotto e aggiungere una nuova riga con elementi correlati con Divi.

Innanzitutto, aggiungi una nuova riga alla pagina. Per questo tutorial, aggiungeremo una singola riga ma puoi scegliere lo stile più adatto al tuo negozio.

Successivamente, aggiungi il modulo del prodotto relativo a WooCommerce alla riga come mostrato di seguito.

Vedrai che una sezione relativa al prodotto verrà aggiunta alla pagina. Quindi, puoi personalizzare il layout e il colore.

Se non visualizzi prodotti correlati, ti consigliamo di provarlo. Sono facili da configurare e possono aiutarti a incrementare le vendite.

6. Aggiungi un interruttore

I commutatori sono un modo eccellente per visualizzare le informazioni sulla pagina del prodotto mantenendola pulita. In Divi, puoi aggiungere un interruttore usando il modulo Toggle. In questa sezione, mostreremo come aggiungere un modulo di commutazione sotto la descrizione del prodotto.

Iniziamo passando con il mouse sulla descrizione del prodotto e facendo clic sul pulsante +. Quindi, cerca Toggle nella barra di ricerca e apri il modulo di commutazione.

Per aggiungere l'interruttore, hai bisogno di due cose principali.

• Titolo
• Corpo

Per questa dimostrazione, utilizzeremo il nome del prodotto come titolo dell'interruttore e la descrizione del prodotto come corpo dell'interruttore. Per fare ciò, fai semplicemente clic sull'icona del database a destra e vedrai diversi tipi di contenuto nel database. Per il titolo, sceglieremo come intestazione il titolo Prodotto/Archivio , ma puoi selezionare il tipo di contenuto che meglio si adatta alle tue esigenze.

Ora facciamo lo stesso per il corpo. Premi l'icona del database e scegli l'opzione Descrizione prodotto dal menu.

Una volta salvato, vedrai un semplice modulo di attivazione/disattivazione sulla pagina del prodotto che gli utenti possono premere per visualizzare ulteriori informazioni sul prodotto.

Divi consente inoltre di aggiungere altri elementi personalizzati come intestazioni e descrizioni, nonché caratteri, colori e così via. Ti consigliamo di giocare e personalizzare la pagina del tuo prodotto con gli interruttori.

Suggerimento per la pagina del prodotto WooCommerce

Prima di concludere questa guida, abbiamo un rapido consiglio per te.

Aggiorna regolarmente il tema e il plug-in

Per assicurarti di avere sempre accesso alle ultime funzionalità che Divi ha da offrire, ti consigliamo vivamente di mantenere il tuo tema Divi, il plug-in Divi builder e il core di WordPress aggiornati all'ultima versione stabile disponibile.

Il modo più semplice per farlo è attivare gli aggiornamenti automatici dal pannello del tema Divi.

Tutto ciò che devi inserire è il tuo nome utente Elegant Themes e la chiave API che puoi trovare nella dashboard del tuo account Elegant Themes. Una volta inseriti quelli, salva le modifiche e riceverai gli aggiornamenti automatici.

Utilizzo a livello di sito

Con i nuovi moduli Divi Builder, potrai aggiungere sezioni e personalizzare qualsiasi tua pagina o post. Tutto quello che devi fare è abilitare l'editor visivo, aggiungere gli elementi che desideri e selezionare i moduli che desideri utilizzare. Ad esempio, se stai scrivendo una recensione personalizzata del tuo prodotto, considera di aggiungere un pulsante Aggiungi al carrello al post di recensione in modo che gli utenti possano accedervi immediatamente.

Bonus: altri metodi per modificare la pagina del prodotto WooCommerce

Se stai cercando altri modi per personalizzare la pagina del tuo prodotto, dai un'occhiata a questa guida in cui imparerai come utilizzare plug-in, page builder e frammenti di codice per modificare la pagina del tuo prodotto.

Conclusione

In sintesi, personalizzare la pagina del prodotto WooCommerce con Divi può aiutarti a incrementare le vendite e aumentare i tassi di conversione. La buona notizia è che puoi farlo senza scrivere una sola riga di codice.

Con Divi Builder, puoi modificare facilmente la pagina del prodotto nel tuo negozio senza alcun plug-in aggiuntivo per la creazione di pagine. In questa guida ti abbiamo mostrato come visualizzare o nascondere recensioni, immagini in evidenza e gallerie di immagini e come personalizzare il pulsante Aggiungi al carrello e la relativa sezione dei prodotti. Queste sono solo alcune delle cose che puoi fare, quindi ti incoraggiamo a giocare con Divi Builder e ad apportare altre modifiche.

L'esperienza di creazione di pagine trascina e rilascia ti aiuterà a personalizzare facilmente ogni centimetro del tuo negozio anche se non hai competenze di programmazione.

Quali modifiche hai apportato al tuo negozio utilizzando Divi? Hai avuto problemi con il nostro tutorial? Fatecelo sapere nella sezione commenti qui sotto!