Come personalizzare la pagina del carrello di WooCommerce senza codifica (gratuito)

La personalizzazione della pagina del carrello di WooCommerce offre numerosi vantaggi, incluso l'abbandono della pagina del carrello, ma farlo senza problemi non è un gioco da ragazzi.

La pagina del carrello porta a prendere la decisione finale se effettuare il check-out o abbandonare il carrello. Non vorrai che gli acquirenti abbandonino il carrello, giusto? È qui che devi personalizzare la pagina del carrello di WooCommerce. 

In questo blog troverai una guida passo passo su come personalizzare anche le pagine del carrello di WooCommerce senza alcuna codifica.

Iniziamo…

Come appare una pagina del carrello WooCommerce predefinita

WooCommerce fornisce un layout molto semplice di una pagina del carrello. Sebbene temi diversi aggiungano stili diversi alla pagina, sembra comunque la stessa.

Ecco gli elementi comuni del design della pagina del carrello di WooCommerce (inclusi ma non limitati a):

Puoi modificare la pagina del carrello di WooCommerce e personalizzare gli elementi secondo le tue esigenze. Prima di ciò, diamo un'occhiata a come appare la pagina del carrello WooCommerce predefinita su diversi temi.

Ecco come appare il design della pagina del carrello di WooCommerce sul Tema WordPress venti venti:

Ecco come appare la pagina del carrello sul Tema Twenty Twenty One di WordPress:

Anche un tema popolare di Elementor come Ciao Elementor ti darà un design della pagina del carrello WooCommerce dall'aspetto molto semplice con lo stesso vecchio layout.

Penso che sarai d'accordo sul fatto che tutte le pagine del carrello sopra hanno lo stesso layout e non offrono nulla di stravagante o straordinario

➡️➡️ Controlla Come aggiungere il cambio valuta al sito WooCommerce in 5 passaggi

Perché personalizzare la pagina del carrello di WooCommerce

Secondo il rapporto di BuiltWith di novembre 2023, oltre 6,6 milioni di siti Web live utilizzano WoCommerce.

WooCommerce ti consente di creare in pochissimo tempo un sito Web di eCommerce completamente funzionale e pronto all'uso con i suoi modelli, inclusa una pagina del carrello. Molti di questi siti Web utilizzano i modelli predefiniti di WooCommerce per il carrello e altre pagine.

Ma non vorresti che la pagina del carrello del tuo sito web fosse simile alle altre perché è probabile che disattivi i tuoi acquirenti. Per distinguersi dalla massa, le modifiche alla pagina del carrello WooCommerce o la personalizzazione del carrello WooCommerce possono venire in soccorso.

È anche un dato di fatto che in giro  70% di persone abbandonano nel carrello e non procedere mai al pagamento. Questo dimostra quanto sia importante personalizzare la pagina del carrello di WooCommerce.

Ed è risaputo che le persone sono attratte da cose diverse e si distinguono dalla massa.

Quindi, non lasciare che la pagina del tuo carrello si perda tra la folla, piuttosto personalizzala in modo che si distingua e ti aiuti a ricevere più ordini. 

Ora la domanda è: come puoi ottenere una pagina del carrello che si distingua? Bene, ci sono due modi per creare il design di una pagina del carrello Woocommerce.

1. 1. Modificare i file WooCommerce (richiede che tu sappia programmare)
2. 2. Utilizza un plugin drag-and-drop

Puoi anche controllare il nostro blog 👉 Come aggiungere il cambio valuta a WooCommerce

Perché modificare il codice per ottenere una pagina carrello WooCommerce personalizzata non è una buona idea

Sebbene la modifica del codice per ottenere la pagina del carrello desiderata sia un'opzione, non è consigliata ai non programmatori. Dato che hai scelto una piattaforma pronta all'uso come WooCommerce per creare il tuo sito web, immagino che tu non stia cercando di codificare manualmente nulla.

Ecco alcuni dei motivi per cui i programmatori principianti o i non programmatori dovrebbero evitare di modificare il codice predefinito per scopi di progettazione della pagina del carrello di WooCommerce.

• Richiede che tu sia un programmatore esperto e conosca HTML, CSS, Javascript e PHP come un professionista.
• Se il codice non viene modificato e ottimizzato in modo efficiente, potrebbe rallentare il tuo sito web.
• Dovrai cambiare il codice ogni volta che desideri cambiare il tuo tema WooCommerce
• Quando WooCommerce presenta un nuovo aggiornamento, ti verrà richiesto di apportare nuove modifiche per rendere il codice compatibile con una nuova versione di WooCommerce
• Puoi anche perdere tutto il tuo codice quando WooCommerce si aggiorna se non crei un tema figlio.

