• Home
  • >
  • Elementor
  • >
  • Elementor e WooCommerce: realizza il tuo eCommerce WordPress

Elementor e WooCommerce: realizza il tuo eCommerce WordPress

Scopri tutte le funzionalità di Elementor per WooCommerce. Realizza il tuo eCommerce in modo totalmente personalizzato grazie a questo semplice tutorial ed inizia a vendere i tuoi prodotti sul web!
Elementor WooCommerce - FenixWeb

Tabella dei Contenuti

Funzionalità Elementor dedicate agli eCommerce

Da qualche tempo Elementor sta diventando un riferimento anche per la realizzazione di siti eCommerce. Infatti negli ultimi mesi ha sviluppato una serie di funzionalità dedicate proprio alla personalizzazione di pagine ed elementi WooCommerce. 

Vuoi per le tendenze di mercato post pandemia, vuoi per le ottime possibilità di personalizzazione, l’utilizzo di questo CMS per la creazione di Store online è diventato molto più frequente di quanto non fosse qualche anno fa. Tutto questo ovviamente ha portato Elementor a colmare alcuni vuoti che aveva in ambito eCommerce, portandolo a intraprendere questa direzione in termini di sviluppo.

Vediamo quali funzionalità offre ad oggi Elementor per permetterti di creare il tuo Store WooCommerce al meglio.

Widget Elementor per Singoli elementi WooCommerce

I Widget Singoli ci permettono di richiamare singoli elementi di WooCommerce, da utilizzare all’interno dei layout o template. Queste funzionalità sono mirate alla creazione delle pagine prodotto, rendendone possibile una personalizzazione avanzata. 

Elementor WooCommerce Widget Singoli

Vediamo nel dettaglio quali sono i Single Widget WooCommerce a disposizione:

Titolo Prodotto: Controlla lo stile ed il layout del titolo del prodotto.

Immagine Prodotto: Puoi impostare un’immagine o una galleria immagini per il prodotto.

Prezzo Prodotto: Posiziona e personalizza il prezzo del prodotto.

Aggiungi al Carrello: Personalizza il pulsante Aggiungi al Carrello.

Prodotti Correlati: Mostra i prodotti correlati al prodotto.

Stock Prodotti: Aggiungi il widget per mostrare la disponibilità di magazzino del prodotto.

Meta Prodotto: Controlla lo stile dei Metadati del prodotto.

Descrizione Breve: Inserisci e modifica la descrizione breve del prodotto.

Contenuto Prodotto: Visualizza e personalizza il contenuto del prodotto.

Scheda Dati Prodotto: Viualizza tutti i dettagli del prodotto.

Informazioni Aggiuntive: Aggiungi delle informazioni aggiuntive al prodotto.

Upsell: Mostra dei prodotti per fare Upsell.

Widget Elementor per Archivi WooCommerce

Questi widget ci consentono di personalizzare le pagine degli archivi (categorie prodotto, tag prodotto, ecc), realizzando dei layout accattivanti e personalizzati. Inoltre sono molto utili per andare ad editare anche la pagina Negozio.

Titolo archivio: restituisce dinamicamente il titolo dell’archivio corrispondente, permettendoti di personalizzare layout e stile.

Archivio Prodotti: ci consente di mostrare la griglia prodotti all’interno delle pagina Archivio.

Widget Elementor Generali per WooCommerce

Infine troviamo tutti i widget generici per la gestione di pagine ed elementi WooCommerce, che sono:

Prodotti: imposta il contenuto e lo stile dei tuoi prodotti.

Breadcrumbs WooCommerce: controlla i colori e il layout per i breadcrumbs WooCommerce.

Aggiungi al carrello personalizzato: aggiungi un pulsante Aggiungi al carrello in qualsiasi punto del tuo sito.

My Accuont WooCommerce: personalizza la pagina My Account di WooCommerce.

Carrello WooCommerce: modifica il layout e lo stile del Carrello del tuo eCommerce.

Checkout WooCommerce: rendi intuitiva e piacevole la pagina di pagamento del tuo Store.

Menu Carrello: questo speciale widget personalizzato apre il carrello in una finestra. Potrai visualizzare il tuo carrello da qualsiasi pagina del tuo sito web senza abbandonarla.

Come modificare le pagine prodotto WooCommerce con Elementor

Per personalizzare i tuoi prodotti, hai la possibilità di modificarli in più modi. Infatti Elementor ti permette di modificare le singole pagine prodotto manualmente, oppure andare a lavorare su un template prodotto da utilizzare come modello. Ovviamente nulla ti vieta di andare a creare diversi layout per gestire diverse tipologie di prodotti.

Per modificare singolarmente ogni scheda prodotto, ti basterà effettuare la normale procedura di modifica su ogni prodotto. All’interno della scheda prodotto infatti, potrai cliccare sul pulsante “Modifica con Elementor” e potrai dare libero sfogo alla tua creatività.

