Come creare un modello di pagina del carrello WooCommerce con Divi

Pubblicato: 2021-12-15

La pagina del carrello WooCommerce è essenziale per qualsiasi sito Divi che utilizza WooCommerce (WC) per un negozio online. Ma molte volte la pagina del carrello tende a soffrire quando si tratta di progettazione perché la progettazione della pagina di solito comporta la personalizzazione del modello di pagina del carrello esternamente e quindi lo stile del modello di pagina esclusivamente con CSS esterni. Ma con i nuovi moduli Woo di Divi, questo processo è diventato facile e divertente!

In questo tutorial, ti mostreremo come creare un modello di pagina carrello WC per il tuo sito completamente da zero utilizzando Divi Theme Builder. Ti mostreremo come impostare rapidamente un nuovo modello per la pagina del carrello e progettare il modello utilizzando gli appropriati moduli woofer dinamici disponibili in Divi Builder.

Iniziamo!

Sbirciata

Il prima e il dopo

Ecco una rapida occhiata alla pagina del carrello predefinita di Divi rispetto alla nuova pagina del carrello che progetteremo in questo tutorial.

Modello di pagina del carrello Divi WooCommerce

Ed ecco uno sguardo più da vicino al modello di pagina del carrello.

Modello di pagina del carrello Divi WooCommerce

Modello di pagina del carrello Divi WooCommerce

Scarica il modello di pagina del carrello GRATUITAMENTE

Questo modello di pagina del carrello è disponibile per il download come uno dei nostri set di modelli di pagina carrello e carrello GRATUITI. Quindi sentiti libero di scaricarlo dal post con quei set di modelli di carrello e pagamento.

Per mettere le mani sul design del modello di pagina del carrello da questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non verrai "iscritto nuovamente" né riceverai email extra.

Scarica i file
Scarica gratis

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo pacchetto di layout pagina di destinazione Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi Divi incredibili e gratuiti. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo email qui sotto e clicca su download per accedere al layout pack.

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout del modello nel tuo sito Web, dovrai accedere a Divi Theme Builder e utilizzare l'opzione di portabilità per importare il file .json nel generatore di temi.

Modello di pagina del carrello Divi WooCommerce

Una volta terminato, il modello del carrello sarà disponibile nel Generatore di temi. Per modificare il modello, fare clic sull'icona di modifica nell'area del corpo del modello.

Modello di pagina del carrello Divi WooCommerce

Veniamo al tutorial, vero?

Informazioni sulla pagina del carrello WooCommerce e Divi

Ogni volta che installi WooCommerce sul tuo sito Divi, WooCommerce (WC) genererà pagine WC chiave tra cui una pagina del negozio, una pagina del carrello, una pagina di pagamento e una pagina dell'account. Il contenuto della pagina viene distribuito tramite l'uso di uno shortcode nell'editor di blocchi back-end di WordPress.

Modello di pagina del carrello Divi WooCommerce

Se attivi Divi Builder su questa pagina del carrello, ciascuno degli elementi di contenuto della pagina del carrello WooCommerce verrà caricato come moduli Divi Woo che possono essere utilizzati per lo stile della pagina.

Moduli Woo per la progettazione di una pagina del carrello in Divi

Divi viene fornito con una varietà di moduli che sono fondamentali per aggiungere contenuto dinamico a un modello di pagina. Alcuni di questi includono moduli Woo specifici per la pagina del carrello.

Modello di pagina del carrello Divi WooCommerce

I moduli che sono fondamentali per creare la pagina del carrello o il modello includono:

  • Titolo del post: visualizzerà il titolo della pagina del carrello in modo dinamico durante la creazione di un modello di pagina del carrello.
  • Avviso Woo – Questo modulo può essere impostato su diversi tipi di pagina (pagina del carrello, pagina del prodotto, pagina di pagamento). Mostrerà le notifiche importanti all'utente in modo dinamico secondo necessità.
  • Prodotti Woo Cart – Questo modulo mostra l'elenco dei prodotti che un utente ha attualmente nel carrello.
  • Totali carrello Woo – Questo modulo mostra il totale parziale, la spedizione e il prezzo totale correnti per i prodotti nel carrello di un utente.