Inoltre, se utilizzi piattaforme come WordPress e WooCommerce per evitare di programmare in primo luogo, quindi perché imparare a programmare solo per modificare una pagina del carrello, giusto?

Nessun problema. Ho un altro processo che puoi utilizzare per personalizzare la pagina del carrello senza problemi senza dover scrivere codice. Nemmeno una riga. Promettere!

Vediamo come modificare la pagina del carrello di WooCommerce senza conoscenze di programmazione!

Come personalizzare la pagina del carrello di WooCommerce utilizzando un plugin drag and drop

Ora puoi progettare una pagina del carrello con la semplice tecnologia drag-and-drop. Grazie al plugin WooCommerce PageBuilder ShopEngine.

ShopEngine è il massimo WooCommerce costruttore con modelli predefinitie widget per creare pagine personalizzate su WooCommerce e moduli con utili funzionalità di eCommerce. Con questo plugin, ottieni il controllo completo sul design delle tue pagine WooCommerce, inclusa la pagina del Carrello.

Mentre ShopEngine ti offre un file premade Modello di carrello, puoi creare la pagina del tuo carrello da zero e personalizzare il carrello WooCommerce. In questo blog ti guiderò attraverso il processo di modifica di una pagina del carrello WooCommerce per crearne una nuova da zero.

Hai bisogno di altri motivi per convincerti a utilizzare ShopEngine? Leggi il nostro blog su 11 motivi per scegliere ShopEngine

Passaggio #1: installa Elementor e ShopEngine

Per iniziare il processo di personalizzazione della pagina del carrello in WooCommerce, avrai bisogno di due plugin

1. Elementor
2. ShopEngine 

Poiché ShopEngine è un generatore di pagine WooCommerce per Elementor e richiede Elementor, assicurati di installare Elementor Primo. 

Passaggio #2: crea un modello di pagina del carrello

Dopo aver installato entrambi i plugin, crea un modello di carrello. Per creare un modello di pagina del carrello:

• Vai a: Cruscotto => ShopEngine => Modello di costruttori
• Clic SU Aggiungere nuova per aprire la finestra Impostazioni modello
• Dai un Nome modello della tua preferenza
• Scegliere Digita come Carrello dal menu a discesa
• Accendere l'opzione Imposta predefinito per sovrascrivere qualsiasi pagina del carrello esistente
• Scegli l'opzione vuota sotto Progettazione del campione 
• Clicca su Salvare le modifiche aggiornare

Nota: Prendere un Modello di carrello pronto all'uso, scegli l'opzione "Progetto di esempio 1" durante la creazione del modello. Puoi anche modificare ogni elemento di quel modello predefinito. Ho scelto vuoto perché ne creerò uno da zero

Passaggio #3: scegli un layout/struttura

Ora è il momento di scegliere un layout. Per iniziare 

• Vai a ShopEngine => Modulo costruttori
• Passa il mouse sul modello di carrello dall'elenco
• Clicca su Modifica con Elementor

• Una volta aperto l'editor di Elementor Clic nella sezione Aggiungi nuova (+) icona 
• Ora scegli il struttura/disposizione ti piace

Passaggio #4: progettare la pagina del carrello utilizzando i widget ShopEngine

ShopEngine fornisce cinque widget esclusivamente per progettare un WooCommerce Modello di carrello. Insieme ai widget Modello carrello, puoi anche utilizzare il Modulo coupon widget e cinque+ widget generali per creare la pagina del tuo carrello.

Per questo blog utilizzerò i seguenti widget:

• Tavolo del carrello: Il widget del carrello mostra tutti i prodotti nel carrello in un formato tabella con prezzo, quantità e totale parziale. I clienti possono aggiornare la quantità del prodotto e anche svuotare il carrello con un clic.
• Totale carrello: Questo widget mostra tutti i metodi di spedizione disponibili e il totale dell'ordine.
• Ritorna al negozio: Questo widget fornisce un pulsante con un collegamento che ti riporta alla pagina del negozio.
• Modulo coupon di pagamento: I clienti possono utilizzare il loro buono sconto utilizzando questo widget.
• Prodotto affare: Questo widget ti consente di mostrare i tuoi prodotti in vendita anche nella pagina del carrello con un timer per il conto alla rovescia che mostra il periodo di pianificazione delle vendite. Questo è un widget generale di ShopEngine.
• Vendita incrociata: Il cross-sell mostra tutti i prodotti cross-sell in modo attraente nella pagina del carrello.

Per prima cosa, devi attiva i widget che desideri utilizzare nella pagina del carrello. Per accendere  

• Vai a Pannello di amministrazione => ShopEngine => Widget. 
• Scorri e cerca il widget che desideri utilizzare
• Abilitare i widget che desideri utilizzare
• Clicca su Salvare le modifiche in cima alla pagina

