Come creare una pagina di pagamento WooCommerce utilizzando Elementor

Pubblicato: 2020-07-02

Se sei il proprietario di un'attività online, probabilmente sai già quanto sia importante avere una pagina di pagamento WooCommerce che sia attraente, interattiva e facile da usare per i visitatori del tuo sito. Tuttavia, quello che probabilmente non sapevi è che puoi creare facilmente una bellissima pagina di Checkout per il tuo negozio online in meno di 5 minuti!

WooCommerce Checkout Page Using Elementor

La parte migliore? Non è necessario avere alcuna esperienza di programmazione per farlo. Tutto quello che devi fare è creare un negozio WooCommerce per vendere i tuoi prodotti e utilizzare il generatore di pagine Elementor per creare una bellissima pagina WooCommerce Checkout.

Sommario

Semplificare il checkout di WooCommerce per migliorare l' esperienza dell'utente

Per avere clienti soddisfatti che torneranno nel tuo negozio online, devi concentrarti sul miglioramento dell'esperienza del tuo cliente. Per fare ciò, devi assicurarti che il tuo negozio online si carichi rapidamente e senza intoppi e sia facile da capire.

Per questo motivo, è importante semplificare la tua pagina di pagamento WooCommerce per migliorare l'esperienza dei visitatori del tuo sito. Per fortuna, questo è molto facile da fare e non richiede abilità di programmazione!

Cose di cui avrai bisogno per progettare la pagina di pagamento di WooCommerce

Per progettare una pagina di pagamento WooCommerce, devi prima assicurarti di avere installato i seguenti plugin di WordPress:

  • WooCommerce: senza il plug-in WooCommerce installato, non è possibile configurare un negozio Woocommerce. Quindi assicurati di aver installato e attivato anche questo plugin.
  • Elementor: per configurare un negozio WooCommerce senza bisogno di codificare, assicurati di aver installato e attivato Elementor.
  • Componenti aggiuntivi essenziali per Elementor: questo plugin contiene tonnellate di elementi o widget utili e interessanti per il tuo sito web. Per questo tutorial, avrai bisogno dell'elemento EA Woo Checkout per progettare rapidamente la tua pagina di WooCommerce Checkout. Puoi scoprire come installare i componenti aggiuntivi essenziali per Elementor qui .

Guarda il video tutorial

Come creare una pagina di pagamento WooCommerce con Elementor in circa 5 minuti

Ora che hai installato e attivato tutti i plugin sopra menzionati, è il momento di creare la tua pagina di pagamento WooCommerce. Prima di poterlo fare, però, devi configurare il tuo negozio WooCommerce con Elementor se non l'hai già fatto.

Dopo aver impostato il tuo negozio WooCommerce, segui questi passaggi per creare una pagina di pagamento WooCommerce utilizzando Elementor e EA Woo Checkout .

Passaggio 1: assegna una nuova pagina come pagina di pagamento di WooCommerce

Il plug-in WooCommerce viene fornito con una pagina di pagamento predefinita. Tuttavia, per progettare la tua bellissima pagina di pagamento con EA Woo Checkout , dovrai sostituire la pagina di pagamento predefinita con un'altra tua pagina.

Per fare ciò, crea una nuova pagina dalla dashboard di WordPress. Quindi, vai su WooCommerce -> Impostazioni e fai clic sulla scheda "Avanzate" . Da qui, puoi assegnare la pagina desiderata come pagina di pagamento. Basta fare clic sull'opzione della pagina di pagamento e selezionare una delle pagine dal menu a discesa come pagina di pagamento di WooCommerce.

Woo Checkout

Passaggio 2: attiva EA Woo Checkout

Successivamente, devi attivare l'elemento EA Woo Checkout . Per fare ciò, devi modificare la tua pagina di WooCommerce Checkout utilizzando Elementor Editor. Trova l'elemento "EA Woo Checkout" dall'opzione "Cerca" nella scheda "ELEMENTI".

Ora tutto ciò che devi fare è semplicemente trascinare e rilasciare l'elemento "Woo Checkout" nella sezione "Trascina il widget qui" o nella sezione "+".

Woo Checkout

Dopo aver trascinato e rilasciato l'elemento in qualsiasi sezione della pagina, questo è il layout predefinito che vedrai.

Woo Checkout

Passaggio 3: modifica il contenuto della tua pagina di pagamento Woo

Ora che hai attivato con successo l' elemento EA Woo Checkout , puoi iniziare a modificare il contenuto della tua pagina Woo Checkout per renderla più adatta al tuo negozio WooCommerce.

