Crea una pagina di prodotto Elementor WooCommerce

Le tendenze di acquisto stanno cambiando rapidamente e le persone tendono ad acquistare online più che mai.

Ecco perché è in aumento la necessità di un negozio di e-commerce per soddisfare le abitudini di acquisto online perché le persone trovano più conveniente acquistare online piuttosto che uscire per fare shopping.

Puoi anche avviare subito il tuo negozio di e-commerce, utilizzando gli strumenti e la configurazione giusti. E noterai un drastico aumento delle tue vendite in un periodo di tempo record.

Se hai intenzione di avviare un negozio di e-commerce e stai cercando un esperto WordPress che faccia il lavoro per te, lascia che te lo dica, non ne hai bisogno.

SÌ! Puoi farlo da solo perché non è necessario essere uno sviluppatore WordPress o un esperto di codifica e puoi farlo senza avere alcuna conoscenza di codifica con gli strumenti e la configurazione giusti.

Segui semplicemente il tutorial passo passo sulla creazione di una pagina del negozio WooCommerce utilizzando il generatore di pagine Elementor.

Scaviamo più a fondo per arrivare al punto!

Di cosa avrai bisogno per creare una pagina di prodotto utilizzando Elementor?

Installa il plugin sul tuo sito WordPress dal repository WordPress.org e oltre a ciò dovrai installare il generatore di pagine Elementor . La versione gratuita può essere scaricata da WordPress.org, tuttavia la versione gratuita include opzioni di personalizzazione limitate. Pertanto, se desideri ottenere opzioni di personalizzazione illimitate, scegli Elementor pro e scaricalo da Elementor.org ufficiale.

Come installare il generatore di pagine Elementor?

  • Per la versione gratuita di Elementor:

Vai su Plugin > Aggiungi nuovo > inserisci il generatore di pagine Elementor > fai clic su Installa e attiva.

  • Per Elementor Pro:

Acquista la versione Pro da Elementor.com, quindi carica il file zip, quindi fai clic su Installa e attiva.

Crea una pagina di prodotto Elementor WooCommerce passo dopo passo

La pagina di prodotto WooCommerce standard assomiglia a qualsiasi pagina di prodotto WooCommerce di base senza alcuna nitidezza.

Tuttavia, se desideri aggiungere la voce del tuo marchio, devi personalizzarlo in modo univoco.

Passaggio 1: vai alla sezione Modello dal menu della dashboard e fai clic su "Aggiungi nuovo".

Ora dal menù a tendina seleziona la voce “Prodotto Singolo”

La parte migliore è che Elementor viene fornito con alcuni modelli di pagine di prodotto già pronti, quindi, se desideri iniziare rapidamente, seleziona tra le opzioni quella che si avvicina di più a quella desiderata.

È molto più semplice creare una pagina di prodotto dal modello predefinito piuttosto che crearla da zero. Pertanto, modifica qualsiasi modello esistente e risparmia tempo e fatica.

Abbiamo selezionato questo modello per la nostra pagina prodotto.

Dopo aver selezionato il tuo modello preferito, ti condurrà all'editor di Elementor dove potrai personalizzare il modello secondo i tuoi gusti.

Qui puoi vedere diversi blocchi nel menu a sinistra. Trascina e rilascia il blocco con cui desideri lavorare.

Fai clic sul pulsante Aggiungi "+" e seleziona la dimensione della colonna che desideri aggiungere.

Abbiamo selezionato due dimensioni di colonna per il nostro modello di prodotto.

Ora aggiungi un widget del titolo del prodotto nella colonna di destra e aggiungi il titolo del tuo prodotto su di esso.

Dopo aver aggiunto il titolo del prodotto, il passaggio successivo è aggiungere il "breadcrumb Woo" sopra di esso.

Ora aggiungi l'immagine del prodotto nella colonna di sinistra e trascina il widget dell'immagine del prodotto dalla colonna di sinistra.

Puoi aggiungere la spaziatura interna a entrambe le colonne per mantenerle leggermente separate l'una dall'altra.

Dopo aver aggiunto l'immagine e regolato l'imbottitura in base alle dimensioni richieste, aggiungi il widget di valutazione del prodotto sotto il titolo del prodotto.

Aggiungi una breve descrizione del widget del prodotto sotto il blocco della recensione del prodotto. puoi anche regolare lo spazio tra i due blocchi.

Una volta che hai finito con la descrizione del prodotto e tutti i dettagli, il nostro prossimo passo è aggiungere il prezzo del prodotto e per questo dovrai trascinare il widget del prezzo sotto la descrizione del prodotto.

Dopo aver aggiunto la scheda del prezzo sotto la descrizione del prodotto, puoi personalizzare il widget del prezzo selezionando le opzioni dal menu a sinistra. Puoi ingrandire l'icona, cambiare lo stile del carattere e anche il colore del carattere dal nero a qualsiasi altro colore di tua scelta.

Ora aggiungi il widget "aggiungi al carrello" e personalizzane il colore, il carattere o lo stile dal menu, se lo desideri.

Ora aggiungi la meta del prodotto sotto il widget del prezzo che mostrerà la categoria del prodotto e il numero di serie del prodotto.

Passaggio 2: aggiungi ulteriori informazioni sul prodotto nella sezione successiva.

Crea una nuova sezione a due colonne e quindi aggiungi le schede Dati prodotto tra cui descrizione, informazioni aggiuntive e recensioni. E sul lato destro della colonna aggiungi la sezione del prodotto correlato.

Per mantenere lo stesso formato di ciascuna colonna puoi fare clic sull'angolo sinistro di ciascuna colonna e copiare e incollare il formato della colonna per ciascuna colonna.

Passaggio 3: aggiungi un'altra sezione della "sezione up-sell".

Ecco come apparirà la sezione di up-selling dopo l'aggiunta. Aggiungi un po' di imbottitura per allineare la sezione.

E infine, hai finito con la progettazione della pagina del tuo prodotto. Ora, il passaggio finale è dove vuoi pubblicare il tuo prodotto? puoi fare clic su Pubblica o andare alla sezione degli occhi nell'angolo in basso del menu a sinistra e fare clic sulle impostazioni per selezionare la categoria del prodotto.

Fai clic sul menu Aggiungi condizione, quindi seleziona la categoria del tuo prodotto e fai clic su Pubblica.

Mobile ottimizza la tua pagina prodotto WooCommerce

Poiché molto traffico arriverà attraverso gli smartphone, dovrai ottimizzare il tuo negozio per la visualizzazione da smartphone, altrimenti potresti perdere le vendite.

Sebbene WooCommerce sia già ottimizzato per i dispositivi mobili, per assicurarti che i modelli di pagina dei tuoi prodotti abbiano un bell'aspetto sullo schermo del dispositivo mobile segui la procedura.

Troverai un'opzione Modalità reattiva nell'angolo in basso a sinistra dell'interfaccia di Elementor.

Quando fai clic sull'opzione Mobile responsive puoi alternare tra le opzioni di visualizzazione Mobile, Desktop e schede.

Fai clic su una delle opzioni che preferisci per visualizzare e modificare il design se trovi qualche complicazione.

Ora salva e continua a pubblicare la pagina del tuo prodotto.

Prezzi di Elementor Pro

La versione base di Elementor è disponibile gratuitamente mentre la versione pro viene fornita con tre licenze. Se stai cercando il tuo blog personale o un singolo sito, allora la licenza personale è più adatta a te dove puoi ottenere un builder WooCommerce insieme a oltre 90 widget professionali.

Mentre le licenze Plus ed Expert sono adatte per aziende o agenzie adulte con un supporto rispettivamente di 3 siti e 1000 siti.

Concludendo

L'unico scopo del page builder Elementor è consentire agli utenti di liberare la propria creatività senza fare affidamento sulla codifica. Elementor viene fornito con una varietà di widget che ti consentono di creare qualsiasi tipo di pagina di prodotto basata su layout accattivanti. Gli elementi base di WooCommerce sono più di 10 che consentono agli utenti di personalizzare ogni angolo e curva della pagina del negozio. E se non trovi l'elemento desiderato nel menu Elementor, non preoccuparti! Esistono molte altre impostazioni avanzate che possono aggiornare il tuo arsenale e aggiungere più elementi alla tua libreria. Uno di questi è i componenti aggiuntivi essenziali che vengono forniti con elementi dedicati solo per WooCommerce.

Holderkhu

live:.cid.e495888558d5265f

Post recenti

Come utilizzare intestazioni e piè di pagina con Elementor

Le intestazioni e i piè di pagina di un sito Web sono elementi essenziali. Nella maggior parte dei casi, l'intestazione fornisce la navigazione...

6 gennaio 2022

Confronto dei temi WordPress: Astra vs OceanWP

Due dei temi WordPress più popolari sul mercato sono Astra e OceanWP. Professionale…

2 gennaio 2022

Confronto dei temi delle notizie WordPress: Giornale vs. Astra

Per creare un eccellente sito Web di notizie non è necessario che tu diventi un web designer. Noi…

25 ottobre 2021

Crea un sito Web relativo alle notizie con il tema del giornale

Il tema Giornale è uno dei temi WordPress più significativi progettati da tagDiv, un...

18 ottobre 2021

Come costruire un eCommerce con il builder Avada WooCommerce

Quando si tratta di creare un negozio online, WooCommerce è il plugin di riferimento. Esso…

4 ottobre 2021

Come utilizzare l'intestazione fissa e gli effetti di scorrimento con Elementor

Un'intestazione è generalmente la prima cosa che una persona vede quando visita il tuo sito web,...

21 settembre 2021