Altri moduli opzionali includono:

  • Woo Breadcrumbs – Questo visualizzerà la barra di navigazione WooCommerce Breadcrumb.
  • Woo Cross Sells – Questo visualizzerà tutti i prodotti di vendita incrociata collegati agli articoli nel carrello in modo dinamico.

Progetta una pagina o un modello del carrello

Come accennato, possiamo facilmente utilizzare i moduli Divi Woo per progettare una pagina del carrello WooCommerce personalizzata se non vedi la necessità di creare un modello personalizzato per la pagina del carrello. Per questo tutorial, creeremo un modello di pagina del carrello utilizzando Divi Theme Builder.

Progettazione di un modello di pagina carrello WooCommerce con Divi

Per questo modello di pagina carrello WooCommerce, l'obiettivo è creare un'area del corpo personalizzata per un modello che viene assegnato alla pagina carrello WooCommerce in Divi. Non creeremo un'area di intestazione o piè di pagina personalizzata per questo modello, ma puoi facilmente utilizzare questo modello sul tuo sito Web con la tua intestazione e piè di pagina.

Creazione di un modello personalizzato per la pagina del carrello

Per iniziare, procediamo come segue:

  1. Vai alla dashboard di WordPress e vai a Divi > Theme Builder.
  2. Quindi fare clic sull'icona Aggiungi nuovo modello più all'interno dell'area vuota della casella grigia per aggiungere un nuovo modello.
  3. Nella modale Impostazioni modello, nella scheda "Usa su", seleziona Carrello nell'elenco Pagine WooCommerce.
  4. Infine, fai clic su Crea modello.

Modello di pagina del carrello Divi WooCommerce

Una volta creato il nuovo modello di carrello, fai clic sull'area "Aggiungi corpo personalizzato" del modello. All'interno dell'elenco a comparsa, seleziona Crea corpo personalizzato .

Modello di pagina del carrello Divi WooCommerce

Creazione della struttura di righe e colonne di sezione

Nell'editor di layout del modello, inserisci una nuova sezione speciale con una struttura di colonna un quarto, metà e metà, con due barre laterali.

Modello di pagina del carrello Divi WooCommerce

Quindi, aggiungi una riga di una colonna al centro della sezione.

Modello di pagina del carrello Divi WooCommerce

Sfondo della sezione

Apri le impostazioni della sezione e aggiungi un colore di sfondo come segue:

  • Colore di sfondo: #f7f3f0

Modello di pagina del carrello Divi WooCommerce

Dimensionamento della sezione

Nella scheda progettazione, aggiorna quanto segue:

  • Larghezza grondaia: 2
  • Larghezza interna: 100%
  • Larghezza massima interna: nessuna
  • Altezza minima: 100vh

Modello di pagina del carrello Divi WooCommerce

Spaziatura delle sezioni

Quindi aggiungi un po' di spaziatura alla sezione e alle colonne come segue:

  • Padding: 0px in alto, 40px a sinistra, 40px a destra
  • Imbottitura colonna 1: 90px in alto
  • Imbottitura colonna 3: 84px

Modello di pagina del carrello Divi WooCommerce

Creazione dei collegamenti di navigazione personalizzati

Per questo layout, creeremo alcuni collegamenti di navigazione personalizzati alle pagine chiave che compongono un negozio: il negozio, il carrello e la cassa. Ciò consentirà agli utenti di navigare più facilmente nel processo di acquisto.

Nella colonna di sinistra, aggiungi un nuovo modulo blurb. Questo verrà utilizzato come collegamento alla pagina del negozio sul tuo sito web.

Modello di pagina del carrello Divi WooCommerce

Nella modale Impostazioni Blurb, aggiorna il contenuto come segue:

  • Titolo: Negozio
  • Corpo: lasciare vuoto
  • Usa icona: SÌ
  • Icona: vedi screenshot