Nella scheda "Contenuto" vedrai diverse opzioni come Impostazioni generali, Dettagli dell'ordine e altre. Puoi configurare queste impostazioni per personalizzare il contenuto della tua pagina di Woo Checkout come preferisci.

Woo Checkout

Puoi trovare maggiori dettagli su come configurare le impostazioni dei contenuti di EA Woo Checkout nella nostra pagina della documentazione.

Se hai la versione pro di Essential Addons , puoi scegliere tra altri due layout: il layout a più passaggi e il layout diviso.

Woo Checkout

Il layout a più passaggi e il layout diviso sono dotati di alcune opzioni di stile aggiuntive per far risaltare davvero la tua pagina di Woo Checkout. Puoi leggere di più su come funzionano nella nostra documentazione.

Passaggio 4: modella la tua pagina di pagamento Woo

Quando hai finito di modificare il contenuto della tua pagina di Woo Checkout, è tempo di iniziare a modellarla per renderla più attraente per i tuoi clienti.

Ci sono tantissime opzioni disponibili per personalizzare la tua pagina di pagamento Woo nel modo che preferisci. Basta fare clic sulla scheda "Stile" per personalizzare diverse aree della tua pagina. Vedrai molte opzioni diverse come "Titolo della sezione", "Dettagli dell'ordine", "Accesso", "Coupon" e altro ancora.

Woo Checkout

Modifica e prova tutte le opzioni oppure visita la nostra pagina della documentazione per scoprire come applicare lo stile a EA Woo Checkout . Con pochi clic potrai cambiare i colori, la tipografia e molto altro per far risaltare la tua pagina di Woo Checkout ai clienti.

Passaggio 5: salva le modifiche e visualizza il risultato finale

Se hai finito di modellare la tua pagina di pagamento Woo, assicurati di salvare le modifiche. Puoi visualizzare in anteprima il risultato finale prima di pubblicare la tua pagina.

Woo Checkout

BONUS: Pacchetto modelli WooCommerce per Elementor [GRATUITO]

Hai cercato un modello WooCommerce perfetto per Elementor e ti sei sentito deluso? Bene, abbiamo buone notizie per te. Presentazione Pacchetto di modelli EleShoply di Templately : straordinario modello Elementor per creare il tuo negozio eCommerce senza alcuna codifica . Questo straordinario pacchetto di modelli pronti viene fornito con più pagine insieme al design della pagina di pagamento WooCommerce pronto.

Woo Checkout

Contiene anche diverse bellissime pagine pronte per l'uso, tra cui:

  • Pagina iniziale
  • Pagina di raccolta del prodotto
  • Pagina del singolo prodotto
  • Pagina del carrello
  • Pagina dell'account
  • Pagina di pagamento
  • Chi siamo Pagina
  • Pagina Contattaci

Puoi creare istantaneamente una straordinaria pagina di pagamento WooCommerce utilizzando questo modello Elementor pronto in due semplici passaggi:

Passaggio 1: inserisci il pacchetto di modelli EleShoply da Templately

Innanzitutto, registrati per un account su Templately e installa il plugin Templately per WordPress. Successivamente, modifica la pagina di pagamento Woo assegnata con Elementor Editor. Vedrai un'icona Templately blu.

Woo Checkout

Quando fai clic su questa icona, si aprirà una finestra popup in cui vedrai tutti i modelli Elementor disponibili con Templately. Cerca "EleShoply" e inserisci la pagina di pagamento EleShoply nel tuo sito Elementor.

Woo Checkout

Passaggio 2: personalizza la pagina in base al tuo stile

Ora puoi personalizzare la tua pagina di pagamento Woo per aggiungere il tuo stile personale ad essa. Quando hai finito di personalizzare la tua Pagina di pagamento, salva semplicemente le modifiche e pubblicala affinché il mondo possa vederla.

Woo Checkout

Parole finali

Questo è tutto! Sei pronto per pubblicare la tua pagina di Woo Checkout. Non ci vogliono più di cinque minuti per impostare tutto e dare uno stile alla tua Pagina di pagamento come preferisci. E non hai nemmeno bisogno di toccare una singola riga di codice per farlo! Quindi prova Elementor e dai un'occhiata ai componenti aggiuntivi essenziali per altri elementi utili e interessanti.

Se hai altre domande, puoi sfogliare la nostra pagina della documentazione o contattare il nostro team di supporto per ulteriore assistenza.

Ti è piaciuto questo tutorial? Sentiti libero di condividere i tuoi pensieri con noi nei commenti qui sotto.