Vai al contenuto principale

Come creare una pagina personalizzata di un negozio WooCommerce con Elementor

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Ti piacerebbe imparare come creare una pagina personalizzata per un negozio WooCommerce con Elementor?

Come forse saprai, Elementor Pro è dotato di una funzione di creazione di WooCommerce che ti consente di creare un sito Web di e-commerce personalizzato con WooCommerce senza codifica. Questa funzione ti consente di creare pagine WooCommerce personalizzate utilizzando l'editor visivo di Elementor che offre un'interfaccia intuitiva.

Vedi anche: Come installare Elementor su WordPress

Al momento della stesura di questo articolo, puoi creare pagine personalizzate per la pagina del negozio, la pagina del prodotto e le pagine dell'archivio del prodotto (tag e categorie). Presto sarai anche in grado di creare pagine personalizzate per la pagina di pagamento e la pagina del carrello.

In questo articolo, ti mostreremo come creare una pagina del negozio WooCommerce personalizzata utilizzando la funzione di creazione di WooCommerce di Elementor Pro.

La stessa pagina del negozio è una delle pagine predefinite in WooCommerce. Questa pagina funge da vetrina per mostrare i tuoi prodotti. Puoi accedere a questa pagina andando su votresite.com/store. Per impostazione predefinita, la pagina del negozio WooCommerce mostra solo i prodotti WooCommerce.

Creando una pagina del negozio personalizzata utilizzando Elementor Pro, puoi aggiungere elementi per rendere la tua vetrina più attraente.

Come creare una pagina personalizzata di un negozio WooCommerce con Elementor

Esistono almeno due widget Elementor che puoi utilizzare per creare una pagina personalizzata di un negozio WooCommerce: Prodotti di archivio e Prodotti.

In questo esempio, usiamo quest'ultimo.

La funzione del widget Prodotti è abbastanza simile a quello del widget Messaggi. La differenza è che il widget Prodotti viene utilizzato per visualizzare i prodotti WooCommerce mentre il widget Post viene utilizzato per visualizzare i post del blog.

Leggi anche: Come importare o esportare modelli in Elementor

Tieni presente che puoi trovare il widget Prodotti solo quando il plug-in WooCommerce è installato e attivato.

Per iniziare a creare una pagina del negozio WooCommerce personalizzata utilizzando Elementor Pro, vai su Innanzitutto à Modelli -> Generatore di temi sulla dashboard di WordPress. Fare clic sulla scheda Prodotti Archivia della pagina Theme Builder, quindi fare clic sul pulsante ajouter un ARCHIVIO PRODOTTI.

Dai un nome al tuo modello e clicca sul pulsante CREA UN MODELLO.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

come creare una pagina personalizzata per un negozio WooCommerce con ElementorSono disponibili tre modelli di pagine del negozio personalizzate tra cui scegliere nel caso in cui si desideri creare la pagina del negozio personalizzata da un modello. Se vuoi creare la pagina del negozio personalizzata da zero, puoi semplicemente chiudere la libreria dei modelli.

Vedi anche: Come utilizzare il campionatore di colori in Elementor

In questo esempio, creeremo da zero la pagina del negozio personalizzata. Come accennato in precedenza, utilizzeremo il widget Prodotti per visualizzare i prodotti.

Prima di aggiungere il widget Prodotti alla casella di modifica, puoi definire il layout aggiungendo sezioni e colonne. Una volta che il layout è pronto, puoi semplicemente trascinare il widget Prodotti nella casella di modifica.

Come puoi vedere, il widget Prodotti carica e visualizza automaticamente gli ultimi prodotti WooCommerce. Puoi modificare la query aprendo il blocco domanda sotto la scheda Contenuto dal pannello delle impostazioni. Ci sono cinque opzioni tra cui scegliere:

  • Query corrente - Query corrente
  • Ultimi prodotti - Ultimi prodotti
  • Saldi - Saldi
  • In primo piano - In primo piano
  • Selezione manuale - Selezione manuale

Puoi anche impostare l'ordine in cui vengono visualizzati i prodotti o escluderne alcuni

come creare una pagina personalizzata per un negozio WooCommerce con Elementor