Modello di pagina del carrello Divi WooCommerce

Invece di aggiungere un URL di collegamento statico, possiamo aggiungere un collegamento dinamico alla pagina del Negozio. Ecco come farlo.

  1. Passa il mouse sopra la casella di immissione dell'URL del collegamento del modulo e fai clic sull'icona "usa contenuto dinamico".
  2. Nell'elenco a discesa, seleziona Collegamento alla pagina dall'elenco.
  3. Nella modalità Collegamento alla pagina, seleziona la pagina Negozio dall'elenco a discesa.
  4. Quindi salva le modifiche.

Modello di pagina del carrello Divi WooCommerce

Nella scheda Design, aggiorna lo stile dell'icona come segue:

  • Colore icona: rgba(55,61,75,0.3)
  • Posizionamento immagine/icona: a sinistra
  • Larghezza immagine/icona: 16px

Modello di pagina del carrello Divi WooCommerce

Quindi, aggiorna il testo del titolo:

  • Carattere del titolo: Roboto
  • Peso del carattere del titolo: medio
  • Colore testo titolo: rgba(55,61,75,0.3)

Modello di pagina del carrello Divi WooCommerce

Per un tocco finale, aggiorna le dimensioni e la spaziatura come segue:

  • Larghezza del contenuto: 100%
  • Margine: 10px in basso
  • Animazione immagine/icona: nessuna animazione

Ciò assicurerà che il blurb (o il collegamento di navigazione) si estenda per l'intera larghezza del browser su tablet e telefono, oltre a creare uno spazio tra i prossimi blurb che aggiungeremo.

Modello di pagina del carrello Divi WooCommerce

Per creare i nostri prossimi due collegamenti, duplica il modulo blurb esistente che abbiamo appena progettato due volte in modo che ci siano un totale di tre collegamenti.

Modello di pagina del carrello Divi WooCommerce

Il secondo link sarà il Cart Link che è la pagina che stiamo creando. Per farlo risaltare, apri le impostazioni per il secondo blurb e aggiorna l'icona e il colore del testo:

  • Colore icona: #373d4b
  • Colore del testo del titolo: #373d4b

Modello di pagina del carrello Divi WooCommerce

Ora tutto ciò che resta da fare è aggiornare il testo del titolo e gli URL di collegamento del modulo in modo che ciascuno disponga dei rispettivi URL di collegamento di pagina dinamici.

Personalizzazione delle impostazioni di riga

Nella parte centrale della pagina, aggiungeremo il modulo di avviso woo e i prodotti woo cart. Ma prima di aggiungerli, dobbiamo ottimizzare le impostazioni delle righe.

Imbottitura di fila

Apri le impostazioni della riga e aggiorna quanto segue:

  • Padding (desktop): 72px in alto, 6% a sinistra, 6% a destra
  • Padding: (tablet e telefono): 0px in alto, 0px a sinistra, 0px a destra

Modello di pagina del carrello Divi WooCommerce

Bordo di fila

  • Larghezza bordo: 1px
  • Colore bordo: rgba(55,61,75,0.14)
  • Larghezza bordo superiore: 0px
  • Larghezza bordo inferiore: 0px

Modello di pagina del carrello Divi WooCommerce

Progettazione del modulo di avviso Woo dinamico per la pagina del carrello

È sempre una buona idea aggiungere il modulo Woo Notice nella parte superiore della pagina in modo che gli avvisi siano più visibili agli utenti quando interagiscono con la pagina del carrello. Tieni presente che stiamo progettando avvisi che verranno visualizzati solo quando necessario.

Per aggiungere il modulo Woo Notice, fai clic per aggiungere un nuovo modulo Woo Notice all'interno della riga a una colonna.

Modello di pagina del carrello Divi WooCommerce

Tipo e sfondo della pagina di avviso Woo

Quindi, aggiorna il tipo di pagina e il colore di sfondo dell'avviso Woo come segue:

  • Tipo di pagina: Pagina del carrello
  • Colore di sfondo: rgba(153,158,117,0.1)

IMPORTANTE: assicurati di selezionare la pagina del carrello come tipo di pagina in modo che gli avvisi woo funzionino correttamente.

Modello di pagina del carrello Divi WooCommerce

Testo del titolo dell'avviso di Woo

Nella scheda Design, aggiorna lo stile del testo del titolo come segue:

  • Carattere del titolo: Roboto
  • Peso del carattere del titolo: medio
  • Colore del testo del titolo: #373d4b
  • Dimensione del testo del titolo: 14px
  • Altezza riga del titolo: 1,8 em

Modello di pagina del carrello Divi WooCommerce

Pulsante di avviso Woo

  • Usa stili personalizzati per pulsante: SÌ
  • Dimensione testo pulsante: 14px
  • Colore testo pulsante: #fff
  • Colore sfondo pulsante: #999e75
  • Larghezza bordo pulsante: 0px
  • Raggio bordo pulsante: 0px
  • Spaziatura lettere pulsanti: 1px
  • Carattere pulsante: Roboto
  • Peso del carattere del pulsante: grassetto
  • Stile carattere pulsante: TT
  • Imbottitura dei pulsanti: 0,8 m in alto, 0,8 m in basso, 1 em a sinistra, 1 em a destra

Modello di pagina del carrello Divi WooCommerce

Woo Notice Box Shadow

Per dare alla barra di avviso di woo un design simile a un bordo superiore, aggiorna le opzioni dell'ombra del riquadro come segue:

  • Box Shadow: vedi screenshot
  • Posizione verticale dell'ombra del riquadro: 0px
  • Intensità sfocatura ombra scatola: 0px
  • Box Shadow Spread Forza: 0px
  • Colore ombra: #999e75

Modello di pagina del carrello Divi WooCommerce

Per eliminare il margine predefinito sotto l'avviso woo, vai alla scheda avanzata e aggiungi il seguente CSS personalizzato all'elemento principale:

margin-bottom: 0 !important;

Modello di pagina del carrello Divi WooCommerce

Creazione del titolo della pagina del carrello dinamico

Per creare il titolo della pagina dinamico necessario per la pagina del carrello, aggiungi un modulo del titolo del post sotto il modulo degli avvisi di woo.

Modello di pagina del carrello Divi WooCommerce

Contenuto del titolo del post

Nelle impostazioni del titolo del post, aggiorna gli elementi per mostrare solo il titolo come segue:

  • Mostra titolo: SI
  • Mostra Meta: NO
  • Mostra immagine in evidenza: NO

Modello di pagina del carrello Divi WooCommerce

Testo del titolo del post

Per definire lo stile del testo del titolo del post, aggiorna quanto segue nella scheda Design:

  • Carattere del titolo: DM Serif Display
  • Colore del testo del titolo: #373d4b
  • Dimensione del testo del titolo: 80px (desktop), 60px (tablet), 42px (telefono)
  • Altezza della riga del titolo: 1,2 em

Modello di pagina del carrello Divi WooCommerce

Progettazione dei prodotti Dynamic Woo Cart

Ora che il titolo della nostra pagina è a posto, siamo pronti per aggiungere i prodotti Woo Cart, un altro elemento chiave al modello di pagina del carrello.

Sotto il modulo del titolo del post, aggiungi un modulo Woo Cart Products.

Modello di pagina del carrello Divi WooCommerce

Il modulo dovrebbe mostrare contenuti fittizi a meno che tu non abbia già prodotti nel carrello. Questo aiuterà a visualizzare il processo di progettazione.

Testo e collegamenti del corpo dei prodotti del carrello di Woo

Possiamo scegliere come target i link del titolo del prodotto, il testo del prezzo e il testo del totale parziale personalizzando le opzioni del corpo del testo nelle impostazioni dei prodotti Woo Cart.

Apri le impostazioni dei prodotti Woo Cart in modale e, nella scheda Design, aggiorna quanto segue:

  • Carattere del corpo: Roboto
  • Colore testo link: #373d4b

Nota: il testo del link sceglierà come target i link del titolo del prodotto nella colonna Prodotto.

Modello di pagina del carrello Divi WooCommerce

Woo Cart Products Table, Table Cell e Rimuovi icona

Come probabilmente puoi vedere, i prodotti del carrello sono organizzati all'interno di una struttura a tabella. Possiamo indirizzare lo stile della tabella e delle celle della tabella con le opzioni integrate del modulo.

Per questo esempio, aggiorna quanto segue:

  • Riduci le grondaie e i bordi del tavolo: SÌ
  • Imbottitura delle celle della tabella: 0px

Quindi aggiorna il colore dell'icona di rimozione (la "x") sul lato sinistro di ciascun prodotto come segue:

  • Rimuovi il colore del testo dell'icona: #373d4b

Modello di pagina del carrello Divi WooCommerce

Campi prodotti Woo Cart

Possiamo anche indirizzare i campi dei prodotti del carrello utilizzando le opzioni dei campi integrati del modulo. Questo mirerà a cose come le caselle del campo della quantità e la casella del campo del codice coupon.

Sotto le opzioni dei campi, aggiorna quanto segue:

  • Colore di sfondo del campo: trasparente
  • Imbottitura campo: 10px in alto, 10px in basso
  • Angoli arrotondati del campo: 0px
  • Larghezza bordo campo: 1px
  • Colore bordo campo: rgba(0,0,0,0.16)

Modello di pagina del carrello Divi WooCommerce

Pulsanti dei prodotti Woo Cart

Il modulo Prodotti Woo Cart contiene due pulsanti (il pulsante "Applica coupon" e il pulsante "Aggiorna carrello") che possono essere personalizzati con le opzioni dei pulsanti integrate nel modulo.

Dato che abbiamo già disegnato un pulsante nel modulo Woo Notice, apri le impostazioni del modulo Woo Notice e trova l'opzione pulsante attiva/disattiva. Quindi fare clic con il pulsante destro del mouse sull'interruttore del pulsante o fare clic sull'icona "tre punti" per aprire il menu più impostazioni. Lì, seleziona gli stili dei pulsanti di copia.

Modello di pagina del carrello Divi WooCommerce

Con gli stili dei pulsanti ora copiati, apri le impostazioni del modulo Woo Cart Products e apri il menu Altre impostazioni nel gruppo di opzioni dei pulsanti e seleziona Incolla stili pulsanti. Questo copierà gli stili del pulsante dal modulo di avviso woo a questo.

Modello di pagina del carrello Divi WooCommerce

Una volta che gli stili dei pulsanti sono a posto, cambia il colore di sfondo del pulsante come segue:

  • Colore sfondo pulsante: #373d4b

Modello di pagina del carrello Divi WooCommerce

Il pulsante Disabilita

Il pulsante "Aggiorna carrello" ha uno stato disabilitato ogni volta che non è necessario. Possiamo anche personalizzare lo stile del pulsante disabilitato. Per ora, copia gli stili dei pulsanti correnti e incollali negli stili dei pulsanti disabilitati utilizzando le impostazioni del menu di scelta rapida.

Immagini dei prodotti del carrello Woo

Possiamo anche cambiare lo stile delle immagini dei prodotti in questo modulo. Per ora, modifichiamo la dimensione delle immagini nelle opzioni di ridimensionamento come segue:

  • Larghezza immagine: 80px

Modello di pagina del carrello Divi WooCommerce

Layout tabella personalizzato

Se desideri creare più spazio orizzontale per le informazioni sul prodotto nella tabella, puoi sostituire il layout della tabella fissa predefinito di WooCommerce su iniziale (o automatico). Per fare ciò, vai alla scheda avanzate e aggiungi il seguente CSS personalizzato alla tabella:

table-layout: initial !important;

Modello di pagina del carrello Divi WooCommerce

Progettazione del modulo dei totali del carrello Woo dinamico

L'ultimo elemento chiave di cui abbiamo bisogno per completare il modello di pagina del carrello sono i moduli Woo Cart Totals. Questo modulo mostra il contenuto dinamico dei totali del carrello e un pulsante "Procedi al pagamento". Per questo layout, vai avanti e aggiungi il modulo dei totali del carrello nella colonna di destra della sezione.

Modello di pagina del carrello Divi WooCommerce

Pulsante Totali carrello

Per prima cosa, copiamo gli stili dei pulsanti usati per i moduli Woo Notice (come abbiamo fatto prima) e incolliamo gli stili dei pulsanti nel modulo dei totali del carrello. Questo ci darà uno stile di pulsante corrispondente per il pulsante "Procedi al pagamento". Naturalmente, puoi facilmente personalizzare gli stili dei pulsanti come preferisci utilizzando le opzioni integrate del modulo.

Modello di pagina del carrello Divi WooCommerce

Testo totali carrello

Per definire lo stile del testo del titolo del modulo Totali carrello, apri il modulo Totali carrello e, nella scheda Design, aggiorna quanto segue:

  • Carattere del titolo: DM Serif Display
  • Dimensione del testo del titolo: 30px (desktop), 24px (tablet), 18px (telefono)
  • Altezza riga del titolo: 1,8 em

Modello di pagina del carrello Divi WooCommerce

Bordo della tabella e bordo della cella della tabella

I totali del carrello avranno alcuni stili di tabella per impostazione predefinita. Puoi scegliere di dare uno stile a quelli con le opzioni di tabella e cella di tabella integrate nel modulo. Per questo layout, elimineremo gli stili di bordo per entrambi. Per fare ciò, aggiorna quanto segue:

  • Stile bordo tabella: nessuno
  • Stile bordo cella tabella: nessuno

Modello di pagina del carrello Divi WooCommerce

Campi dei totali del carrello

Per assegnare al modulo dei totali del carrello gli stessi stili di campo utilizzati nei prodotti del carrello Woo, copia gli stili dei campi dal modulo Prodotti del carrello Woo e incollali nel modulo Totali del carrello.

Modello di pagina del carrello Divi WooCommerce

Aggiungi più contenuti secondo necessità

A questo punto, abbiamo tutti gli elementi chiave per il nostro modello di pagina del carrello. Ma non devi fermarti qui. Puoi aggiungere qualsiasi contenuto che desideri alla pagina secondo necessità. Ecco alcune idee:

  • Aggiungi un modulo Woo Cross Sells per visualizzare tutti i prodotti cross sell collegati ai prodotti aggiunti al carrello.
  • Aggiungi un'opzione email per uno sconto sui primi acquisti.
  • Aggiungi una promozione che mostri un codice coupon per incentivare il completamento del processo di acquisto.

Per la nostra demo gratuita di questo layout, abbiamo incluso una bella e-mail di attivazione sotto il carrello dei prodotti.

Modello di pagina del carrello Divi WooCommerce

Risultato finale

Diamo un'occhiata al risultato finale del nostro modello di pagina del carrello.

Modello di pagina del carrello Divi WooCommerce

Ed ecco come appare su tablet e dispositivi telefonici.

Modello di pagina del carrello Divi WooCommerce

Pensieri finali

Il processo di progettazione di un modello di pagina carrello WooCommerce personalizzato è drasticamente semplificato e amplificato con il potente generatore di temi di Divi e gli intuitivi moduli Woo. In questo tutorial, ci siamo concentrati sull'incorporazione degli elementi chiave che compongono una pagina del carrello. Ma, tieni presente che tutti gli altri potenti moduli e funzionalità Divi sono a tua disposizione per portare le pagine del tuo carrello a un livello completamente nuovo. Si spera che questo aiuti a migliorare le tue capacità di progettazione Divi e, cosa più importante, porti a più conversioni.

Non vedo l'ora di sentirti nei commenti.

Saluti!