Ecommerce veloce con Elementor + WooCommerce

Negli ultimi anni sono tanti gli ecommerce che hanno preso vita e popolato il mondo del web: numerosi brand, anche piccoli, si sono affidati alle vendite online per offrire un servizio migliore e più immediato ai propri clienti, e per aumentare anche la propria fetta di mercato, facendosi conoscere al di fuori della propria sede fisica.

Questo è avvenuto per tanti motivi, il primo su tutti è la volontà di ogni impresa di digitalizzarsi, abbandonare la carta, i volantini e la pubblicità offline, e al contempo convogliare gli investimenti pubblicitari su Google e sui Social così da rivolgersi ad un pubblico mirato e molto più interessato ai propri prodotti. 

Il secondo è un altro aspetto da non sottovalutare: la pandemia da Covid 19 ha obbligato gli imprenditori a conoscere il mondo digital, a prendere contatti con i corrieri e costruire il proprio shop online, per sopravvivere in un momento difficile per tutti.

Il terzo motivo, ma non per importanza, è legato al fatto che esistono sempre più numerosi strumenti e componenti che possono aiutare nella realizzazione di un ecommerce, piccolo o grande che sia. 

Certo ci vuole un pò di pratica nel loro utilizzo ed è sempre bene affidarsi alle mani esperte di uno sviluppatore, ma Elementor, uno dei più famosi page builder per il CMS WordPress, e WooCommerce, il plugin più completo e competitivo per la gestione di ecommerce su WordPress, sono il binomio completo per la realizzazione di ecommerce, facili da utilizzare, molto intuitivi e con un back end che semplifica notevolmente la visualizzazione e gestione degli ordini.

Elementor + WooCommerce per un ecommerce veloce

Questo articolo si pone l’obiettivo di essere una guida nell’utilizzo di Elementor nella creazione di tutte quelle pagine e di tutti i prodotti che popolano un ecommerce, schede prodotto, carrello, checkout, shop page, senza ovviamente entrare nella trattazione dettagliata di come utilizzare Elementor e di come configurare WooCommerce, per i quali il consiglio è quello di servirsi della documentazione ufficiale direttamente dal loro sito web (Elementor / WooCommerce). 

Prima di iniziare conosciamo brevemente il page builder Elementor e il plugin WooCommerce.

Elementor

Elementor è uno dei migliori page builder per la realizzazione di siti web in WordPress.  Attraverso un editor completamente drag and drop e altamente visual è possibile costruire qualsiasi tipo di contenuto di un sito web (pagina, articolo, popup, menu di navigazione, header, ecc.). Elementor è disponibile in due versioni: una versione completamente Free, che permette già di utilizzare una vasta gamma di widget e di personalizzazioni, e una versione Pro (con varie tipologie di licenze, a seconda del numero di siti internet che si vogliono realizzare utilizzando Elementor) con tantissimi altri widget che permettono così di non mettere freno alla propria fantasia e poter dunque realizzare qualsiasi tipologia di lavoro.

Ed è tra questi strumenti aggiuntivi che troviamo la possibilità di mettere in comunicazione Elementor e WooCommerce con il fine massimo di creare e gestire tutte le pagine e tutte le schede prodotto che popolano un ecommerce.

WooCommerce

WooCommerce è il plugin più completo e competitivo per la creazione e la gestione di ecommerce realizzati con WordPress. È un plugin open-source, ovvero il proprio codice non è protetto da copyright e tutti i programmatori possono accedervi per implementare nuove funzionalità, correggere errori e sviluppare componenti aggiuntivi: e proprio per questo è considerato veramente il migliore plugin per trasformare il proprio sito in un vero e proprio negozio virtuale, per spostare le vendite dallo spazio fisico ad uno spazio digitale.

Se stai leggendo questa guida probabilmente già conosci WordPress e il significato della parola plugin. Oltre che avere anche una minima idea di cosa sia praticamente WooCommerce e di quali possono essere tutte le sue potenzialità. Ma se ti stai chiedendo A cosa serve WooCommerce? posso dirti che è uno strumento che serve a dare vita in maniera gratuita al tuo negozio virtuale.

In particolar permette di:

• Creare vetrine attraenti e di impatto utilizzando temi adatti e coerenti con la categoria del brand;
• Personalizzare a proprio piacimento la pagina del negozio con una smisurata quantità di immagini;
• Inserire la possibilità di checkout in tutte le pagine del sito;
• Decidere la localizzazione del negozio e, di conseguenza, la lingua e la valuta;
• Vendere illimitatamente prodotti fisici, digitali e anche affiliati;
• Ordinare tipologie di prodotti in base alla loro popolarità, novità del momento o prezzo;
• Associare Tag, categorie e attributi ad ogni prodotto, compresi dimensione e colore;
• Gestire il carrello con gli ordini e l’anagrafica del cliente rilevando in maniera automatica i loro indirizzi per agevolare il calcolo di spedizione e imposte; 
• Controllare la fase d’acquisto e scegliere la modalità di ricezione dei pagamenti;
• Configurare e dirigere i processi di spedizione e rimborso;
• Mostrare e gestire le recensioni e le valutazioni dei clienti.

E non finisce qui. perché WooCommerce è uno strumento estremamente flessibile e presenta molte soluzioni per aumentare le potenzialità, come plugin, temi, estensioni e modifiche dirette al codice.

Aggiungere e Gestire i prodotti di WooCommerce con Elementor

Entriamo subito nel dettaglio di questa guida e vediamo come far interagire Elementor e WooCommerce per la creazione di un ecommerce in maniera veloce, senza trascurare il gusto per il design e la coerenza con il proprio brand aziendale.

Creare la Pagina Prodotto con Elementor

Con Elementor ed i template che lo stesso mette a disposizione è possibile creare un modello (o più modelli) per la visualizzazione dei singoli prodotti, nei quali è possibile inserire tutte le caratteristiche relative al prodotto (immagini, descrizione, caratteristiche tecniche, prezzo, quantità acquistabili, informazioni sulla spedizione, e tanto altro) attraverso i widget che Elementor mette a disposizione.

Per iniziare a creare un nuovo modello, dal backend di WordPress, dovrai cliccare su Templates > Aggiungi Nuovo e, dopo aver nominato il template, scegliere Prodotto Singolo come tipo del template.

A questo punto potrai scegliere se utilizzare uno dei template sviluppati dal team di Elementor, caricarne uno acquistato, oppure lavorare completamente da zero e creare il tuo ad hoc.

Atterrato nell’editor di Elementor, nella colonna di sinistra, quella relativa ai widget, potrai trovare tutto il necessario per personalizzare la tua Pagina Prodotto, come mostrato nell’immagine sottostante.

Adesso hai tutti gli strumenti utili per presentare i tuoi prodotti in maniera impeccabile, mettendo in risalto le giuste caratteristiche e perché no, anche inserendo i prodotti correlati e quelli più venduti, fare cross selling e up selling, in modo tale che l’utente sia invogliato a continuare nel suo acquisto e possa facilmente aggiungere al carrello anche altri prodotti che non deve assolutamente farsi sfuggire.

Configurare il pulsante “Aggiungi al carrello”

L’”Add To Cart” Button, o più semplicemente il pulsante “Aggiungi al Carrello”, è l’elemento essenziale e che non può mancare all’interno di ogni ecommerce. Con Elementor e WooCommerce puoi inserire vari pulsanti “Aggiungi al Carrello” ovunque nel tuo sito, legati a prodotti diversi. Con un pizzico di artificio in più, a seconda dei prodotti che stai vendendo, per esempio ebook scaricabili, o video corsi, è possibile anche effettuare un redirect diretto alla pagina del checkout, senza dover passare dalla pagina del carrello, e condurre subito gli utenti nello status di clienti.

Elementor permette di aggiungere due diversi pulsanti “Add To Cart”, uno standard, e un’altro con più possibilità di personalizzazione. Ma questo non è così importante, con un pò di curiosità sarai in grado sicuramente di creare un pulsante molto attrattivo.

Ciò su cui è importante focalizzare l’attenzione invece è su come è costruita la Pagina Prodotto: se invece che una semplice pagina del proprio sito internet, hai deciso di utilizzare la pagina prodotto come la pagina di atterraggio di qualche campagna sponsorizzata su Google o sui social, allora la struttura della Pagina Prodotto dovrà essere ben studiata e al suo interno dovranno essere presenti vari pulsanti “Aggiungi al Carrello”, in modo tale che l’utente sia costantemente stuzzicato all’acquisto del prodotto mano a mano che scorre nelle specifiche tecniche.

Ah, non temere, non è necessario che nel pulsante “Aggiungi al Carrello” tu perda tempo a cercare come inserire il nome o il codice di riferimento del prodotto in questione: inserendo il pulsante all’interno del template Prodotto Singolo questo viene preso in automatico e cliccandoci al carrello verrà aggiunto senz’altro il prodotto corretto. Provare per credere!

Completare e pubblicare la Pagina Prodotto

Terminato il layout grafico della pagina non resta altro che decidere in quali situazioni mostrare il template appena creato e procedere subito con la pubblicazione.

Per questo, in basso nella scheda dei widget dell’editor di Elementor, è necessario cliccare sul pulsante Pubblica (Publish) e scegliere le condizioni desiderate prima di procedere con la pubblicazione vera e propria. È possibile decidere di impostare il template per tutti i prodotti, oppure solamente per alcuni prodotti specifici, o addirittura per alcune categorie o tag di prodotti. 

Insomma questa è la dimostrazione del perché si possono creare più di un template per i prodotti e di come è difficile fare a meno di utilizzare Elementor con WooCommerce, viste già le grandi possibilità che offre.

Realizzare la pagina dello Shop con Elementor e WooCommerce

Una volta creati i primi prodotti da mettere in vendita è il momento di creare il negozio vero e proprio, la Pagina Shop per intendersi. WooCommerce, già al momento dell’installazione, se questa procede senza problemi, crea in automatico alcune pagine, nonché le pagine essenziali per un ecommerce, in particolar modo la pagina di Checkout, Shop ed Account. 

Adesso non resta che personalizzare la pagina Shop con Elementor, decidendo anche se questa sarà la homepage del nostro sito oppure no.

Personalizzare la Pagina Shop con Elementor

Per personalizzare la Pagina Shop con Elementor è necessario creare un nuovo template, il template Product Archive e in fase di pubblicazione assegnarlo alla pagina Shop relativa.

Come descritto nella creazione della Pagina Prodotto, è poi possibile scegliere se utilizzare uno dei template sviluppati dal team di Elementor, caricarne uno acquistato, oppure lavorare completamente da zero e creare il tuo Shop ad hoc.

Definito questo primo aspetto è giunto il momento di realizzare il layout della pagina e popolarla di contenuto relativo, scegliendo tra i widget che Elementor stesso mette a disposizione nella sidebar di sinistra:

• Archive title;
• Archive products;
• Archive description;
• Products;
• WooCommerce breadcrumbs;
• Custom Add to Cart;
• WooCommerce pages;
• Product categories;
• Menu cart.

Divertiti e imposta la tua Pagina Shop come meglio credo, senza scordarti che i prodotti sono gli elementi essenziali di un ecommerce. Dopodiché clicca sul pulsante Pubblica (Publish) e scegli dove visualizzare il template appena realizzato, se solamente nella pagina Shop o in qualche altra pagina.

Le pagine di Carrello e Checkout

Con il binomio Elementor WooCommerce è possibile inoltre impostare le altre due pagine essenziali di un ecommerce, ovvero la Pagina Carrello (Cart) e la Pagina Pagamento (Checkout): se del carrello in certi ecommerce possiamo farne a meno, sicuramente non potremo mai fare a meno della pagina di checkout, altrimenti non guadagneremo dalla vendita dei prodotti.

Per gestire le pagine di Checkout e Carrello è bene sapere che quasi sempre queste avranno il design del tema adottato per il proprio sito WordPress, ovviamente con le opzioni di stile modificabili, anche lato codice se necessario.

Esistono due modi per personalizzare queste pagine: il primo metodo, forse più complesso, è quello di creare un template da assegnare singolarmente alle pagine, dove al suo interno deve essere richiamato il widget WooCommerce Pages, e nelle opzioni poi andrà selezionata la pagina di riferimento, Checkout o Carrello che sia.

Il secondo metodo, sicuramente più rapido, è quello di aprire le pagine di Checkout e Carrello con l’editor di Elementor, richiamare il widget Shortcode, e inserire rispettivamente i seguenti shortcode: [{woocommerce_checkout}] per la Pagina Checkout e [{woocommerce_cart}] per la Pagina Carrello (ovviamente rimuovendo le parentesi graffe affinché lo shortcode funzioni veramente).

Dopodiché non resta altro che impostare queste pagine come Checkout e Carrello anche per WooCommerce, andando in WooCommerce > Settings > Advanced  e selezionando le pagine corrette, come mostrato nell’immagine sottostante:

Riflessioni finali

Come dichiarato all’inizio di questa guida, questa vuol essere di aiuto per chi utilizza Elementor e WooCommerce per la creazione e gestione del proprio ecommerce, cercando di illustrare così la strada corretta per creare le pagine essenziali per un ecommerce, e capire come interagiscono tra di loro Elementor e WooCommerce.

È abbastanza ovvio il fatto che le possibilità di personalizzazione della Pagina Prodotto, Pagina Shop, Carrello e Checkout vanno ben oltre quello che puoi immaginare, e sicuramente ben oltre di quello che abbiamo visto in questa guida: per scoprirlo non resta che installare Elementor e WooCommerce sul proprio sito e cominciare a fare dei test e districarsi seguendo in primo impatto le linee presenti in questa guida.

Il binomio Elementor WooCommerce ti permette di creare siti internet ecommerce, per vendere istantaneamente i tuoi prodotti senza l’utilizzo di codice. Non solo, WooCommerce è gratuito e molto flessibile, permette di effettuare quasi tutte le operazioni e le impostazioni che ti possono venire in mente, e se qualche funzionalità sembra non essere sviluppata, ci sono le estensioni e i plugin aggiuntivi per incorporarla e rendere impeccabili l’esperienza di navigazione e di acquisto per gli utenti.