Ora è il momento di trascinare e rilasciare i widget nel tuo layout. Torna alla modalità editor della pagina Carrello:

• Ricerca per il widget
• Trascinare e rilasciare i widget (uno per uno)

Nota: Puoi nascondere il pulsante Continua gli acquisti e il pulsante Nascondi tutto.

Poiché ShopEngine è totalmente compatibile con Elementor, puoi utilizzare più layout sulla stessa pagina. Per la parte successiva, utilizziamo un layout diverso. Per fare ciò, aggiungerò una nuova sezione con una struttura diversa e trascinerò e rilascia Cross-sell e Widget di prodotti per offerte.

Nota: Devi aggiungere prodotti di cross-sell E impostare i prodotti in vendita con pianificazioni dalla dashboard di amministrazione nelle impostazioni del prodotto per i prodotti Cross-sell e Deal da visualizzare sul front-end.

Entrambi i prodotti Cross-Sell e Deal ti offrono risultati diversi impostazioni che è possibile personalizzare. Quindi, dopo aver trascinato e rilasciato il widget, personalizza le impostazioni in base alle tue preferenze.

Con il widget di cross-sell, ottieni opzioni come attivare/disattivare Abilita dispositivo di scorrimento, mostrare/nascondere la vendita flash, il prezzo scontato, il pulsante del carrello e il numero di prodotti da mostrare nelle impostazioni del contenuto. Per gli slider, ottieni opzioni come Diapositive per vista, Loop e Riproduzione automatica. Velocità diapositiva ecc. Inoltre, ottieni anche l'opzione Ordina per e Ordina nella scheda Avanzate.

I prodotti Deal ti forniscono le impostazioni del contenuto come Ordine, Ordina per, Data, Mostra prodotto, Colonna, Spazio tra colonne e Spazio tra righe. Ottieni anche altre impostazioni che includono Abilita vendita, Badge, Badge di vendita, Vendita, Limite parola titolo, Badge percentuale, Conto alla rovescia e Giorni.

Passaggio #5: personalizza i parametri di stile della pagina del carrello Woocommerce

Non solo struttura, con ShopEngine hai il controllo completo anche sullo stile della pagina del tuo carrello.

Per modificare i parametri di stile dei widget ShopEngine, passa con il mouse sul widget che desideri modificare per trovare un'opzione Modifica nell'angolo in alto a destra. Fai clic su questa opzione per trovare tutte le impostazioni del carrello Woocommerce per contenuti e stili sul pannello Elementor posizionato sul lato sinistro.

Diamo un'occhiata alle impostazioni di stile che puoi personalizzare per ciascuno dei widget utilizzati in questo blog:

Tabella del carrello: 

Puoi modificare le impostazioni di stile dell'intestazione della tabella, del corpo della tabella, dell'immagine del prodotto e della quantità. Piè di pagina e carattere globale. Per maggiori dettagli, puoi consultare il nostro documentazione sul tavolo Carrello.

Ritorna al negozio:

Puoi modificare l'allineamento dei pulsanti, la tipografia, il colore del bordo, il raggio del bordo e l'ombra della casella. Per maggiori dettagli, puoi consultare il nostro documentazione sul widget Ritorno al negozio

Modulo coupon:

Per il modulo coupon, otterrai un'impostazione di stile per informazioni, descrizione, modulo coupon, pulsante Applica e carattere globale. Puoi controllare le opzioni di stile in dettaglio sul nostro documentazione sul modulo Coupon.

Totale carrello:

Per il widget Totale carrello hai molte opzioni di stile per modificare lo stile della tabella, dell'input, del pulsante di aggiornamento del checkout e del carattere globale. Per impostazioni più dettagliate sullo stile del carrello WooCommerce puoi consultare il nostro documentazione sul totale del Carrello.

Vendita incrociata: 

Per il widget Cross-sell, ottieni varie opzioni di stile che includono stili per articoli, vendite flash, immagine, corsa al titolo, prezzo, Aggiungi al carrello, stile cursore e carattere globale. Per maggiori dettagli su Croce, stile Saldi controlla la documentazione

Prodotti in offerta:

Ottieni diverse opzioni di stile per Wrapper prodotto, Immagine prodotto, Badge prodotto, Orologio per il conto alla rovescia, Stile contenuto, Barra di stock e di avanzamento e Carattere globale. Per conoscere maggiori dettagli sulle opzioni di stile consulta la nostra documentazione sul widget Deal Product.

Passaggio #6: aggiorna e visualizza in anteprima la pagina del carrello WooCommerce personalizzata

Dopo aver modificato gli stili, fai clic su Aggiornamento per salvare le modifiche e fare clic su Anteprima per vedere i cambiamenti.

Se hai seguito il layout e le impostazioni menzionati in questo blog, dovresti progettare una pagina del carrello personalizzata in WooCommerce utilizzando ShopEngine come quella qui sotto:

Bonus: suggerimenti per incrementare le vendite del tuo negozio eCommerce utilizzando i moduli ShopEngine

Ora sai come creare e personalizzare una pagina del carrello in woocommerce. ShopEngine, oltre al generatore di modelli di pagine del carrello WooCommerce, ti fornisce moduli utili con importanti funzionalità di eCommerce che possono aumentare le vendite del tuo negozio online. I moduli ShopEngine includono:

• Occhiata veloce
• Campioni di variazione
• Lista dei desideri
• Confronto prodotti

Sono sicuro che, essendo proprietario di un negozio WooCommerce, sai quanto siano importanti queste funzionalità per rendere l'esperienza di acquisto online piacevole. Se parliamo del modello di carrello, utilizzando il file Occhiata veloce pulsante e il Lista dei desideri Il pulsante sul cross-sell offrirà ai tuoi clienti un'esperienza di acquisto migliore. E questo aumenta la possibilità che i tuoi clienti acquistino più prodotti.

Con Quick View, i clienti possono facilmente controllare le informazioni complete di qualsiasi prodotto con un solo clic. Allo stesso modo, con un solo clic gli utenti possono aggiungere il prodotto alla loro lista dei desideri utilizzando il pulsante del modulo lista dei desideri per effettuare il checkout in un secondo momento. Entrambe queste funzioni possono svolgere un ruolo significativo nell'aumento delle vendite dei prodotti.

Quindi, non limitarti a personalizzare la pagina del carrello, utilizza i moduli ShopEngine per offrire ai tuoi clienti un'esperienza di acquisto eccezionale e aumentare le vendite del tuo negozio.

Blog bonus:
✅ Come personalizzare la pagina delle categorie WooCommerce senza codifica
✅ Come personalizzare la pagina Il mio account WooCommerce utilizzando ShopEngine 
✅ Come personalizzare la pagina del negozio WooCommerce utilizzando ShopEngine 
✅ Come personalizzare la pagina del prodotto WooCommerce utilizzando ShopEngine
✅ Come personalizzare la pagina di pagamento di WooCommerce utilizzando ShopEngine
✅ 9+ plugin utili e migliori per il carrello degli acquisti per WordPress e WooCommerce

Perché passare a ShopEngine Pro?

Bene, onestamente ShopeEngine ti fornisce funzionalità sufficienti per rendere il tuo negozio online valido. Ma perché dovresti accontentarti una volta per tutte quando puoi ottenere il meglio, giusto?

ShopEngine Pro ti offre una vasta gamma di funzionalità che renderanno lo shopping online sul tuo negozio di e-commerce la migliore esperienza di acquisto per i tuoi clienti. Oltre a personalizzare le pagine del carrello di woocommerce, puoi accedere Oltre 20 moduli che include Conto alla rovescia per le vendite flash, distintivi, Notifica di vendita, Checkout rapido, Pagamento parietale, Cambio valuta, e molti altri.

Non solo la soddisfazione del cliente, le funzionalità di ShopEngine sono progettate per rendere estremamente semplice anche la gestione del negozio online con moduli come Ordine prestabilito, Ordine arretrato, Campo di pagamento aggiuntivo, e molti altri.

Non dimenticare 16+ già pronti modelli con controllo completo della personalizzazione di WooCommerce e Oltre 70 widget avanzati per creare ogni modello WooCommerce da zero, se lo desideri.

Quando si tratta della pagina del carrello, ShopEngine ti consente di creare una pagina del carrello personalizzata WooCommerce anche per il tuo negozio online.

Un plugin con così tante funzionalità, modelli predefiniti e moduli che sicuramente proverai a un prezzo molto ragionevole, giusto?

Ottieni oggi la tua versione di ShopEngine e non preoccuparti più di come personalizzare WooCommerce!

Parole finali

Congratulazioni! Hai ridisegnato con successo la tua pagina del carrello personalizzata WooCommerce. Non è stato facile? 

Bene, questo è ciò che fa ShopEngine, ora sai come personalizzare una pagina del carrello WooCommerce senza codifica.

Quindi, non limitarti a limitare il tuo negozio online agli stili predefiniti, ridisegna l'intero sito Web WooCommerce e utilizza i moduli per rendere il tuo business online più efficace che mai. 

Quindi, quale pagina WooCommerce personalizzerai dopo? Non dimenticare di condividere la tua esperienza nell'utilizzo di ShopEngine.