Personalizzare WooCommerce con Elementor PRO (pagina prodotto e pagina shop)

Come personalizzare WooCommerce con Elementor PRO

Chiunque abbia un e-commerce sa benissimo quanto sia importante poter impostare le pagine in base alle proprie necessità. Alcuni temi per WordPress hanno tantissime opzioni relative a WooCommerce che permettono una grande personalizzazione, tuttavia potrebbero non bastare ed essere limitanti.

Ed è per questo motivo che oggi vedremo come personalizzare WooCommerce con l’utilizzo di Elementor PRO, andando a creare delle pagine prodotto e pagina shop completamente personalizzabili in tutti gli aspetti.

Uno dei page builder più famosi per WordPress. Sfrutta appieno le sue potenzialità con Elementor PRO e crea siti web come non avresti mai immaginato.

Creare pagine prodotto di WooCommerce personalizzate con Elementor PRO

Per prima cosa, bisogna utilizzare Elementor page builder, l’ormai celebre plugin che permette di creare pagine “complesse” senza l’utilizzo di codice, bensì tramite blocchi visivi.

In questo caso, oltre alla versione free di Elementor, dovremo utilizzare anche Elementor PRO, ossia il plugin aggiuntivo premium. Il motivo è molto semplice, la sola versione gratuita non permette di personalizzare le pagine prodotto e la pagina shop di WooCommerce.

Bene, dopo aver installato Elementor free ed Elementor PRO, tramite la bacheca di WordPress andiamo in “Template-> Nuovo“, si aprirà un popup che ci chiederà che tipo di template vogliamo creare, scegliamo “Single Product“, poi diamo un nome al template e clicchiamo su “Crea Template“.

Creazione template single product con Elementor PRO
Creazione template single product con Elementor PRO

Pochi istanti dopo si aprirà un altro popup dove Elementor ci proporrà alcuni template preimpostati già pronti per le pagine prodotto di WooCommerce.

Sono davvero ben fatti e possono essere importati con un solo click, ovviamente possiamo modificare anche questi template una volta importati nel caso in cui volessimo modificare o aggiungere qualcosa.

Scelta di template preimpostati da Elementor PRO
Scelta di template preimpostati da Elementor PRO

Se invece non ci interessa e vogliamo creare il template da zero, basterà chiudere il popup e finalmente saremo davanti alla classica visuale di Elementor, con la barra a sinistra dei widget disponibili, e lo spazio di lavoro a destra dove poter trascinare i vari widget e posizionarli dove lo si preferisce.

Widget esclusivi per la pagina prodotto

La parte interessante della creazione di un template per le pagine prodotto, è che Elementor PRO inserirà automaticamente tutti i widget utili per la creazione di questa pagina.

Widget di Elementor PRO per la creazione di un template singolo prodotto per WooCommerce
Widget di Elementor PRO per la creazione di un template singolo prodotto per WooCommerce

Come possiamo vedere, abbiamo a disposizione tutto l’occorrente per creare una pagina prodotto, alcuni tra i widget disponibili sono:

  • Product title: il widget per mostrare il titolo del prodotto
  • Product image: per mostrare le immagini del prodotto
  • Add to cart: il pulsante per inserire l’articolo nel carrello
  • Product related: il box per mostrare i prodotti correllati
  • Product price: per mostrare il prezzo del prodotto

E ancora molti altri. Utilizzando i vari widget e posizionandoli all’interno della pagina, potremo generare il template della pagina prodotto come preferiamo, completamente personalizzato e con estrema facilità.

Tutti i widget hanno un pannello dove è possibile personalizzare ogni singola opzione, dal semplice colore del testo, al modo in cui vengono mostrate le immagini del prodotto.

Va ricordato che oltre a questi widget destinati esclusivamente al template per la pagina prodotto, potremo ovviamente inserire anche i classici widget di Elementor ed Elementor PRO nel caso servissero.

Mostrare il template nelle pagine prodotto

Ok, abbiamo personalizzato le pagine prodotto di WooCommerce con Elementor PRO, ma adesso vogliamo che questo template venga mostrato all’interno del nostro sito web quando qualcuno visita i prodotti del sito.

Per fare ciò, dobbiamo “agganciare” il template appena creato e dire a Elementor in quale condizione utilizzarlo.
A fianco al pulsante “Publish” di Elementor, troviamo una piccola freccia, facendo click su di essa si aprirà un piccolo menu, ora facciamo click sulla voce “Display Conditions“.

Elementor PRO Display Conditions
Elementor PRO Display Conditions

In questo modo apriremo un popup dove sarà possibile scegliere le condizioni in cui questo template appena creato dovrà essere utilizzato.
Nel nostro caso abbiamo creato un template per WooCommerce per le pagine prodotto, quindi facciamo click su “Add condition“, impostiamo “Include” e selezioniamo il post type “Prodotti“.

Scelta delle condizioni per mostrare il template nelle pagine prodotto.
Scelta delle condizioni per mostrare il template nelle pagine prodotto.

Ora non ci resta che fare click sul pulsante “Save & Close” per applicare le modifiche e andare subito a vedere il risultato delle pagine prodotto.

Creare la pagina shop di WooCommerce personalizzata con Elementor PRO

Il procedimento è del tutto simile a quello precedente, tranne per il fatto che quando andremo a creare un nuovo template su “Template-> Nuovo“, dovremo scegliere “Products Archive” come template su cui lavorare.

Creazione template pagina shop con Elementor PRO
Creazione template pagina shop con Elementor PRO

In questo caso avremo widget differenti rispetto a prima, utili per la creazione di questo tipo di template come ad esempio il widget per mostrare la lista dei prodotti, la descrizione, il titolo, e altro ancora.

Una volta finito, la condizione da inserire per sostituire la pagina shop di WooCommerce con quella appena creata si chiama “Shop Page“.

Conclusioni

In questo tutorial abbiamo visto come fare per personalizzare WooCommerce andando a creare dei template personalizzati per la pagina dei prodotti e per la pagina principale dello shop, il tutto utilizzando Elementor PRO e sfruttando le sue enormi potenzialità.

E tu? Hai già creato delle pagine di WooCommerce personalizzate con Elementor? Facci sapere nei commenti se è stato difficile e se hai incontrato dei problemi.

Uno dei page builder più famosi per WordPress. Sfrutta appieno le sue potenzialità con Elementor PRO e crea siti web come non avresti mai immaginato.

Piaciuto l'articolo? Condividilo sui social!

2 commenti su “Personalizzare WooCommerce con Elementor PRO (pagina prodotto e pagina shop)

  1. Buongiorno,io sto usando il tema Astra e quando creo il template per archivio prodotti nel menù di destra di elementor nella sezione contenuto mi esce la scritta che per modificare il layout devo andare su menù-aspetto e modificarlo da li.
    Praticamente è l’unico che non riesco a modificare,mentre la pagina del negozio e il singolo prodotto posso modificarli come voglio.
    Il mio problema è che sullo smartphone l’archivio prodotti viene visualizzato male le immagini sulla parte destra sono più grandi della sinistra, mentre i prodotti sulla pagina negozio si vedono perfettamente uguali.

    1. Ciao Aldo, purtroppo dobbiamo fare ulteriori verifiche per capire quale sia il problema.
      Contatta il nostro supporto tecnico per WordPress a questo link. Sapranno sicuramente darti una mano.

Scrivi una risposta

Il tuo indirizzo email non sarà pubblicato.I campi obbligatori sono contrassegnati *

Ciao, hai bisogno di assistenza con WordPress? Scrivici!
WP Special Chat
Inserisci qui il tuo messaggio...