Come costruire un negozio con un WooCommerce Builder per Elementor

Stai cercando un builder WooCommerce per Elementor in modo da poter creare e personalizzare il tuo negozio utilizzando il potente visual builder di Elementor.

Con ShopReady, puoi creare e personalizzare l'intero negozio WooCommerce con Elementor, anche se stai utilizzando solo la versione gratuita di Elementor!

Se vuoi saperne di più su ShopReady, puoi dare un'occhiata alla nostra recensione completa su ShopReady.

In questo articolo, tuttavia, ci concentriamo maggiormente su come utilizzare ShopReady come builder WooCommerce per Elementor.

Di seguito, ti mostreremo passo dopo passo come utilizzare ShopReady per creare e personalizzare il tuo negozio, inclusa l'aggiunta di funzionalità avanzate come liste dei desideri, visualizzazione rapida dei prodotti, checkout ottimizzati e molto altro.

Sarai in grado di creare un negozio simile a questo:

E sarai in grado di personalizzare tutto utilizzando Elementor, comprese le pagine del prodotto, del carrello e di pagamento ( oltre a molto altro ):

Come utilizzare ShopReady come WooCommerce Builder per Elementor

Senza ulteriori indugi, entriamo direttamente nel nostro tutorial passo-passo.

Ancora una volta, se vuoi saperne di più sulle numerose funzionalità di ShopReady prima di iniziare il tutorial, puoi leggere la nostra recensione completa su ShopReady.

E ogni volta che scegli di provarlo, puoi ottenere uno sconto del 30% utilizzando l'esclusivo codice coupon WPMayor30 al momento del pagamento.

1. Crea il tuo negozio WooCommerce di base e installa Elementor

Se non l'hai già fatto, il primo passo è configurare il tuo negozio WooCommerce di base.

Ti consigliamo di scegliere un hosting WooCommerce di qualità, installare WooCommerce, eseguire la procedura guidata di installazione, aggiungere alcuni prodotti e così via.

Se hai bisogno di aiuto qui, puoi consultare la nostra guida alla creazione di un negozio WooCommerce.

Non preoccuparti di scegliere un tema WooCommerce o di personalizzare il design, perché è a questo che servono Elementor e ShopReady. Concentrati solo sull'impostazione delle cose sul back-end in modo da avere un negozio funzionante, anche se di base.

Dopo averlo fatto, ti consigliamo di installare anche il plug-in Elementor.

Con ShopReady, sei libero di utilizzare solo la versione gratuita di Elementor.

Oppure, se hai già Elementor Pro, puoi anche installarlo: ShopReady funziona bene con entrambe le versioni.

2. Installa ShopReady e abilita tutto

Dopo aver configurato il tuo negozio WooCommerce di base e installato Elementor, sei pronto per installare il builder ShopReady WooCommerce per Elementor.

C'è una versione gratuita di ShopReady disponibile su WordPress.org, oltre a una versione premium che aggiunge più funzionalità a partire da $ 75.

Per questo tutorial, abbiamo installato la versione Pro. Tuttavia, gli stessi passaggi di base si applicheranno anche alla versione gratuita, quindi dovresti essere in grado di seguire anche se utilizzi la versione gratuita ( potresti non avere accesso ad alcune delle funzionalità più avanzate e non sarai in grado di personalizzare il maggior numero di modelli ).

Una volta attivato il plug-in, otterrai un nuovo menu ShopReady nella dashboard di WordPress.

Se vai al menu principale di ShopReady , otterrai un'interfaccia con diverse aree in cui puoi abilitare vari widget, moduli e modelli.

Per ora, ti consiglio di abilitare tutti i widget e i moduli in modo da avere accesso a tutte le funzionalità mentre crei il tuo negozio.

Una volta creato il tuo negozio, puoi sempre tornare indietro e disabilitare tutti gli elementi che non stai utilizzando per mantenere le cose leggere e velocizzare il tuo negozio.

È particolarmente importante abilitare il modulo Demo Importer , in quanto ciò ti consentirà di accedere ai modelli di negozio predefiniti di ShopReady ( sebbene tu possa sempre personalizzare tutto da zero ).

Una volta abilitato il modulo Demo Importer , ti verrà chiesto di installare il plug-in Demo Importer complementare, cosa che dovresti fare.

Dopo averlo fatto, vai nella nuova area Unyson nella dashboard di WordPress e abilita l'estensione Backup & Demo Content in modo da poter importare i modelli di ShopReady.

Nota: se desideri progettare i tuoi modelli da zero utilizzando Elementor, puoi saltare questo processo.

3. Importa un modello che funga da base per il tuo negozio

Ora puoi andare su Strumenti → Installazione contenuto demo per installare uno dei siti demo ShopReady predefiniti.

Ancora una volta, sei anche libero di saltare questo e progettare da zero i modelli del tuo negozio, che tratteremo nella prossima sezione.

Una volta importata la demo, sarai in grado di personalizzare completamente tutto utilizzando Elementor.

Dai un'occhiata alle diverse opzioni demo e quindi fai clic sul pulsante Installa per la demo che desideri utilizzare come base del tuo negozio.

Per questo tutorial, useremo Demo V1 :

E proprio così, il tuo negozio dovrebbe apparire esattamente come la demo:

4. Personalizza i modelli del tuo negozio con Elementor

Ora sei pronto per iniziare a utilizzare il builder WooCommerce per Elementor per personalizzare i contenuti del tuo negozio.

Per accedere a tutti i diversi modelli del tuo negozio, vai nell'area ShopReady nella dashboard di WordPress e quindi seleziona la scheda Modelli .

Qui vedrai un elenco di tutti i diversi modelli associati al tuo negozio. Ecco alcuni dei modelli più importanti da considerare:

• Prodotto : il modello per una singola pagina di prodotto.
• Negozio : il modello per la pagina principale del negozio.
• Archivio negozio : il modello per la pagina che elenca tutti i tuoi prodotti.
• Carrello / Carrello vuoto : i modelli per le varie fasi del tuo carrello.
• Checkout : il modello per la tua pagina di checkout.
• Il mio account : il modello per la pagina dell'account front-end di un acquirente.

Tuttavia, la cosa bella di ShopReady è che ti dà anche il controllo su molti altri modelli, come l'anteprima del prodotto, la lista dei desideri e altro ancora.

Per modificare qualsiasi modello e avviare Elementor, devi solo selezionare il modello pertinente e quindi fare clic sull'icona Matita .

Puoi anche creare nuovi modelli e utilizzare più modelli in diverse parti del tuo negozio:

ShopReady lancerà ora l'interfaccia Elementor.

Per controllare il design, puoi utilizzare la normale interfaccia di Elementor e tutte le sue opzioni di design.

La differenza fondamentale è che ShopReady ti fornirà anche tonnellate di widget generali e widget WooCommerce dedicati che puoi utilizzare nei tuoi progetti. Puoi trovarli nelle varie aree Shop Ready dell'interfaccia di Elementor:

Ogni widget avrà anche le proprie impostazioni uniche.

Ad esempio, il widget Miniatura con zoom ti consente di visualizzare le immagini del prodotto con diversi layout e impostazioni:

Quando hai finito, assicurati di salvare le modifiche.

Quindi, puoi ripetere lo stesso processo per modificare tutti i modelli del tuo negozio. Il collegamento blu Dashboard sul lato destro della pagina semplifica il ritorno all'interfaccia dei modelli ShopReady.

Diversi modelli potrebbero includere i propri widget speciali. Ad esempio, quando crei il modello della pagina di pagamento, otterrai widget speciali per aiutarti a farlo:

5. Personalizza le impostazioni del sito

Oltre a consentirti di personalizzare i singoli modelli con Elementor, ShopReady aggiunge anche alcune opzioni al menu Impostazioni sito di Elementor. Puoi accedere alle impostazioni del sito di Elementor facendo clic sull'icona dell'hamburger nell'angolo in alto a sinistra dell'interfaccia di Elementor e selezionando Impostazioni del sito .

Qui è dove puoi accedere a una serie di impostazioni importanti per il comportamento del tuo negozio.

Inizialmente, le impostazioni sono divise in due aree: ShopReady e ShopReady General & PopUp.

Se fai clic in quelle aree, otterrai una serie di opzioni aggiuntive. Ad esempio, puoi controllare il comportamento del mini carrello in tutto il sito che puoi aggiungere con ShopReady:

Ti consigliamo di esplorare tutte queste opzioni perché è qui che puoi trovare tantissime funzioni interessanti per il tuo negozio.

Puoi anche controllare l'intestazione e il piè di pagina andando su ShopReady → Intestazione a piè di pagina nella dashboard di WordPress.

Inizia a utilizzare un WooCommerce Builder per Elementor oggi stesso

Gli utenti adorano Elementor per la sua potente interfaccia visiva drag-and-drop builder.

Con ShopReady, puoi sfruttare la potenza di quel costruttore per progettare e personalizzare completamente il tuo negozio WooCommerce, anche se stai utilizzando solo la versione gratuita di Elementor.

Se sei pronto per iniziare, usa il pulsante qui sotto per scaricare ShopReady e poi segui questo tutorial per creare il tuo negozio WooCommerce.

Bonus: ottieni il 30% di sconto su ShopReady utilizzando l'esclusivo codice coupon WPMayor30 al momento del pagamento!