Come personalizzare la tua pagina del prodotto WooCommerce
Pubblicato: 2022-10-18Le pagine dei prodotti su qualsiasi sito di eCommerce sono richieste come la parte più essenziale. Perché contiene tutti i dettagli relativi a un prodotto in modo ordinato con informazioni aggiuntive come prodotti correlati, ecc.
La pagina del prodotto WooCommerce predefinita va bene per la visualizzazione rapida del prodotto di base , l'aggiunta al carrello e altre funzionalità di base simili, ma questo semplicemente non è sufficiente nel moderno ambiente competitivo di eCommerce. La pagina del prodotto svolge una funzione cruciale in qualsiasi piattaforma aziendale costruita da WooCommerce come una delle pagine più importanti. Tuttavia, la pagina predefinita semplicemente non la sta tagliando.
L'importanza della personalizzazione delle pagine dei prodotti non può essere sopravvalutata.
Personalizzando le pagine dei tuoi prodotti, stai essenzialmente fornendo ai tuoi clienti un'esperienza di acquisto unica, che è anche importante per la fidelizzazione dei visitatori e l'aumento del numero di vendite.
In questo post, ti guideremo attraverso il processo su come utilizzare un editor di pagine di prodotti WooCommerce e widget WooCommerce personalizzati per creare pagine di prodotti interessanti e altro ancora.
Sommario
Strumenti necessari per personalizzare la pagina del prodotto WooCommerce?
Innanzitutto, devi avere l' ultima versione di WordPress installata sul tuo server e, per di più, il plug-in WooCommerce deve essere installato per ospitare tutte le funzionalità della pagina del negozio/negozio.
Hai anche bisogno di un tema WordPress eCommerce basato sulle funzionalità e, ultimo ma non meno importante, avrai bisogno di un plug-in WooCommercer Shop Builder . Con il plug-in per la creazione di negozi Elementor, sarai in grado di controllare e personalizzare completamente le singole pagine del negozio e la griglia dei prodotti del mercato, l'elenco dei prodotti, i blocchi di confronto dei prodotti, ecc.
Come personalizzare la pagina del prodotto WooCommerce
Ci auguriamo che tu abbia un'installazione funzionante di WordPress e un tema eCommerce funzionante già installato sul tuo server. Ora, esaminiamo passo passo il processo di personalizzazione della pagina del prodotto, iniziando con risorse e strumenti WordPress aggiuntivi che sono necessari.
Passaggio 1: installazione di un plug-in aggiuntivo Elementor WooCommerce
In questo esempio dal vivo di personalizzazione di una pagina di prodotto WooCommerce con vari elementi e campioni di variazioni di prodotto WooCommerce che una pagina di prodotto moderna dovrebbe essere presentata ai clienti, utilizzeremo qualcosa di simile al compositore visivo del generatore di pagine di prodotto WooCommerce , chiamato ShopReady.
Il costruttore di negozi ShopReady Elementor è uno straordinario strumento in bundle onnicomprensivo per la creazione di solidi siti Web di negozi di eCommerce. Il plug-in viene fornito con oltre 105 widget realizzati professionalmente con funzioni e strumenti specifici per casi d'uso. Ad esempio, con questo plug-in eCommerce, puoi creare un filtro prodotto WooCommerce funzionale in grado di filtrare i prodotti con prezzo, dimensioni, peso, colore, valutazione, spedizione, ecc.
Per iniziare con questo plugin aggiuntivo di WooCommerce, inizia scaricandolo. Per fare ciò, accedi alla dashboard di WordPress , vai su E fai clic sul pulsante Installa .
Attendi la corretta installazione del plugin e clicca su Attiva .
Il menu ShopReady apparirà sulla dashboard di WordPress. Da qui, avrai accesso a tutti i widget, moduli e contenuti preimpostati forniti dal plug-in di personalizzazione della pagina Negozio.
Da questo semplice menu è possibile abilitare/disabilitare widget, creare modelli e inserire chiavi API per varie funzioni.
Un'altra grande caratteristica di questo plugin è il suo cambio di valuta per la funzionalità WooCommerce. Per abilitare questa funzione, dovrai seguire le istruzioni mostrate di seguito.
Per aggiungere la tua chiave API valuta creata da Exchangerate , fai clic sulla scheda API.
Accedi alla dashboard del tuo account Exchangerate e copia la tua chiave API per ottenerla. Dopo aver incollato la chiave API, vai alla dashboard di WordPress > ShopReady > API e fai clic su Passaggio 2: utilizza un modello di pagina prodotto predefinito o creane uno da zero
Il prossimo passo è iniziare a lavorare su una pagina di prodotto, ma prima dovrai aggiungere prodotti al tuo sito WooCommerce. Se non sai come farlo, puoi seguire questa guida su – Come aggiungere rapidamente un prodotto a WooCommerce .
Ora per iniziare a personalizzare una pagina per una vetrina di prodotti, utilizza ShopReady – WooCommerce Builder per creare una semplice pagina di prodotto andando alla dashboard del plug-in e facendo clic sulla scheda Modelli . Abilita la categoria Modello prodotto e cerca l'impostazione Prodotto singolo. Ora fai clic sull'icona di modifica.
E verrai reindirizzato alla schermata dell'Editor di Elementor . Ora per iniziare a personalizzare la pagina, fai clic sul simbolo più per aggiungere le sezioni di Elementor. Esistono vari tipi di sezioni di Elementor che puoi aggiungere alla tua pagina a seconda di come vuoi che appaia la tua pagina e quali widget desideri utilizzare.
Passaggio 3: personalizzazione della pagina del prodotto WooCommerce con Elementor Widget
- Aggiunta di un titolo di prodotto
Ora, poiché hai posizionato una struttura di sezione Elementor di base per la pagina del tuo prodotto WooCommerce, puoi iniziare aggiungendo un titolo del prodotto. Per fare ciò, dovrai trascinare e rilasciare il widget Titolo del prodotto nella pagina del prodotto.
E per visualizzare il titolo del prodotto appropriato, fai clic sulla scheda Contenuto e sotto troverai le opzioni di aggiornamento dell'editor . Seleziona il titolo del prodotto appropriato dall'opzione Prodotto demo .
È necessario aggiungere o modificare le informazioni sul prodotto appropriate dalla dashboard del prodotto WooCommerce affinché questi dati mostrino il titolo del prodotto appropriato.
- Aggiunta di un'immagine in evidenza alla pagina del prodotto
Successivamente, avrai bisogno della galleria di immagini del tuo prodotto e dell'immagine caratteristica per il tuo prodotto. A tale scopo, puoi utilizzare uno qualsiasi dei widget di immagini multiple forniti dal componente aggiuntivo All-in-one Elementor per l'eCommerce.
Per questo esempio, utilizzeremo il widget ShopReady Thumbnail with Zoom, fa ciò che suggerisce il titolo. Con questo widget, puoi mostrare ai tuoi clienti una versione con zoom al passaggio del mouse del prodotto WooCommerce dell'immagine del tuo prodotto quando passano sopra l'immagine del prodotto.
Come prima, puoi selezionare l'immagine del prodotto corretta dall'opzione Prodotto demo , scheda Contenuto .
- Aggiunta di un blocco per il widget dei prezzi
Un altro elemento importante da avere nella pagina del prodotto eCommerce è il blocco dei prezzi del prodotto. Per questo, dovrai aggiornare gli attributi del prodotto WooCommerce con gli aggiornamenti corretti e utilizzare il widget Prezzo ShopReady , che deve essere posizionato sotto il titolo del prodotto.
Per visualizzare il prezzo corretto, seleziona il titolo del prodotto dall'opzione Prodotto demo , nella scheda Contenuto .
- Aggiunta della descrizione del prodotto
Hai anche la possibilità di aggiungere descrizioni di prodotti altamente personalizzabili utilizzando questo widget di descrizione prodotto di WooCommerce . Dalla scheda dello stile, avrai la possibilità di personalizzare il modo in cui la descrizione del prodotto apparirà al pubblico.
- Aggiunta della funzionalità Aggiungi al carrello
Aggiungi al carrello è un'altra caratteristica molto importante da avere, che consente ai tuoi clienti di avere più prodotti nella pagina del carrello prima di procedere alla pagina di pagamento.
Per avere una solida funzione Aggiungi al carrello nella pagina del tuo negozio eCommerce, puoi utilizzare il widget Aggiungi al carrello ShopReady. Con questo widget, puoi consentire ai tuoi clienti di aumentare e diminuire la quantità di prodotti nel carrello direttamente dal blocco Aggiungi al carrello.
Puoi anche personalizzare il tuo pulsante Aggiungi al carrello Elementor dalla tipografia, colore, sfondo, margine, riempimento, ecc. della scheda Stile Elementor di WooCommerce .
- Aggiunta di metadati alla pagina del prodotto
Per offrire una migliore esperienza di acquisto ai tuoi clienti, dovresti implementare un filtro prodotto WooCommerce utilizzando i metadati e gli attributi del prodotto che hai aggiunto durante l'aggiunta di prodotti a WooCommerce .
Per mostrare questi dati sulla pagina del tuo prodotto, cerca il widget ShopReady Meta e rilascialo sotto il pulsante Aggiungi al carrello.
I tag e i metadati del prodotto dovrebbero apparire correttamente quando selezioni il titolo del prodotto corretto dall'opzione Prodotto demo , nella scheda Contenuto .
- Aggiunta di pulsanti di condivisione sui social media alla pagina del prodotto
I tuoi clienti possono anche condividere i post dei tuoi prodotti sui social media direttamente dalla pagina del tuo prodotto WooCommerce utilizzando un semplice blocco del pulsante di condivisione dei social media. Che puoi creare semplicemente usando il widget di Elementor Social Share trascina e rilascia.
Il blocco può essere personalizzato con qualsiasi icona di social media, testo e link condivisibili, direttamente dalla scheda Contenuto . E può anche essere personalizzato per modificare l'aspetto dei blocchi di condivisione social dalla scheda Stile Elementor.
E hai finito con le basi della personalizzazione della pagina del prodotto WooCommerce.
Passaggio 4: aggiunta di prodotti correlati alla pagina del prodotto WooCommerce
Un ottimo modo per aumentare le vendite online è mostrare i prodotti correlati sulla pagina del tuo prodotto utilizzando il widget Prodotti correlati dei componenti aggiuntivi del prodotto WooCommerce. Con il widget Prodotti correlati di ShopReady , puoi creare uno straordinario blocco di scorrimento del prodotto in sezioni.
Per utilizzare il widget, devi solo trascinare il widget sotto il blocco del singolo prodotto e selezionare singolarmente ogni prodotto che desideri mostrare nella pagina del singolo prodotto.
Insomma
Ci auguriamo che questa guida informativa ti abbia aiutato a ottenere una comprensione più ampia della personalizzazione del modello di pagina del prodotto WooCommerce e di come puoi utilizzare questi fantastici strumenti per ravvivare il tuo sito di eCommerce con funzionalità migliori.
Con i dettagli del prodotto popup WooCommerce nella tabella di confronto dei prodotti, tutto ciò che richiede un mercato di eCommerce, ShopReady può fornire. In caso di domande su questo argomento, non esitare a contattarci nella sezione commenti in basso.