Oggi parliamo di moduli WooCommerce Carrello e Checkout per Divi 5 e del motivo per cui, se hai un e-commerce (anche piccolo) o vendi servizi/prodotti digitali, questa cosa ti può far risparmiare tempo e soprattutto farti perdere meno ordini per strada.

Perché diciamolo: carrello e checkout sono i due punti in cui l’utente decide davvero se compra oppure no. Se la pagina è confusa, “anonima”, piena di blocchi messi lì a caso o non coerente col tuo brand, anche un cliente convinto può bloccarsi.

Questi moduli sono utilissimi se sei un freelance e vuoi migliorare le conversioni senza metterti a scrivere codice, se hai un e-commerce di nicchia e vuoi valorizzare spedizioni e prodotti consigliati, o se sei in un’agenzia/PMI e ti serve un checkout ordinato e replicabile su più progetti. E sì: io per primo ci ho sbattuto la testa prima di ottenere un carrello/checkout “come dico io”.

Moduli WooCommerce Carrello e Checkout

Se stai già usando Divi 5 con WooCommerce, magari ti sei accorto che per un po’ carrello e checkout erano disponibili in modalità di compatibilità (cioè: funzionavano, ma non erano pensati “nativamente” per Divi 5).

Con questo aggiornamento arrivano le versioni native dei moduli Carrello e Checkout. Tradotto in pratico: lavori in modo più pulito e lineare dentro Divi 5, con meno “stranezze” e più coerenza con il resto del builder.

In più, trovi l’intera suite di moduli WooCommerce direttamente dentro la cartella dei moduli WooCommerce. Quindi: niente caccia al tesoro, sono lì, ordinati.

Quello che cambia davvero è che puoi costruire un’esperienza di acquisto su misura in due modi:

• Modificando direttamente le pagine di carrello e checkout (quindi entri nella pagina e le sistemi lì).
• Usando il Theme Builder (che, in pratica, è un sistema per creare template, cioè modelli di pagina, e assegnarli a pagine/aree specifiche del sito senza scrivere codice). È comodissimo quando vuoi standardizzare layout e stile.

La logica è molto “a mattoncini”: ogni componente del carrello e del checkout diventa un modulo. Tu li trascini, li ordini, li affianchi in colonne, li metti in una sezione dedicata… e ti costruisci il layout che vuoi.

Inoltre, quando abiliti Divi su una pagina di carrello o checkout, Divi trasforma automaticamente i template standard di WooCommerce in una raccolta di moduli Divi. Risultato: entri e inizi subito a personalizzare, senza ricostruire tutto da zero.

Vantaggio pratico (quello che ti interessa davvero): puoi creare un carrello e un checkout davvero “tuoi”, con controllo sul design e sulla struttura di ogni sezione. Non solo “bello”, ma soprattutto più chiaro e più orientato a far completare l’ordine.

Moduli WooCommerce per il Carrello

I moduli Carrello WooCommerce ti permettono di personalizzare la pagina del carrello. Sono disponibili questi moduli:

• Prodotti nel carrello WooCommerce – Mostra l’elenco dei prodotti che l’utente ha aggiunto al carrello. Qui giochi tanto su spaziature, leggibilità, gerarchie (nome prodotto, quantità, prezzo, rimozione).
• Totali carrello WooCommerce – Mostra subtotale, spedizione e prezzi dei prodotti nel carrello. È uno dei punti più delicati: se non è chiaro “quanto sto pagando”, la gente esce.
• Prodotti correlati e consigliati (cross-sell) WooCommerce – Mostra i prodotti consigliati direttamente nel carrello. “Cross-sell” significa proprio questo: proporre un prodotto complementare (tipo accessori, ricariche, estensioni) prima che l’utente vada al pagamento.

Moduli WooCommerce per il Checkout

I moduli Checkout WooCommerce ti permettono di personalizzare la pagina di checkout. Sono disponibili questi moduli:

• Fatturazione checkout WooCommerce – Mostra il modulo con i dati di fatturazione. È la sezione dove l’utente inserisce i dati “amministrativi” (nome, indirizzo, email, ecc.).
• Spedizione checkout WooCommerce – Mostra il modulo con i dati di spedizione. Se vendi fisico è fondamentale; se vendi digitale/servizi spesso può diventare secondario (o non serve proprio).
• Informazioni aggiuntive checkout WooCommerce – Mostra il campo/modulo delle informazioni aggiuntive (note ordine, richieste particolari, dettagli extra).
• Dettagli ordine checkout WooCommerce – Mostra i dettagli dell’ordine, inclusi prodotti acquistati e relativi prezzi. È il “riepilogo finale”: deve essere super leggibile.
• Pagamento checkout WooCommerce – Mostra la scelta del metodo di pagamento e i dettagli del modulo di pagamento. Qui l’obiettivo è ridurre ansia e dubbi, non “far scena”.

