Elementor: costruire una pagina prodotto per WooCommerce

  1. Home
  2. >
  3. Woocommerce
  4. >
  5. Elementor: costruire una pagina prodotto per WooCommerce

Vuoi personalizzare la pagina prodotto del tuo store?

In questo articolo ti mostro come creare una pagina prodotto personalizzata e applicarla a una o più categorie di prodotti.

Dopo aver letto questo articolo potrai creare il tuo negozio personalizzato

Quando guardo le pagine prodotto di un E-commerce mi rendo subito conto se è stato creato con woocommerce o meno.

Spesso chi apre un E-commerce senza l’aiuto di un professionista non perde molto tempo a personalizzare il proprio store “accontentandosi” del layout di default.

In questo articolo ti mostrerò come creare una pagina prodotto da zero utilizzando Elementor.

La prima cosa da fare è andare sulla voce Template nel menu di WordPress e poi su nuovo

menu wordpress

Nella schermata che si apre dobbiamo scegliere nel menu a discesa la voce Singolo Prodotto e poi inserire il nome del template 

template

A questo punto Elementor ci proporrà alcuni template già pronti possiamo scegliere uno questi e poi modificarlo oppure costruire da zero il nostro template.

Vediamo come costruire da zero un template da applicare ai prodotti del nostro store.

Per prima cosa cambiamo il layout cliccando sull’icona dell’ingranaggio in basso a sinistra e nel campo Layout Pagina scegliamo Elementor Canvas.

Ora che abbiamo la pagina vuota dobbiamo innanzitutto inserire l’Header della pagina puoi creare un Header solo per lo store oppure inserire l’leader che utilizzi su tutte le pagine del sito.

Inserito l’Header dobbiamo passare alla creazione della pagina prodotto.

Avrai sicuramente notato che nella colonna dei Widget è comparsa una sezione Prodotto con dei nuovi Widget.

widget

Vediamo da vicino questi widget e come usarli.

I Widget

Breadcrumb WooCommerce 

Innanzitutto capiamo cosa sono i breadcrumbs e perchè sono così importanti.

I breadcrumds aiutano la navigazione degli utenti perchè consentono ad ogni visitatore di comprendere la propria posizione all’interno del sito.

L’utilizzo dei breadcrumbs migliora l’usabilità del sito favorendo anche la SEO.

E’ importante utilizzarli anche nel tuo store per questo motivo quando andrai a creare la pagina prodotto ti consiglio di inserire questo widget subito dopo l’header.

All’interno del widget puoi cambiare:

  • Il colore del test
  • Il colore del link
  • La tipografia (tipo di carattere, dimensione etc)
  • Allineamento 

Titolo Prodotto

su questo widget c’è poco da dire serve a mostrare il titolo del prodotto di quella pagina

Immagini Prodotto

questo widget ti consente di inserire le immagini del prodotto che hai aggiunto alla scheda del prodotto.

Le impostazioni di questo widget sono scarse le uniche cose che puoi fare sono aggiungere un bordo all’immagine principale e alle miniature.

Aggiungere un badge “Prodotto in offerta” attivando il campo Vendita lampo

Prezzo Prodotto

Il widget ti consente di mostrare nella pagina il prezzo del prodotto e se il prodotto è in promozione mostrerà sia il prezzo pieno con una barra sopra sia il prezzo in offerta.

Anche in questo widget puoi cambiare 

  • il colore di entrambi i prezzi 
  • la tipografia 
  • la spaziatura

Aggiungi al Carrello

Questo widget è ti consente di aggiungere il tasto aggiungi al carrello nella pagina prodotto.

Tra le opzioni troviamo la possibilità di cambiare il colore di sfondo del pulsante, del testo e del bordo.

Le impostazioni Quantità e Variazioni ti consentono di modificare colore e tipografia anche per il campo quantità e se presente quello delle variazioni (è presente se hai configurato i prodotti variabili).

Votazione Prodotto

Con questo widget puoi inserire nella pagina la valutazione del prodotto fatta dai clienti espressa in stelle e impostare il colore delle stelle.

Magazzino Prodotto

Mostra se il prodotto è disponibile in magazzino, questa funzione però è visibile solo se hai attivato la gestione del magazzino.

Breve Descrizione 

Riporta la descrizione che hai inserito nella pagina prodotto nel campo Breve descrizione del Prodotto.

Contenuto prodotto

Riporta la descrizione inserita nella pagina prodotto

Schede Prodotto 

Utilizza le tab per descrizione e recensioni.

Prodotto correlato

Questo widget ti consente di mostrare i prodotti correlati a quello presente nella pagina prodotto.

Utilizzando il campo Ordina per puoi scegliere quale tipo di prodotti mostrare es. i più popolari.

prodotti correlati

Upsell

Questa impostazione ti consente di mostrare prodotti di valore maggiore o minore ma per funzionare devi aver impostato  nella scheda prodotto i prodotti collegati

Combinando questi widget puoi creare la tua pagina prodotto personalizzata che ti aiuterà a distinguerti dagli altri store.

Naturalmente non devi usare tutti i widget puoi scegliere quelli che ritieni essere più utili per i tuoi clienti.

Quello che deve guidarti nella costruzione della pagina prodotto è la chiarezza e l’usabilità due condizioni importantissime per chi vuole creare uno store di successo.

Una volta che avrai completato la creazione della pagina non devi fare altro che scegliere dove utilizzarla.

Cliccando sul tasto Pubblica si aprirà una schermata che ti chiede dove vuoi visualizzare il template che hai creato

template

Puoi scegliere tra:

  • Prodotti
  • Categorie
  • Figlio categorie prodotti
  • Tag
  • Prodotti da autore

Questo ti consente di creare un template diverso per ogni categoria etc.

template

In un altro articolo ti mostrerò come costruire la pagina prodotti.

Conclusioni

In questo articolo abbiamo visto come creare una pagina prodotto personalizzata.

Ti ho mostrato il funzionamento dei widget.

Il mio consiglio è di non esagerare con la personalizzazione, nel senso che ci sono alcune azioni che il nostro cervello fa in automatico perchè conosce già la posizione degli elementi.

Spostare per esempio il tasto aggiungi al carrello in una posizione inusuale può comportare una perdita di clienti.

Per questo motivo studia bene la posizione di ogni widget e testa se l’azione è semplice o meno.

Se non lo è cambia la posizione del widget!

Spero che questo articolo ti sia utile, se hai domande scrivile pure nei commenti

A presto!

2.6/5 - (5 votes)

Potrebbe anche piacerti

Elementor la guida completa

Ultimi articoli

Categorie
Passa a Elementor Pro
Per il tuo hosting
Per creare la tua Privacy Policy
Picture of Giovanni Chianese
Giovanni Chianese

Giovanni Chianese è uno sviluppatore di siti ed E-commerce & un esperto di Digital Marketing

Potrebbe anche piacerti

Copyright 2025 © Wp Semplice - Privacy Policy
error: Content is protected !!

Gli articoli ti sono stati utili?

Iscriviti alla newsletter per restare sempre aggiornato!