Vuoi imparare a creare una pagina negozio personalizzata? WooCommerce con Elementor?
Come forse saprai, Elementor Pro viene fornito con la funzione di creazione WooCommerce che consente di creare un sito Web di e-Commerce personalizzato con WooCommerce senza codifica. Questa funzionalità 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 tuosito.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 ed 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 Archivio 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.
Sono 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
Per impostare il numero di colonne e righe, puoi aprire il blocco Contenuti 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.
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 Shop Pagina. Fare clic sul pulsante SALVA E CHIUDI per salvare la modifica.
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 Style 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,
- Scatola
In questo contesto, Box si riferisce al contenitore di ciascun prodotto. Puoi aprire il blocco Scatola 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 Style 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 permette di farlo creare un sito Web piattaforma di e-commerce personalizzata e unica con WooCommerce e senza codifica. Non c'è bisogno di installare un tema WordPress che afferma di essere progettato per WooCommerce. Invece, puoi creare tu stesso pagine WooCommerce personalizzate utilizzando l'editor visivo di Elementor.
Leggi anche: Come aggiungere un divisore per creare una sezione in Elementor
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.
...