Per impostare il numero di colonne e righe, puoi aprire il blocco del Pacco sotto la scheda Soddisfare. Da questo blocco puoi anche attivare il paginatura.

Puoi giocare con il pannello delle impostazioni finché non ottieni le migliori impostazioni per il widget Prodotti. Una volta terminato con il widget Prodotti, puoi aggiungere altri widget alla tua pagina.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Leggi anche: Come usare il selettore di colori in Elementor

Una volta terminata la modifica della pagina, puoi fare clic sul pulsante PUBBLICARE nella parte inferiore del pannello delle impostazioni.

Aggiungi una condizione di visualizzazione facendo clic sul pulsante aggiungere una condizione. Poiché desideri creare una pagina del negozio personalizzata, seleziona l'opzione Compra Pagina. Fare clic sul pulsante SALVA E CHIUDI per salvare la modifica.

come creare una pagina personalizzata per un negozio WooCommerce con Elementor

Finora, hai creato con successo la pagina del negozio WooCommerce personalizzata utilizzando Elementor Pro. Puoi andare sul tuo sito.com/negozio per controllare il risultato.

Personalizza il widget Prodotti

Prima di pubblicare la tua pagina, puoi personalizzare il widget Prodotti per renderlo più attraente. Per fare ciò, fai clic sul widget nella casella di modifica e vai alla scheda Stile dal pannello delle impostazioni. Ci sono quattro blocchi che puoi aprire come segue:

  • Prodotti

Puoi aprire questo blocco per definire lo spazio tra colonne e righe. Da questo blocco puoi anche impostare la tipografia (famiglia di caratteri, dimensione del carattere, ecc.) nonché il colore del testo degli elementi del prodotto come titolo del prodotto, prezzo del prodotto, valutazione del prodotto, prodotto, ecc. Puoi anche impostare il bordo dell'immagine del prodotto,

  • Box

In questo contesto, Box si riferisce al contenitore di ciascun prodotto. Puoi aprire il blocco Box per definire la larghezza del bordo del contenitore, il raggio del bordo, l'ombra della scatola, il colore di sfondo, il colore del bordo, ecc.

  • Impaginazione

Se attivi l'opzione Impaginazione dal blocco Soddisfare, puoi aprire il blocco Impaginazione sotto la scheda Stile per personalizzare l'impaginazione. Puoi impostare cose come spaziatura, colore del bordo, colore di sfondo, ecc.

È inoltre possibile definire parametri diversi su ogni stato (normale, puntato e attivo).

  • Vendita Flash

Quando aggiungi un nuovo prodotto in WooCommerce, puoi impostare un attributo del prezzo di vendita per mostrare ai tuoi visitatori che il prodotto associato è scontato. Per enfatizzare ciò, puoi visualizzare l'attributo di vendita nella pagina del negozio in modo che i prodotti scontati abbiano un badge di vendita.

Puoi aprire il blocco Vendita Flash per personalizzare il badge di vendita. Puoi definire elementi come colore del testo, colore di sfondo, tipografia, raggio del bordo, dimensione (larghezza e altezza), distanza, ecc….

Alla fine

WooCommerce Builder è una delle funzionalità offerte da Elementor Pro. Ti consente di creare un sito Web di eCommerce personalizzato e unico con WooCommerce e senza codifica. Non è necessario installare un tema WordPress che afferma di essere progettato per WooCommerce. Invece, puoi creare pagine WooCommerce personalizzate utilizzando l'editor visivo di Elementor.

Leggi anche: Come aggiungere un divisore per creare una sezione in Elementor

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Fino alla versione 3.2.2, Elementor Pro ti consente solo di creare pagine di negozio personalizzate, pagine di prodotti singoli personalizzati e pagine di archivio di prodotti personalizzati. Ma Elementor ha annunciato che nella prossima versione di Elementor Pro sarai anche in grado di creare una pagina del carrello personalizzata, una pagina di pagamento personalizzata e una pagina dell'account cliente personalizzata.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come creare una pagina personalizzata per un negozio WooCommerce con Elementor. Se hai dubbi su come arrivarci ffacci sapere in commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer