Come configurare un carrello della spesa WordPress con WooCommerce
Pubblicato: 2022-10-28Quindi, hai quasi finito di creare il tuo nuovissimo sito Web di shopping WooCommerce. Hai finito di costruire il layout del prodotto principale del mercato, il menu di selezione della categoria di prodotto e il piè di pagina dell'intestazione con indicazioni di navigazione funzionali.
L'aspetto più importante di qualsiasi sito Web di e-commerce è la capacità di reindirizzare e aiutare i clienti ad aggiungere prodotti al carrello da qualsiasi punto del sito Web, fino al processo di pagamento fino alla conferma dell'ordine.
Può sembrare una funzione difficile da integrare nei siti Web di eCommerce di WordPress, ma in realtà non lo è. WordPress ha una vasta comunità che sostiene il suo sviluppo e puoi aggiungere questa funzione al tuo sito Web utilizzando un plug-in per il carrello degli acquisti WooCommerce che funziona perfettamente con qualsiasi tema WooCommerce di WordPress .
Sommario
Come funziona il carrello WooCommerce?
Quando i prodotti vengono aggiunti al carrello in WooCommerce, vengono aggiunti a un elenco separato con la variante e la quantità scelte dal cliente. Questo aiuta gli utenti a tenere traccia dei prodotti selezionati e questa funzione consente loro anche di vedere automaticamente il prezzo totale calcolato dell'ordine a cui procederanno al momento del pagamento. E offre anche agli utenti la possibilità di modificare la pagina del carrello degli acquisti di WooCommerce.
I vantaggi di un carrello in WooCommerce
Ci sono alcuni grandi vantaggi nell'usare un carrello in una piattaforma di acquisto WooCommerce. Prima di passare a una guida passo passo su come creare una pagina del carrello degli acquisti WooCommerce, alcuni di essi sono:
- Progettato per assistere i clienti nella selezione di uno o più prodotti da acquistare e continuare a sfogliare altri prodotti.
- Aiuta a calcolare il valore totale dei prodotti mentre continui ad aggiungerli al carrello.
- Visualizza la quantità e le variazioni di un prodotto che hai selezionato e calcola il valore totale di conseguenza.
- Può reindirizzare i clienti alla pagina di pagamento con un clic di un pulsante.
- Può essere dotato di funzionalità aggiuntive del carrello WooCommerce come la cronologia degli ordini, il salvataggio di un carrello per dopo, ecc.
- Gli utenti possono ottenere un plug-in per il carrello WooCommerce dotato di straordinari elementi di design.
Come aggiungere un carrello a WooCommerce
Ora, esaminiamo il processo di aggiunta di un carrello degli acquisti a WooCommerce. Alla fine di questo articolo, sarai in grado di iniziare a vendere un'ampia varietà di prodotti con una piattaforma di e-commerce funzionale che presenta il miglior plug-in per il carrello degli acquisti per WordPress.
Passaggio 1: installazione dei prerequisiti
Per iniziare con la creazione del carrello e il processo di impostazione del carrello WooCommerce, dovrai avere alcuni elementi plug-in installati e attivati sul tuo account WordPress. Per questo, dovrai disporre delle ultime versioni di WordPress , WooCommerce , Elementor page builder e il plug-in ShopReady WooCommerce Shop Builder.
Per installare i plugin, accedi al tuo account WordPress, vai su WordPress Dashboard > Plugin > Aggiungi nuovo e cerca i plugin uno per uno, quindi fai clic su E ora fai clic su Attiva al termine del processo di installazione. Segui la stessa procedura per installare tutti i plugin e i programmi richiesti.
Passaggio 2: utilizzo di un tema del carrello degli acquisti WooCommerce
Ora per promuovere il nostro processo di creazione delle funzioni del carrello, dovrai avere un tema WooCommerce funzionante installato per alcune funzionalità aggiuntive. In questo caso, possiamo utilizzare un modello di carrello degli acquisti WooCommerce invece di utilizzare un tema WordPress WooCommerce .
Ciò ridurrà notevolmente il tempo necessario per la personalizzazione e la pubblicazione del sito Web.
Per installare un modello di eCommerce funzionante sul tuo sito web, inizia creando una nuova pagina e assegnale un titolo dalla dashboard di WordPress > Pagine > Aggiungi nuovo e fai clic su Verrai reindirizzato alla schermata dell'Editor di Elementor . Qui troverai l' icona della libreria di modelli ShopReady - Elementor . Fare clic sull'icona per accedere alla libreria dei modelli. Scegli e scegli un modello che si adatta alla tua identità di marca e fai clic su Inserisci per applicare il modello.
Attendi fino al termine del processo di importazione del modello.
Dovrebbe assomigliare a questo.
La sezione del tuo prodotto potrebbe sembrare vuota se non hai aggiunto prodotti a WooCommerce. Dovresti aggiungere subito i prodotti che stai cercando di mostrare sulla tua piattaforma WooCommerce. Per farlo, puoi seguire la nostra precedente guida su – Come aggiungere prodotti a un negozio WooCommerce .
Ogni prodotto WooCommerce può essere personalizzato con il titolo del prodotto, la descrizione, il prezzo, il prezzo scontato, le immagini, i metadati, le variazioni, ecc. dalla dashboard del prodotto WooCommerce.
Passaggio 3: personalizzazione della pagina del prodotto
Per iniziare il processo di personalizzazione della pagina del tuo prodotto, vai alla dashboard ShopReady - WooCommerce Builder e seleziona l'opzione Modelli. Da lì, puoi costruire una pagina prodotto di base da utilizzare come punto di partenza per le tue personalizzazioni. Attiva la categoria Modello prodotto, quindi cerca l'impostazione Prodotto singolo in quella categoria. Ora, seleziona l'icona di modifica dalla barra degli strumenti.
E dopodiché, la schermata che mostra l' Editor di Elementor verrà caricata per te. Basta fare clic sul segno più che può essere visto nell'angolo in alto a destra dell'interfaccia di Elementor per iniziare il processo di personalizzazione della pagina. Quando si tratta dell'aspetto della tua pagina e dei widget che desideri utilizzare, hai un'ampia varietà di opzioni disponibili quando si tratta delle sezioni di Elementor che puoi inserire al suo interno.
Passaggio 3: utilizzo dei widget Elementor per personalizzare la pagina del prodotto di WooCommerce Store
Aggiunta di un titolo di prodotto
Poiché hai già stabilito una struttura di sezione primaria utilizzando Elementor per la pagina del tuo prodotto WooCommerce, ora puoi iniziare il processo di aggiunta di un titolo del prodotto. Dovrai utilizzare l'approccio drag-and-drop per posizionare il widget del titolo del prodotto dove lo desideri nella pagina del prodotto per raggiungere questo obiettivo.
Visualizza il titolo del prodotto corretto andando sulla barra di navigazione di Elementor, selezionando la scheda Contenuto e quindi cercando le opzioni di aggiornamento dell'editor nel sottomenu che segue. Per selezionare il prodotto appropriato, fai clic sul suo nome nel menu a discesa che si trova sotto Prodotto demo.
Dovrai accedere alla dashboard del prodotto WooCommerce e aggiungere o modificare le informazioni essenziali sul prodotto in modo che questi dati visualizzino il titolo del prodotto corretto. Questo può essere fatto facendo clic sui pulsanti "Aggiungi" o "Modifica".
Aggiunta di un'immagine in evidenza alla pagina del prodotto
Successivamente, ti consigliamo di assicurarti che il tuo prodotto abbia sia una galleria di immagini che un'immagine in primo piano. Per ottenere ciò, puoi utilizzare uno qualsiasi dei vari widget immagine inclusi nel plug-in all-in-one per l'eCommerce fornito in dotazione con Elementor.
Per il bene di questa dimostrazione, utilizzeremo il widget ShopReady Thumbnail with Zoom, che, come suggerisce il nome, ha una funzione di zoom. Se utilizzi questo widget, sarai in grado di visualizzare una versione con zoom al passaggio del mouse di un prodotto WooCommerce dell'immagine del tuo prodotto ai tuoi clienti ogni volta che spostano il mouse sull'immagine del tuo prodotto.
Allo stesso modo di prima, puoi selezionare l'immagine del prodotto appropriata facendo clic sulla scheda Contenuto dell'opzione Prodotto demo.
Aggiunta di un blocco per il widget dei prezzi
Il blocco dei prezzi del prodotto è un altro componente essenziale che dovrebbe essere presente nella pagina del prodotto eCommerce. Per fare ciò, dovrai modificare gli attributi del prodotto WooCommerce con le modifiche appropriate e utilizzare il widget Prezzo ShopReady, che deve essere posizionato sotto il titolo del prodotto.
Per assicurarti che venga visualizzato il prezzo corretto, scegli il titolo del prodotto dal menu a discesa nell'opzione Prodotto demo della scheda Contenuto.
Aggiunta della descrizione del prodotto
Utilizzando questo componente aggiuntivo del prodotto WooCommerce Widget Descrizione prodotto, non solo hai la possibilità di aggiungere descrizioni dei prodotti, ma hai anche il potere di personalizzare altamente le descrizioni. Attraverso l'uso della scheda stile, avrai la possibilità di modificare il modo in cui la descrizione del prodotto verrà visualizzata al grande pubblico.
Aggiunta della funzionalità Aggiungi al carrello
La possibilità per i clienti di aggiungere articoli aggiuntivi al carrello prima di passare alla pagina di pagamento è facilitata dall'opzione "Aggiungi al carrello", che è un'altra caratteristica estremamente importante da avere.
L'utilizzo del widget Aggiungi al carrello di ShopReady ti consentirà di dotare la pagina del tuo negozio eCommerce di una potente versione della funzione Aggiungi al carrello . Con l'aiuto di questo widget, sarai in grado di fornire ai tuoi clienti la possibilità di regolare la quantità di un prodotto che hanno nel carrello direttamente dal blocco Aggiungi al carrello.
Puoi anche modificare l'aspetto del pulsante Aggiungi al carrello di Elementor tramite la scheda Stile Elementor per lo stile del prodotto WooCommerce. Qui puoi modificare il carattere, il colore, lo sfondo, il margine, il riempimento e altri attributi.
Aggiunta di metadati alla pagina del prodotto
L'implementazione di un filtro prodotto WooCommerce che utilizza i metadati e gli attributi del prodotto che hai aggiunto a WooCommerce durante l'aggiunta di prodotti è qualcosa che dovresti fare se vuoi offrire ai tuoi consumatori un'esperienza di acquisto più soddisfacente.
Cerca il widget ShopReady Meta e posizionalo appena sotto il pulsante “aggiungi al carrello” nella pagina dedicata al tuo prodotto. Ciò consentirà di visualizzare le informazioni in questione.
Quando selezioni il titolo del prodotto appropriato dal menu a discesa situato nell'opzione Prodotto demo della scheda Contenuto, i tag e i metadati del prodotto dovrebbero essere mostrati in modo accurato.
Aggiunta di pulsanti di condivisione sui social media alla pagina del prodotto
Utilizzando un semplice blocco del pulsante di condivisione dei social media, puoi consentire ai tuoi consumatori di condividere i post dei tuoi prodotti sui social media direttamente dalla pagina del prodotto WooCommerce per l'articolo che hanno acquistato. Che puoi produrre utilizzando solo la funzionalità di trascinamento della selezione offerta dal widget Elementor Social Share.
Direttamente dalla scheda Contenuto, il blocco può essere personalizzato con qualsiasi icona di social media, testo e link condivisibili a scelta dell'utente. Inoltre, la scheda Stile Elementor consente agli utenti di modificare la presentazione visiva dei blocchi di condivisione social, se lo desiderano.
E con questo, hai finito con i fondamenti della personalizzazione delle pagine dei prodotti WooCommerce.
Passaggio 4: aggiunta di prodotti correlati a WooCommerce
L'utilizzo del widget Prodotti correlati incluso nei componenti aggiuntivi del prodotto WooCommerce ti consentirà di visualizzare i prodotti correlati sulla pagina del tuo prodotto, che è un'eccellente strategia per aumentare le vendite online. Utilizzando il widget Prodotti correlati di ShopReady, puoi facilmente costruire uno splendido blocco di scorrimento del prodotto diviso in sezioni.
Per utilizzare il widget, è sufficiente trascinarlo e rilasciarlo sotto il blocco del singolo prodotto, quindi selezionare i prodotti specifici che si desidera visualizzare nella pagina del singolo prodotto dalla scheda Contenuto .
Passaggio 5: aggiunta di campi di pagamento personalizzati WooCommerce
Come accennato in precedenza, questo è un aspetto importante di una piattaforma di e-commerce funzionante. Con un costruttore di negozi WooCommerce come ShopReady, puoi facilmente utilizzare uno shortcode del carrello WooCommerce e implementare un carrello eCommerce funzionale in quel modo, oppure puoi utilizzare un widget ShopReady per applicare questa funzione.
Per avere un carrello funzionante, devi prima aggiungere il widget “ Aggiungi al carrello” nella pagina del prodotto. Cosa che abbiamo già fatto. Quindi, torniamo indietro e creiamo la pagina del carrello stessa, dove verranno visualizzati tutti i prodotti una volta aggiunti al carrello.
ShopReady – WooCommerce Shop Builder consente agli utenti di scegliere tra due diversi modelli di carrello, che sono disponibili per l'uso dalla dashboard di ShopReady . Dalla dashboard di ShopReady, fai clic sul menu Modelli ora attiva e modifica un modello di carrello preimpostato WooCommerce fornito da ShopReady.
Creando un nuovo modello di carrello WooCommerce o modificandone uno esistente, verrai reindirizzato alla schermata dell'editor di Elementor.
Da qui, puoi semplicemente aggiungere il widget Carrello ShopReady e la pagina del tuo carrello assumerà automaticamente la sua forma e la creazione di un carrello degli acquisti WordPress senza plug-in è un processo semplice con ShopReady. Non richiede plug-in o strumenti aggiuntivi.
Se hai già aggiunto dei prodotti al carrello, dovrebbe assomigliare a questo.
E il gioco è fatto, una pagina del carrello WooCommerce funzionale con un pulsante del carrello funzionale. Hai anche la possibilità di personalizzare ulteriormente la pagina del carrello con Elementor. Con Elementor, sei libero di modificare ogni aspetto della pagina del carrello, dai colori di sfondo alle impostazioni tipografiche di Elementor.
Puoi anche utilizzare uno shortcode del carrello WooCommerce. In tal caso, dovrai utilizzare il widget Elementor ShortCode.
Quando hai finito di personalizzare la pagina del tuo negozio, assicurati di premere Pubblica/Aggiorna per rendere le modifiche attive per i tuoi visitatori e clienti.
Conclusione
L'intero processo di creazione di un pulsante di aggiunta al carrello personalizzato di WooCommerce può sembrare un compito arduo, ma man mano che avanzi in questa guida vedrai che il processo di creazione di questa funzione tecnica non è affatto difficile con il giusto set di strumenti. ShopReady WooCommerce Shop Builder è un pacchetto completo che offre tutti gli strumenti necessari per creare una solida piattaforma di eCommerce da zero.
E se riscontri problemi con ShopReady o il processo di creazione del carrello, puoi sempre cercare la documentazione del carrello WooCommerce .
Domande frequenti sui carrelli della spesa WooCommerce
WordPress ha un carrello?
WordPress CMS è una piattaforma di hosting di siti Web barebone. Non include alcun carrello degli acquisti o funzionalità relative all'eCommerce. Ma poiché si tratta di una piattaforma open source, sei libero di utilizzare uno qualsiasi dei suoi strumenti, plug-in o moduli di eCommerce creati dalla community per aggiungere un carrello al sito Web di WordPress.
WooCommerce ha un carrello?
Sì, il plug-in di base WooCommerce viene fornito con un pulsante del carrello funzionale e una pagina del carrello. Ma è di natura molto minimalista. Per ravvivare la pagina del carrello, puoi utilizzare un numero qualsiasi di estensioni WooCommerce oppure puoi sfruttare appieno le opzioni di personalizzazione del generatore di pagine WooCommerce di Elementor e ShopReady WooCommerce per le pagine del carrello eCommerce. Dalle icone del carrello WooCommerce ai layout di pagina approfonditi, tutto può essere personalizzato con ShopReady.
Come posso creare una pagina di pagamento personalizzata in WooCommerce?
Scarica e installa ShopReady – WooCommerce Shop Builder. Ora crea un nuovo modello di pagina di pagamento WooCommerce dalla dashboard di ShopReady. Verrai reindirizzato all'Editor Elementor, da qui puoi utilizzare il widget ShopReady Checkout per creare una pagina di pagamento personalizzata funzionale in WooCommerce.