Come personalizzare la pagina del prodotto WooCommerce

Pubblicato: 2021-02-11

Stai cercando modi per personalizzare il tuo negozio e migliorare l'esperienza dei tuoi clienti? Abbiamo l'articolo giusto per te! In questa guida, ti mostreremo come personalizzare la pagina del tuo prodotto WooCommerce per aiutarti ad aumentare i tuoi tassi di conversione e aumentare le tue vendite.

Perché personalizzare la pagina del prodotto WooCommerce?

Il design della pagina del tuo prodotto è parte integrante dell'esperienza di acquisto del tuo cliente sul tuo negozio online. I tuoi prodotti sono la parte più unica e distinguibile del tuo negozio WooCommerce. Quindi dovresti personalizzare la pagina del tuo prodotto e assicurarti che evidenzi i tuoi prodotti e servizi. Ciò include comode sezioni della pagina del prodotto come sezioni di dettaglio aggiuntive, tabelle delle taglie, diverse anteprime di immagini per variazioni del prodotto, opzioni di ordinazione aggiuntive e altro ancora. E questo è solo l'aggiunta di più contenuti. Puoi anche riordinare queste sezioni, rimuovere quelle predefinite, riprogettarle e molto altro.

Indipendentemente da ciò che fai, il tuo obiettivo principale dovrebbe essere quello di migliorare l'esperienza dei tuoi clienti nel tuo negozio WooCommerce. Questo ti aiuterà naturalmente ad aumentare le tue vendite. Se il tuo sito è facile da navigare e gli utenti possono trovare facilmente ciò che stanno cercando, è più probabile che acquistino, tornino e consiglino il tuo negozio. Ad esempio, puoi aggiungere pulsanti di pagamento diretto per aiutarli ad acquistare rapidamente, includere grafici di confronto per aiutarli a scegliere il prodotto giusto o aggiungere caroselli di varianti univoci per visualizzare tutte le opzioni per le varianti del singolo prodotto.

Ci sono anche eleganti elementi di lead generation che puoi aggiungere per migliorare le vendite del tuo prodotto personalizzando la pagina del tuo prodotto. Ciò include l'aggiunta di prodotti correlati per vendite aggiuntive, articoli di upsell/downsell e molto altro.

Ora diamo un'occhiata alle diverse opzioni che hai per modificare la pagina del tuo prodotto in WooCommerce.

Come personalizzare la pagina del prodotto WooCommerce

Esistono 3 modi principali per personalizzare la pagina del prodotto WooCommerce :

  1. Con plugin
  2. Programmaticamente
  3. Con i costruttori di pagine

Tutti questi metodi hanno pro e contro. In questa guida te li mostreremo tutti in modo che tu possa scegliere quello più adatto a te.

1. Come personalizzare la pagina del prodotto WooCommerce utilizzando i plugin

Esistono diversi plugin per modificare la pagina del prodotto in WooCommerce. Diamo un'occhiata ad alcuni dei migliori.

1) Pagamento diretto per WooCommerce

personalizza la pagina del prodotto woocommerce - checkout diretto

Direct Checkout è il plug-in perfetto per semplificare il processo di acquisto e rendere facile l'esperienza di acquisto dei tuoi clienti. Viene fornito con molte opzioni per personalizzare la pagina del prodotto aggiungendo pulsanti di acquisto rapido e reindirizzamenti di aggiunta al carrello ingegnosi.

In questo modo, puoi consentire ai tuoi acquirenti di acquistare rapidamente i tuoi articoli e aumentare i tassi di conversazione. Questo strumento ti consente anche di personalizzare il prodotto e la pagina di pagamento aggiungendo opzioni di visualizzazione rapida alle categorie di prodotti e alle pagine di archivio, rendendo il processo di visualizzazione e acquisto degli articoli più conveniente per i tuoi clienti.

Inoltre, Direct Checkout include l'elegante personalizzazione del pulsante Aggiungi al carrello AJAX per accelerare il processo di acquisto ed eliminare la necessità di ricaricare la pagina quando gli utenti aggiungono un articolo al carrello. Inoltre, puoi saltare la pagina del carrello e reindirizzare i tuoi clienti dalla pagina del prodotto alla cassa con un clic.

Caratteristiche principali
  • È un ottimo strumento per semplificare il processo di acquisto e aumentare i tassi di conversione
  • Viene fornito con molte opzioni per personalizzare sia il prodotto che la pagina di pagamento
  • Comodi pulsanti di acquisto rapido con un clic da aggiungere alle pagine dei prodotti
  • Pulsanti Aggiungi al carrello abilitati per AJAX e reindirizzamenti aggiungi al carrello
  • Opzione per personalizzare i campi di pagamento e aggiungere opzioni di visualizzazione rapida agli archivi e alle categorie dei prodotti
Prezzo

Questo è un plugin freemium. Ha una versione gratuita e tre piani premium che partono da un prezzo promozionale di 19 USD (pagamento una tantum). Tuttavia, puoi utilizzare il seguente codice e ottenere uno sconto del 10% :

 direct_ck10

2) Woo Thumbs

personalizza la pagina del prodotto woocommerce - woothumbs

WooThumbs è un altro eccellente strumento che ti consente di mostrare i tuoi prodotti WooCommerce nel modo più eccitante. Il plug-in ti offre un modo alternativo per impostare le gallerie e le immagini dei tuoi prodotti e consente un intero altro regno di personalizzazione delle pagine dei tuoi prodotti.

Inoltre, puoi aggiungere comode opzioni per semplificare la navigazione tra le immagini dei tuoi prodotti e migliorare le vendite del tuo negozio. Ciò include l'aggiunta di miniature scorrevoli, design della galleria unici che puoi personalizzare in base al tuo tema, opzioni di zoom integrate per le tue immagini e tonnellate di opzioni aggiuntive per la galleria di immagini. Infine, puoi anche includere gallerie di immagini uniche per le variazioni dei prodotti, nonché incorporare video nelle tue gallerie di prodotti per ulteriori conversioni di vendita.

Caratteristiche principali
  • Tonnellate di opzioni estese per la personalizzazione delle gallerie di immagini dei prodotti
  • Opzioni per le miniature scorrevoli e opzioni di zoom per le immagini dei prodotti
  • Gallerie di immagini flessibili per le variazioni di prodotto per aggiungere gallerie di immagini uniche per ogni variazione di prodotto
Prezzo

WooThumbs è un plug-in premium che parte da 79 USD all'anno e ha una prova gratuita di 14 giorni.

3) Componenti aggiuntivi del prodotto

personalizza la pagina del prodotto woocommerce - componenti aggiuntivi del prodotto

I componenti aggiuntivi del prodotto sono un plug-in essenziale se stai cercando modi per curare l'esperienza di acquisto dei tuoi clienti attraverso le pagine dei tuoi prodotti. Questo strumento è progettato per aiutarti a migliorare le conversioni di vendita fornendo più opzioni ai tuoi clienti. Ti consente di aggiungere opzioni di pagina prodotto uniche come selezioni basate su immagini per prodotti, caselle di controllo prodotto aggiuntive e testi personalizzati per una maggiore personalizzazione del prodotto.

Inoltre, puoi includere opzioni di prezzo personalizzate uniche per rendere la pagina del tuo prodotto più versatile. Infine, puoi anche aggiungere l'opzione per addebitare commissioni fisse o commissioni percentuali per ulteriori opzioni di servizio per il tuo negozio WooCommerce. Per ulteriori informazioni su come aggiungere commissioni al tuo negozio, consulta questa guida.

Caratteristiche principali
  • Aggiunte aggiuntive alla pagina del prodotto come selezioni basate su immagini, testo personalizzato, immagini di esempio e altro ancora.
  • Ulteriori opzioni di estensione del prodotto come caselle di controllo personalizzate e input di testo.
  • Opzioni per aggiungere commissioni fisse, commissioni percentuali o persino aggiungere prezzi personalizzati per opzioni aggiuntive come donazioni, mance e altro
Prezzo

I componenti aggiuntivi del prodotto sono un plug-in premium che ti riporterà a 49 USD all'anno.

4) Prezzo specifico del cliente WISDM

personalizza la pagina del prodotto woocommerce - WISDM

Se stai cercando modi per rendere il tuo negozio e le sue opzioni di prezzo più intelligenti e accomodanti, allora questo plugin è sicuramente uno che dovresti controllare. WisdmLABS ti presenta un plug-in per i prezzi unico che ti consente di impostare prezzi personalizzati per diversi clienti, utenti e gruppi. Ciò significa che puoi impostare prezzi personalizzati per utenti con ruoli diversi, clienti specifici o abbonati.

Ma non è tutto. WISDM Customer Specific Pricing offre altre opzioni di prezzo intelligenti, come la fornitura di codici sconto e offerte per categorie o quantità di prodotti e persino l'aggiunta di sconti all'ingrosso per livelli specifici per acquisti multipli.

Inoltre, puoi anche impostare regole di sconto del carrello per importi specifici. In questo modo, puoi integrare le iscrizioni al tuo sito web e invogliare gli utenti a spendere di più per il tuo negozio fornendo loro offerte personalizzate.

Caratteristiche principali
  • Opzioni per impostare prezzi specifici per singoli clienti, abbonati e ruoli utente.
  • Offri sconti e offerte di vendita ad acquirenti all'ingrosso e acquirenti
  • Imposta le regole di prezzo per le categorie di prodotti e imposta sconti e offerte a livello di negozio
Prezzo

Questo è uno strumento premium che parte da 80 USD all'anno.

5) Elex WooCommerce Richiedi un preventivo

Se gestisci un negozio WooCommerce in cui vendi prodotti all'ingrosso o desideri offrire prezzi diversi a seconda di ciò che vogliono i clienti, questo plugin può farti risparmiare un sacco di tempo. WooCommerce Richiedi un preventivo aggiunge un elegante pulsante "Richiedi un preventivo" che i tuoi clienti possono utilizzare per inviare una richiesta di preventivo per te.

Puoi quindi rispondere a qualsiasi tua richiesta di preventivo con una buona stima dei prezzi e soddisfare i tuoi clienti senza problemi. Ciò rende il processo di richiesta e accettazione dei preventivi più semplice e flessibile.

Infine, puoi anche accettare ordini per prodotti esauriti senza problemi e aggiungere aggiustamenti di prezzo per gli utenti che potrebbero acquistare i tuoi prodotti in quantità diverse.

Caratteristiche principali
  • Pulsante Richiedi preventivo da utilizzare per l'ordine
  • Verifica del pagamento e notifiche dell'amministratore
  • Opzioni facili per rispondere, accettare o rifiutare le citazioni dei clienti
  • Opzioni per abilitare le richieste di preventivo da ruoli specifici
Prezzo

WooCommerce Request a Quote è un plugin premium che parte da 59 USD (pagamento una tantum).

Se stai cercando altri plugin per modificare la pagina del prodotto, dai un'occhiata a questo post.

Personalizza la pagina del prodotto con Direct Checkout

Ora diamo un'occhiata a come puoi modificare la pagina del prodotto in WooCommerce usando Direct Checkout. Questo strumento freemium ha più di 60.000 download nel repository di WordPress e ti aiuterà ad aumentare le tue conversioni. La versione gratuita ha funzionalità di base, quindi per portare la pagina del tuo prodotto al livello successivo ti consigliamo uno dei piani premium che partono da soli 19 USD (pagamento una tantum).

Diamo un'occhiata ad alcune delle cose che puoi fare con Direct Checkout per personalizzare la pagina del tuo prodotto.

1. Aggiungi il pulsante di acquisto rapido

Una delle opzioni più interessanti che offre questo strumento è la possibilità di aggiungere un pulsante di acquisto rapido. In questo modo, il processo di pagamento è molto più veloce.

Invece di aggiungere il prodotto al carrello, vai alla pagina del carrello e poi alla pagina di checkout, i tuoi clienti potranno acquistare in pochi clic. E la parte migliore è che è molto facile da configurare.

Dopo aver installato e attivato il plug-in, vai su WooCommerce > Pagamento diretto > Generale , attiva il reindirizzamento e imposta le seguenti opzioni:

  • Reindirizzamento aggiunto al carrello : Sì
  • Aggiunto al carrello reindirizza a : Checkout

Salva le modifiche e il gioco è fatto! Ora, quando gli utenti premono il pulsante di acquisto rapido, salteranno la pagina del carrello e andranno direttamente alla pagina di pagamento.

Per ulteriori informazioni sugli acquisti rapidi, dai un'occhiata alla nostra guida su come aggiungere un pulsante di acquisto rapido al tuo negozio.

2. AJAX aggiungi al carrello

L'aggiunta di AJAX al carrello è un'altra eccellente funzionalità di WooCommerce Direct Checkout. La funzione di aggiunta al carrello di AJAX consente ai clienti di includere i prodotti nei loro carrelli senza dover ricaricare l'intero sito. Ciò migliora l'esperienza dell'utente e ti aiuterà ad aumentare le vendite. Inoltre, poiché le pagine non devono essere ricaricate così tante volte, riduce la larghezza di banda e il carico del server.

Per attivare la funzione di aggiunta al carrello AJAX, vai su WooCommerce > Pagamento diretto > Prodotti e abilita l'opzione Aggiungi al carrello AJAX .

Se non desideri installare plug-in di terze parti sul tuo sito e hai capacità di programmazione, puoi anche personalizzare la pagina del prodotto WooCommerce in modo programmatico. Vediamo come farlo.

2. Come personalizzare la pagina del prodotto WooCommerce in modo programmatico

Un'altra alternativa è modificare la pagina del prodotto in WooCommerce in modo programmatico. Non consigliamo questo metodo agli utenti principianti, ma se sai cosa stai facendo e desideri aggiungere funzionalità personalizzate alla pagina del tuo prodotto senza alcuno strumento aggiuntivo, questa è un'opzione eccellente.

Per questo, useremo codici eleganti costruiti attorno a WooCommerce Hooks . Se non li conosci, dai un'occhiata a questa guida completa su come utilizzare gli hook di WooCommerce. La guida ti fornisce anche informazioni su come personalizzare i file modello WooCommerce , che è un'ottima opzione se vuoi modificare il tuo negozio.

Ci sono molte cose che puoi fare se sai come programmare. Per questa dimostrazione, ci concentreremo su come rimuovere o riordinare elementi dalla tua Pagina del prodotto WooCommerce. Se desideri altri esempi di cose che puoi fare, puoi consultare la nostra guida dedicata su come modificare la pagina del prodotto WooCommerce in modo programmatico.

NOTA : poiché modificheremo alcuni file principali prima di iniziare, assicurati di creare un backup completo del tuo sito. Inoltre, ti consigliamo di utilizzare un tema figlio. Per farlo puoi crearlo o utilizzare uno di questi plugin.

Rimozione di elementi dalla pagina del prodotto WooCommerce

Per aggiungere questi codici, apri l' editor dei temi di WordPress nella dashboard di WordPress andando su Temi > Editor dei temi. Quindi, fai clic sul file Functions.php nell'elenco dei file nella colonna all'estrema destra. Qui puoi aggiungere i tuoi script WooCommerce per iniziare a personalizzare il tuo negozio.

WooCommerce ti fornisce diversi hook per personalizzare qualsiasi elemento del tuo negozio. Questi hook funzionano con elementi specifici, quindi è necessario utilizzare l'hook giusto con la giusta funzione e il giusto valore di priorità per rimuovere o riordinare questi elementi. Puoi visualizzare tutti gli hook e i relativi parametri in questa pagina o nel file content-single-product.php del plugin WooCommerce.

Ora, diamo un'occhiata a come puoi aggiungere uno script per rimuovere la meta del prodotto, la descrizione e le stelle di valutazione dalla pagina del tuo prodotto WooCommerce.

Per questo, incolla semplicemente il seguente codice nel tuo file functions.php :

 // rimuovi le stelle di valutazione
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// rimuove il meta del prodotto 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// rimuovi la descrizione
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);

Quindi, fai clic sul file Aggiorna e la tua pagina del prodotto WooCommerce dovrebbe avere questi elementi rimossi.

Riordinare gli elementi della pagina del prodotto WooCommerce

Puoi anche riordinare gli elementi della pagina del prodotto WooCommerce usando gli hook. Per impostazione predefinita, gli elementi WooCommerce hanno il proprio ordine di priorità. Se non li conosci, puoi dare un'occhiata a questa pagina.

Ora per riordinare gli elementi, puoi semplicemente rimuovere l'elemento e aggiungerli di nuovo usando l'hook add_action . È quindi possibile aggiungere il proprio ordine di priorità sull'hook, in modo che gli elementi vengano visualizzati nell'ordine preferito.

Ad esempio, se vogliamo che la sezione della descrizione appaia subito dopo il titolo, possiamo assegnarle un ordine di priorità personalizzato di 6. Poiché il titolo ha un ordine di 5, questo aggiungerà la tua descrizione proprio sotto di esso.

Per fare ciò, aggiungi questo script al tuo file functions.php e fai clic su Aggiorna file .

 // cambia l'ordine della descrizione
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