Esempi pratici (senza codice) per usare i moduli Carrello e Checkout

Qui sotto trovi tre casi d’uso concreti. L’obiettivo non è “fare bello”, ma ridurre attriti e aumentare la probabilità che l’utente concluda l’acquisto.

1) Freelance: checkout più semplice per vendere un servizio o un prodotto digitale

Obiettivo: meno distrazioni, meno campi inutili, più chiarezza.

• Apri la pagina di checkout e abilita Divi.
• Inserisci (o mantieni) i moduli: Fatturazione checkout WooCommerce, Dettagli ordine checkout WooCommerce, Pagamento checkout WooCommerce.
• Metti Dettagli ordine in una colonna laterale e dagli più evidenza visiva:
  • titolo più chiaro (es. “Riepilogo”),
  • separatori tra le righe,
  • sfondo leggero per staccarlo dal resto.
  Scopo: far capire al volo “cosa sto comprando” e “quanto pago”.
• Se vendi digitale o servizi senza consegna, evita di dare troppo spazio alla parte di spedizione (quando non serve) e concentra l’attenzione su riepilogo e pagamento.

Esempio reale: un freelance che vende una consulenza da 90 minuti o un template digitale spesso perde conversioni perché il checkout sembra pensato per spedire un pacco. Con questi moduli, rendi il flusso più “snello” e coerente con ciò che stai vendendo.

2) Piccolo e-commerce: carrello con prodotti consigliati per aumentare il valore medio

Obiettivo: proporre un accessorio/integrazione prima del checkout, senza essere invasivi.

• Apri la pagina carrello e abilita Divi.
• Componi la pagina con: Prodotti nel carrello WooCommerce + Totali carrello WooCommerce.
• Sotto ai prodotti (o vicino ai totali), aggiungi Prodotti correlati e consigliati (cross-sell) WooCommerce.
• Imposta uno stile visivo “secondario” per i cross-sell:
  • immagini più piccole,
  • un badge tipo “Consigliato”,
  • pulsante meno dominante rispetto a “Procedi al checkout”.
  Così non rubano attenzione al completamento dell’ordine.

Esempio reale: un micro-brand che vende cosmetici può proporre nel carrello un accessorio (spugnetta, travel size) o un prodotto complementare (detergente) senza trasformare il checkout in un mercatino. Se lo fai “pulito”, spesso alzi il valore medio dell’ordine.

3) Agenzia/PMI con molti prodotti: template di checkout coerente per tutto il sito

Obiettivo: standardizzare l’esperienza e ridurre interventi manuali pagina per pagina.

• Vai nel Theme Builder (template globali: assegni un layout a specifiche pagine senza doverle modificare una a una).
• Crea un template dedicato al checkout e assegnalo alla pagina di checkout.
• Dentro il template, costruisci un layout chiaro a due colonne:
  • dati (fatturazione/spedizione) a sinistra,
  • riepilogo ordine + pagamento a destra.
• Salva e testa l’esperienza su mobile: spesso è qui che si perde conversione. L’obiettivo è mantenere i passaggi leggibili e i pulsanti ben visibili.

Esempio reale: un’agenzia che gestisce più shop per clienti diversi, o una PMI con molte categorie/prodotti, ha bisogno di un checkout “standard” e solido. Un template nel Theme Builder evita interventi ripetuti e ti fa lavorare meglio quando devi fare aggiornamenti o ottimizzazioni.

Una nota utile: CSS Grid in Divi 5

Se stai lavorando su layout complessi, può tornarti utile anche CSS Grid in Divi 5. CSS Grid (in pratica un sistema di impaginazione che ti aiuta a creare righe e colonne più “rigide” e precise rispetto alle classiche colonne, mantenendo tutto ordinato senza dover scrivere codice) è comodo per organizzare sezioni dense di informazioni.

Per esempio:

• un riepilogo ordine molto dettagliato (con totali, tasse, sconti, spedizione ben separati),
• un layout a blocchi perfettamente allineati (es. garanzie, metodi di pagamento, rassicurazioni tipo reso/spedizione),
• pagine dove vuoi una struttura molto “pulita” e ripetibile.

Nel video qui sotto trovi tutti i dettagli.

Conclusione

Con i moduli WooCommerce Carrello e Checkout per Divi 5 puoi costruire pagine di acquisto più chiare, coerenti col brand e pensate per convertire, componendo ogni parte come modulo e creando anche template con il Theme Builder.

Il mio consiglio è semplice: parti da piccoli miglioramenti (ordine dei blocchi, evidenza dei totali, cross-sell ragionati) e testa subito su mobile. Se ti incastri su struttura, template o strategia di conversione, ha perfettamente senso farti affiancare da uno sviluppatore Divi di fiducia per evitare tentativi infiniti a vuoto.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes.