Come modificare e personalizzare le pagine dei prodotti WooCommerce

La pagina del prodotto è fondamentale per il processo di vendita. È qui che l'acquirente decide di procedere all'acquisto dell'articolo o di andarsene senza alcuna garanzia di restituzione. Il tuo obiettivo come proprietario di un negozio online è quello di portare i visitatori del sito alle pagine dei tuoi prodotti, quindi fare in modo che eseguano i passaggi finali di Aggiungi al carrello e Checkout.

A tal fine, è essenziale che le pagine dei tuoi prodotti facciano il miglior lavoro possibile per promuovere l'articolo in vendita. Il modello di prodotto predefinito di WooCommerce è pulito e professionale, offrendoti una solida base per la tua pagina su cui puoi costruire utilizzando i metodi seguenti.

Come ottimizzare il tuo modello di pagina prodotto WooCommerce

Esistono diversi modi per personalizzare le pagine o il modello dei prodotti WooCommerce. Alcuni metodi sono inclusi in WooCommerce. Per altri, avrai bisogno di un'estensione. Puoi anche utilizzare l'editor del sito o effettuare personalizzazioni manualmente. Diamo un'occhiata più da vicino a ciascuna opzione.

Come personalizzare la pagina del tuo prodotto WooCommerce utilizzando le funzionalità integrate

Molte ottimizzazioni delle pagine dei prodotti possono essere eseguite senza componenti aggiuntivi o codifica. Foto di alta qualità, descrizioni informative e informazioni chiave sul prodotto rendono più facile per il visitatore sentirsi a proprio agio nell'acquistare il prodotto.

Abilita recensioni e valutazioni per aumentare la fiducia. Imposta prodotti correlati, cross-sell e upsell per aumentare la dimensione media degli ordini e facilitare ai clienti la scoperta di nuovi articoli. Includi le testimonianze dei clienti nelle descrizioni dei prodotti o nelle schede per prove sociali.

Dopo aver ottimizzato il contenuto della pagina, puoi migliorare ulteriormente le pagine dei prodotti utilizzando le estensioni WooCommerce, modificando il modello della pagina del prodotto con l'editor del sito e personalizzandole manualmente con codice e hook.

Come personalizzare la pagina del tuo prodotto utilizzando le estensioni WooCommerce

Un'estensione è un plug-in di WordPress creato appositamente per fornire funzionalità aggiuntive ai negozi WooCommerce. Di seguito sono riportate alcune estensioni di WooCommerce che puoi utilizzare per fornire ulteriori informazioni sul prodotto, aggiornare l'esperienza di acquisto ed estendere la tua pagina oltre le funzionalità predefinite. Puoi trovare ancora più estensioni per un'ulteriore personalizzazione nella libreria di estensioni ufficiale di WooCommerce.

1. Variazione avanzata del prodotto per WooCommerce

I prodotti variabili sono articoli con opzioni come dimensioni e colore, scelte che l'acquirente effettua prima del check-out. Sul front-end, WooCommerce mostra un menu a discesa per ogni attributo (come dimensione o colore) con un elenco di varianti disponibili di seguito (come Small, Medium o Large).

Per un approccio più visivo, Advanced Product Variation per WooCommerce ti consente di mostrare le variazioni di prodotto con campioni (colori, immagini e testo), gallerie e tabelle. Puoi persino includere video nei tuoi campioni.

I campioni di variazione vengono visualizzati nella pagina del prodotto o nella pagina principale del negozio, in base alle impostazioni configurate. Puoi creare campioni sfruttando le immagini dei prodotti esistenti e le immagini in primo piano.

Puoi anche personalizzare il layout della galleria prodotti, spostandolo dalla sua posizione predefinita sotto l'immagine in primo piano sul lato sinistro.

Scopri di più sulla Variazione Avanzata del Prodotto per WooCommerce.

2. Gestore schede WooCommerce

Le schede della pagina del prodotto WooCommerce vengono visualizzate sotto il pulsante Aggiungi al carrello e ti consentono di mostrare informazioni aggiuntive mantenendo elementi chiave come titolo e prezzo above the fold.

Queste informazioni aggiuntive possono includere materiali e ingredienti del prodotto, pesi e dimensioni, tabelle delle taglie, tabelle dei prezzi, tempi di consegna, spese di spedizione, video dimostrativi - qualsiasi cosa che aiuterà il cliente a sentirsi sicuro nell'effettuare il proprio acquisto.

Con WooCommerce Tab Manager, puoi rinominare, riordinare e rimuovere le schede predefinite (Descrizione lunga, Informazioni aggiuntive e Recensioni) e personalizzare questa sezione creando le tue schede globali, a livello di categoria e specifiche del prodotto.

Utilizza il plug-in per impostare un ordine di tabulazione predefinito che può essere ignorato a livello di prodotto. Con un'interfaccia drag-and-drop, non è necessario modificare i file del tema o entrare nel codice.

Se hai già schede personalizzate tramite altri plugin, WooCommerce Tab Manager le rileva, dandoti la possibilità di mostrarle o nasconderle. Uno dei principali vantaggi di questo plug-in è che il contenuto delle tue schede è incluso nei risultati di ricerca del tuo sito.

Scopri di più su WooCommerce Tab Manager.

3. Domande frequenti sui prodotti

Le domande frequenti, o FAQ, sono un modo intuitivo per organizzare e presentare le informazioni sui prodotti ai visitatori. Con l'estensione Domande frequenti sui prodotti, puoi aggiungere una scheda FAQ dedicata per ogni prodotto con domande e risposte illimitate.

Il plug-in funziona con tutti i tipi di prodotto e aggiunge una sezione FAQ quando crei o modifichi una pagina prodotto.

Sul front-end, le FAQ sono visualizzate in stile fisarmonica con animazione.

Ulteriori informazioni sulle domande frequenti sui prodotti.

4. Prodotti compositi

Con i prodotti compositi, i tuoi clienti possono creare kit o prodotti configurabili.

Per ogni prodotto composito, consentirai ai clienti di scegliere tra selezioni predeterminate dall'inventario esistente. È possibile assegnare costi aggiuntivi a selezioni specifiche e consentire a determinate categorie di essere facoltative.

Ad esempio, una collana potrebbe contenere opzioni per la catena (argento, oro), la pietra (rubino, granato, smeraldo) e un ciondolo opzionale (scelte di forme multiple).

Per ciascuno degli elementi costitutivi del kit - catena, pietra e ciondolo - puoi selezionare SKU tra cui il cliente può scegliere o lasciare che scelgano qualsiasi opzione da un'intera categoria di prodotti.

La logica condizionale ti consente di mostrare o nascondere le opzioni in base alle scelte precedenti (ad es. la maglietta rossa non è disponibile in taglie specifiche) e il tracciamento a livello di componente supporta la gestione avanzata dell'inventario. Se disponi di un numero enorme di opzioni, puoi creare visualizzazioni con ordinamento, filtro e impaginazione per acquisti più semplici.

Ulteriori informazioni sui prodotti compositi.

5. Componenti aggiuntivi del prodotto

L'estensione dei componenti aggiuntivi del prodotto consente ai tuoi acquirenti di personalizzare e aggiornare i loro acquisti tramite extra gratuiti ea pagamento.

I componenti aggiuntivi potrebbero includere garanzie, materiali di qualità superiore, opzioni di spedizione prioritaria o personalizzazioni come monogrammi e incisioni personalizzati. Se le persone acquistano spesso i tuoi prodotti come regali, puoi aggiungere un'opzione di confezionamento o un campo messaggio regalo.

Le organizzazioni non profit potrebbero consentire agli acquirenti di includere una donazione con il loro acquisto e di effettuare la donazione in onore di qualcuno aggiungendo un nome e un messaggio.

Se disponi di prenotazioni WooCommerce, i componenti aggiuntivi del prodotto ti consentono di creare opzioni per servizi extra (risciacquo dei capelli dopo il taglio dei capelli) o aggiornamenti VIP per posti a sedere e accesso speciali. Funziona anche con gli abbonamenti WooCommerce in modo da poter offrire componenti aggiuntivi ai tuoi prodotti in abbonamento.

I tuoi componenti aggiuntivi possono includere campi personalizzati visualizzati come caselle di testo, menu a discesa, caselle di controllo, selezioni basate su immagini e input di prezzo personalizzati per articoli come mance e donazioni. Questi campi possono essere applicati all'intero catalogo o assegnati a prodotti specifici.

Una volta impostati i componenti aggiuntivi, vengono visualizzati nelle pagine dei prodotti sopra il pulsante Aggiungi al carrello nell'ordine da te scelto.

Ulteriori informazioni sui componenti aggiuntivi del prodotto.

Personalizza la pagina del tuo prodotto utilizzando l'editor del sito

Con i temi a blocchi, puoi personalizzare l'aspetto della pagina del tuo prodotto modificando il modello di pagina del prodotto singolo nell'editor del sito. Nell'amministratore di WordPress, vai su Aspetto → Editor .  

Scegli "Sfoglia tutti i modelli" dal menu a discesa in alto al centro della pagina. Scegli il modello Prodotto singolo dall'elenco visualizzato.

Il layout di pagina predefinito contiene l'intestazione, il piè di pagina e il blocco WooCommerce Single Product, che mostra le informazioni sul prodotto, il prezzo e gli elementi dell'immagine.

Dovresti eseguire il backup del tuo sito prima di apportare modifiche al modello della pagina del prodotto. Alcune modifiche, ad esempio l'eliminazione accidentale del blocco del singolo prodotto e il salvataggio, renderanno impossibile per i tuoi visitatori fare acquisti o acquistare.

Come modificare i modelli di intestazione e piè di pagina della pagina del singolo prodotto

La scheda Modello in Impostazioni (l'icona a forma di ingranaggio in alto a destra) contiene i collegamenti per gestire l'intestazione e il piè di pagina. Fare clic su una delle opzioni per gestire quella parte del modello di pagina. Puoi anche fare clic direttamente in un'area del modello per iniziare la modifica. Ricorda che qualsiasi modifica apportata qui verrà applicata a tutti i prodotti che utilizzano il modello.

Nell'intestazione, puoi modificare il titolo del sito e i collegamenti nel menu di navigazione principale e persino aggiungere nuovi blocchi per personalizzare in modo specifico la pagina del tuo prodotto. Usa questo spazio per aggiungere immagini, testo e altro per migliorare il potere di vendita della pagina del tuo prodotto. Puoi aggiungere una nota promozionale o politica o un banner per informare gli acquirenti su una vendita in corso o su come ottenere la spedizione gratuita per ordini superiori a un determinato importo.

Puoi fare qualcosa di simile con il piè di pagina della pagina del prodotto. Ad esempio, aggiungi una testimonianza del cliente o informazioni su una politica di garanzia di soddisfazione.

Come personalizzare il corpo del Singolo Prodotto

Il blocco Prodotto singolo mostra un avviso in grassetto nella parte superiore, "Non rimuovere questo blocco! La rimozione di questo blocco causerà effetti indesiderati sul tuo negozio. Prendi sul serio questo messaggio!

Tuttavia, puoi aggiungere nuovi blocchi attorno al blocco Prodotto singolo per personalizzare completamente il design della pagina del prodotto.

Usa l' icona + per aggiungere elementi sopra o sotto il blocco Prodotto singolo, quindi includi i blocchi che desideri per personalizzare la pagina.

Utilizza un blocco Paragrafo per includere le offerte correnti ("Spendi $ 100 o più per la spedizione gratuita"), una garanzia di soddisfazione o qualsiasi cosa che aiuti i visitatori a prendere la decisione di acquistare. Aggiungi un blocco Video che offre uno sguardo dietro le quinte dei tuoi processi. Oppure includi specifici prodotti consigliati che desideri promuovere. Il cielo è il limite qui!

E per ogni blocco, puoi modificare impostazioni come il colore di sfondo, la tipografia e la spaziatura per renderlo davvero tuo.

Personalizza manualmente la pagina del tuo prodotto (utilizzando codice e hook)

Per le opzioni avanzate, senza il costo o la manutenzione dei plug-in, puoi modificare e personalizzare manualmente la pagina del tuo prodotto utilizzando codice e hook.

Prima di apportare modifiche ai tuoi file, è importante dedicare del tempo al backup di WooCommerce. Se stai usando Jetpack VaultPress Backup, questo viene fatto per te automaticamente, in tempo reale. Quindi, se una qualsiasi delle tue modifiche causa la chiusura del tuo sito, puoi ripristinare un backup in pochi clic, anche se non hai accesso alla dashboard di WordPress.

E ti consigliamo anche di utilizzare un tema figlio per apportare queste modifiche. Altrimenti, quando aggiorni il tuo tema o WooCommerce lungo la strada, potresti perdere tutte le tue personalizzazioni. Un'altra opzione è utilizzare un plug-in come Code Snippets, che ti consente di aggiungere codice personalizzato al tuo sito in snippet che puoi attivare e disattivare secondo necessità.

Personalizza le pagine dei prodotti WooCommerce utilizzando gli hook

Gli hook consentono ai proprietari dei siti di aggiungere codice e personalizzare le pagine senza i pericoli associati alla modifica dei file principali. Esistono due tipi di hook: azioni e filtri. Le azioni ti consentono di inserire codice in punti specifici, mentre i filtri ti consentono di manipolare e restituire una variabile.

Ad esempio, puoi utilizzare le azioni per aggiungere un nuovo campo di pagamento, quindi utilizzare i filtri per modificare le etichette o i segnaposto dei campi di pagamento esistenti. Puoi trovare l'elenco degli hook WooCommerce disponibili qui.

Ecco alcuni altri esempi di modifiche che puoi apportare alle pagine dei tuoi prodotti utilizzando gli hook:

• Modifica il testo del pulsante Aggiungi al carrello. Ad esempio, potresti dire "Fai una donazione adesso".
• Personalizza i breadcrumb di WooCommerce. Cambia il separatore di pangrattato, rimuovi del tutto il pangrattato, ecc.
• Rimuovi, rinomina e riordina le schede dei prodotti. Aggiungi una scheda Ingredienti, ad esempio, o includi un video in una delle schede.

Personalizza le pagine dei prodotti WooCommerce utilizzando i CSS

CSS è un linguaggio di codifica utilizzato per controllare gli elementi di progettazione (al contrario di JavaScript, che controlla le azioni). Puoi usarlo per modificare il design delle pagine dei tuoi prodotti. Dopo aver appreso le basi dei CSS, puoi personalizzare qualsiasi cosa, dai colori e caratteri alle dimensioni dei singoli elementi.

Puoi facilmente aggiungere codice CSS andando su Aspetto → Personalizza → CSS aggiuntivo nella dashboard di WordPress. Ad esempio, se desideri modificare il colore del carattere dei titoli dei tuoi prodotti, devi utilizzare il seguente codice, sostituendo il codice esadecimale del colore con il tuo:

 .woocommerce div.product .product_title { color: #222222; }

Se desideri cambiare il colore del pulsante Acquista ora, devi utilizzare questo codice, sostituendo nuovamente il codice esadecimale con il colore che preferisci:

 .woocommerce div.product .button {   background: #000000; }

Puoi vedere altri esempi in questo articolo di WooCommerce.

Come aumentare la velocità di caricamento della pagina del prodotto

I siti a caricamento rapido sono importanti sia per i visitatori che per i motori di ricerca. Le persone non vogliono aspettare e i motori di ricerca non vogliono indirizzare le persone a siti con prestazioni insufficienti.

Letteralmente ogni secondo conta: un secondo di ritardo nei tempi di caricamento può ridurre i tassi di conversione del 20%!

Jetpack Boost è la migliore soluzione di ottimizzazione della velocità e delle prestazioni del sito Web per WordPress. Ha un processo di installazione rapido e semplice, senza bisogno di sviluppatori, e vanta risultati che superano i primi cinque plug-in per le prestazioni in un test testa a testa.

Dopo aver installato il plug-in gratuito, puoi eseguire un controllo e ottenere un rapporto sui punteggi delle prestazioni del tuo sito attuale. Questi serviranno come benchmark che puoi utilizzare per misurare i miglioramenti ai tuoi Core Web Vitals, metriche che Google utilizza per valutare l'esperienza utente e le prestazioni tecniche del tuo sito.

Una semplice dashboard semplifica la configurazione delle opzioni di ottimizzazione tramite attivazioni con un clic. Questo ti dà la flessibilità di testare i moduli delle prestazioni individualmente e configurare Jetpack Boost per adattarsi perfettamente a qualsiasi scenario.

Per altri modi per velocizzare le pagine dei tuoi prodotti, dai un'occhiata a Nove modi per velocizzare un negozio WooCommerce.

Domande frequenti sulla personalizzazione delle pagine dei prodotti

Hai ancora domande? Dai un'occhiata alle risposte ad alcuni comuni di seguito.

Qual è il modo migliore per personalizzare una pagina prodotto WooCommerce?

Non esiste un unico modo migliore. Il modo migliore per te dipende dal tuo livello di comfort con i vari approcci.

L'editor del sito mette tutto il potere nelle tue mani, permettendoti di trascinare e rilasciare gli elementi per creare la tua pagina prodotto personalizzata senza dover modificare alcun codice. Questa è un'ottima soluzione sia per i principianti che per gli utenti avanzati!

Se stai cercando funzionalità aggiuntive specifiche, le estensioni WooCommerce sono un'ottima opzione. Sono controllati e approvati da WooCommerce e offrono ai commercianti opzioni di personalizzazione avanzate senza codice personalizzato.

La personalizzazione e la codifica manuali offrono la massima flessibilità, ma richiedono anche le conoscenze più tecniche. Rispetto all'utilizzo di blocchi o estensioni, questo metodo ha maggiori possibilità di causare problemi o addirittura di danneggiare il sito.

Devo eseguire il backup del mio sito prima di modificare il modello della pagina del prodotto?

SÌ. A differenza delle pagine e dei post, i modelli di sito non hanno una cronologia delle revisioni. Esegui il backup del tuo sito prima di apportare qualsiasi aggiornamento al modello della pagina del prodotto, in modo da poter eseguire un rapido ripristino in caso di problemi.

Jetpack VaultPress Backup è un plug-in di backup di WordPress in tempo reale, il che significa che il tuo sito non viene sottoposto a backup solo su base giornaliera o quando esegui una copia manuale. Invece, viene salvato automaticamente ogni volta che apporti una modifica al tuo sito, un cliente effettua un ordine o un visitatore lascia un commento. Ogni volta che succede qualcosa di importante? È salvato!

I negozi di e-commerce non possono permettersi di perdere dati, soprattutto quando tali dati rappresentano gli ordini dei clienti nel mondo reale. Non accontentarti di soluzioni che salvano il tuo sito solo occasionalmente o richiedono una lunga interazione con il servizio clienti per ripristinare le cose quando c'è un problema.

Con Jetpack VaultPress Backup, puoi ripristinare il tuo sito con un clic e tornare online rapidamente. Con l'app mobile Jetpack, puoi ripristinare sempre e ovunque, anche se il sito è completamente inattivo.

La parte migliore per i proprietari di negozi? Tutti i dati e gli ordini dei tuoi clienti sono protetti e rimangono aggiornati.

Quali sono alcune best practice per personalizzare una pagina prodotto WooCommerce?

Indipendentemente dal metodo che utilizzi per modificare e personalizzare la pagina del tuo prodotto WooCommerce, segui queste best practice per proteggere te stesso, il tuo sito e i tuoi clienti.

Effettua prima il backup del tuo sito, ogni volta . Quando aggiungi o aggiorni il codice del sito, un singolo errore può causare problemi. Devi essere pronto a ripristinare il sito il prima possibile, senza perdere un solo ordine. Jetpack VaultPress Backup è la migliore soluzione di backup automatico in tempo reale per WordPress.

È fatto per te, quindi non devi nemmeno preoccuparti di salvare il tuo sito prima di sperimentare le modifiche.

Apporta le modifiche al codice al di fuori dei file del tema principale . Quando modifichi un tema o un file di plug-in, tali modifiche verranno sovrascritte e annullate al successivo aggiornamento del tema o del plug-in.

Esistono diversi modi per aggiungere codice al tuo sito senza modificare direttamente il tema o i file del plug-in. Puoi utilizzare il plug-in Code Snippets per aggiungere, modificare o rimuovere elementi su una pagina e dare uno stile al tuo sito tramite il campo CSS aggiuntivo nel Customizer del tema. Puoi anche creare un tema figlio. L'importante è apportare le modifiche dove non saranno influenzate dagli aggiornamenti del tema o del plug-in.

Tieni d'occhio la velocità. Indipendentemente da come personalizzi le pagine dei tuoi prodotti, vuoi assicurarti che la velocità del tuo sito non ne risenta. Con Jetpack Boost, puoi migliorare istantaneamente le aree chiave che migliorano sia l'esperienza dell'utente che la percezione di Google della qualità del tuo sito. Un sito più veloce significa che i clienti avranno maggiori probabilità di rimanere e Google sarà più propenso a consigliarti nei risultati di ricerca. Una rapida spinta può fare molto.