Questi sono solo alcuni esempi di cosa puoi fare per personalizzare la pagina del tuo prodotto WooCommerce in modo programmatico . Tuttavia, ci sono molte altre cose che puoi fare. Se stai cercando ispirazione, dai un'occhiata alla nostra guida dedicata su come modificare la pagina del prodotto utilizzando il codice.

3. Modifica la pagina del prodotto WooCommerce utilizzando i Page Builder

I page builder sono una risposta universale alla personalizzazione delle tue pagine WooCommerce. Questo non include solo la pagina del tuo prodotto, ma qualsiasi altra pagina del tuo sito. I Page Builder di WordPress hanno la possibilità aggiuntiva di impostare e utilizzare i modelli di pagina WooCommerce. In questo modo, non solo puoi utilizzare un'ampia varietà di elementi personalizzati per personalizzare le pagine dei tuoi prodotti, ma anche utilizzare modelli e pagine predefiniti per semplificarti la vita.

È possibile utilizzare un'ampia varietà di page builder compatibili con WooCommerce. Anche se funzionano in modo simile, presentano alcune differenze, quindi ti consigliamo di consultare le nostre guide dedicate per aiutarti a personalizzare le pagine dei tuoi prodotti.

  • Come personalizzare la pagina del prodotto WooCommerce in Divi
  • Come personalizzare la pagina del prodotto WooCommerce in Elementor

Bonus: personalizzazione dei tuoi elementi WooCommerce utilizzando CSS

Puoi anche esplorare l'opzione per personalizzare i tuoi elementi WooCommerce aggiungendo frammenti CSS al tuo tema WordPress. Ciò ti consente di esplorare idee come personalizzare le dimensioni dei caratteri per i titoli, acquistare ora i colori dei pulsanti e molto altro.

Per aggiungere snippet CSS al tuo tema WordPress, vai su Aspetto > Personalizza e fai clic su CSS aggiuntivo.

Qui puoi aggiungere snippet CSS e personalizzare qualsiasi elemento desideri. Ci sono molte cose che puoi modificare, ma per darti alcune idee, lasceremo alcuni frammenti di seguito. Inoltre, puoi utilizzare questo selettore di colori HTML per trovare il codice esadecimale giusto da aggiungere ai codici CSS del colore.

 Modifica la dimensione del carattere del titolo del prodotto
.woocommerce div.product .product_title {
dimensione del carattere: 42px;
}

Cambia il colore del titolo del prodotto
.woocommerce div.product .product_title {
colore: #AAb733;
}

 Cambia il colore del pulsante Acquista ora
.woocommerce div.product .button {
sfondo: #000000;
}

Dopo aver aggiunto i frammenti, ricorda di fare clic su Pubblica per finalizzare le modifiche.

Conclusione

Tutto sommato, la modifica della pagina del prodotto è fondamentale per migliorare l'esperienza di acquisto dei tuoi clienti e aumentare le vendite. In questa guida, abbiamo visto diversi modi per personalizzare la pagina del prodotto in WooCommerce:

  • Utilizzo di plugin dedicati
  • A livello di programmazione, utilizzando hook e modelli di WooCommerce
  • Utilizzo di page builder come Divi ed Elementor

Ognuno di questi metodi ha i suoi pro e contro, quindi scegli quello che meglio si adatta alle tue capacità ed esigenze. Se non hai competenze di programmazione, l'utilizzo di un plug-in è la scelta migliore. Esistono diversi strumenti disponibili, ma se desideri qualcosa di facile da usare, efficiente e conveniente, Direct Checkout è quello che fa per te.

Se invece ti piace programmare e vuoi creare una soluzione personalizzata, puoi personalizzare il tuo negozio in modo programmatico con alcuni script. Le opzioni sono infinite e puoi praticamente fare qualsiasi cosa, quindi prendi ispirazione dai nostri script e crea le tue soluzioni.

Se stai cercando altre guide per personalizzare il tuo negozio, dai un'occhiata ai seguenti post:

  • Come personalizzare la Pagina del Negozio WooCommerce
  • Come modificare la pagina Il mio account
  • Guida completa per personalizzare il pulsante Aggiungi al carrello in WooCommerce
  • Come aggiungere commissioni alla cassa
  • Come nascondere i prodotti correlati in WooCommerce

Quale metodo hai utilizzato per modificare la pagina del prodotto? Hai riscontrato problemi quando segui questa guida? Facci sapere nei commenti qui sotto e faremo del nostro meglio per aiutarti.