Se invece vuoi utilizzare un modello di layout, dovrai andare a creare un Template Single Product ed assegnare la visualizzazione a tutti i prodotti. Diversamente se hai in mente di differenziare i layout in base alla tipologia del prodotto, potrai andare a gestirli in base a categorie, sottocategorie, autori ed ai tag di appartenenza del prodotto.

Come personalizzare le pagine principali di WooCommerce con Elementor

Widget Elementor WooCommerce

Fino a poco tempo fa, per personalizzare le pagine principali di WooCommerce, era necessario integrare dei plugin ad Elementor oppure effettuare delle modifiche tramite CSS. Questo perchè WooCommerce presenta degli shortcode per gestire il contenuto di queste pagine, ed Elementor non disponeva di funzionalità che permettessero la personalizzazione di questi elementi.

Con alcuni dei recenti aggiornamenti però, la situazione è decisamente cambiata! Infatti Elementor ha aggiunto dei Widget che permettono di customizzare al meglio tutte queste pagine.

Personalizzare la pagina My Account del cliente

Elementor WooCommerce Widget My Account

Questa pagina organizza e raccoglie tutte le informazioni del tuo cliente. Di conseguenza è molto importante renderla chiara e facilmente navigabile, ma anche personalizzarla dandole lo stesso stile grafico di tutte le altre pagine dello Store. Potrai fare tutto ciò grazie all’apposito widget di Elementor, sostituendo il classico Shortcode WooCommerce nella pagina Account.

Personalizzare la pagina del Carrello

Elementor WooCommerce Widget Carrello

Anche in questo caso avrai la possibilità di personalizzare lo stile grafico del tuo carrello WooCommerce, grazie a questo Widget Elementor. 

Potrai quindi cercare di finalizzare le tue vendite uniformando il layout in base a tutto il tuo Store, rispecchiando la Brand Identity e cercando di facilitare all’utente la comprensione e la modifica di tutti i campi del Carrello.

Personalizzare la pagina Checkout

Elementor WooCommerce Widget Checkout

Scegli quale modello grafico utilizzare per customizzare il Checkout di WooCommerce. Cambia stili, colori, font e layout alla pagina di pagamento del tuo eCommerce, così da far sentire a proprio agio i tuoi clienti e permettere loro di compiere degli acquisti sul tuo Shop in modo lineare ed intuitivo.

Invece di utilizzare lo shortcode di WooCommerce all’interno della tua pagina di pagamento, inserisci il Widget Checkout creato da Elementor e personalizza al massimo il layout e lo stile del modulo.

Personalizzare la pagina Negozio

Potrai utilizzare tutti i Widget dedicati agli Archivi (elencati in precedenza), per personalizzare completamente la pagina Negozio del tuo eCommerce.

Questa pagina è molto importante, perchè è la pagina principale del tuo Store e quindi dovrà essere necessariamente molto curata. Potrai sfiziarti modificando lo stile e la visualizzazione dei tuoi prodotti all’interno della pagina, scegliere di creare delle sezioni dinamiche per categoria e gestire al meglio tutti gli aspetti visuali, pratici e funzionali!

 Elementor + WooCommerce: quale tema utilizzare?

Temi Elementor WooCommerce

Personalmente preferisco utilizzare il tema Hello di Elementor. Questo perchè mi permette di integrare alcuni strumenti e plugin in modo duttile e collaudato, senza avere grossi problemi di compatibilità.

Questa metodologia di lavoro mi consente di creare solo ed esclusivamente ciò che occorre per il mio sito web, a differenza di ciò che avviene con l’utilizzo di altre tipologie di temi dove potremmo trovarci tutta una serie di funzionalità, pagine ed elementi che non utilizzeremo mai.

Se è vero che un tema può semplificarti la vita, è anche vero che molti temi possono causare delle problematiche sotto vari punti di vista. Ad esempio nell’utilizzo dei tag HTML per le tue pagine o schede prodotto, cosa che invece con il tema Elementor andiamo a gestire direttamente in pagina su ogni singolo elemento.

Oppure nel modo in cui vengono gestite le paginazioni, i filtri di ricerca e tanti altri aspetti. Utilizzando un “tema classico”, non abbiamo la possibilità di scegliere di cambiare solo la gestione di un aspetto specifico (o meglio non sempre).

Con Elementor ed il tema Hello invece, andremo ad integrare queste funzionalità con dei plugin e di conseguenza possiamo valutare di sostituirne qualcuno per una gestione più corretta in base alle nostre esigenze. Ovviamente non dovrai abusare dei plugin, altrimenti andrai ad appesantire troppo il tuo Store.

Infine l’utilizzo di questo tema riduce molto la probabilità di errori o bug in seguito ad aggiornamenti di Elementor ed Elementor Pro e del tema stesso.

Autore dell'articolo

Raffaele Tateo