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

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.

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“.

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.

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.

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“.

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“.

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.

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.