Utilizzo del Fashion Layout Pack di Divi per creare un negozio online con WooCommerce

Il nuovo Fashion Layout Pack di Divi ha un'ottima configurazione per qualsiasi negozio online. L'integrazione del modulo negozio e l'organizzazione dei layout di pagina ti danno un vantaggio significativo. Ma per far funzionare questo layout come un negozio online funzionale, abbiamo bisogno del plugin WooCommerce. E potresti essere sorpreso di quanto bene Divi e WooCommerce funzionino insieme.

In questo tutorial, ti mostrerò come creare un negozio online utilizzando il pacchetto di layout Divi's Fashion utilizzando Woocommerce. Ti guiderò attraverso come configurare correttamente i tuoi layout da personalizzare, come dare vita alla pagina del negozio con l'integrazione di Woocommerce e alcuni suggerimenti su come utilizzare gli elementi del tuo layout e il personalizzatore del tema per modellare le pagine di Woocommerce.

Il set up

Per motivi di tempo, inizierò questo tutorial con alcuni passaggi già completati.

1. Installa e attiva il tema Divi
2. Installa e attiva WooCommerce
3. Scarica il Fashion Layout Pack e importa il file Fashion_All.json nella tua libreria di temi Divi.
4. Crea nuove pagine per ogni layout.
5. Crea il tuo menu principale.

Se sei confuso dalla configurazione sopra elencata, puoi trovare istruzioni più dettagliate su come configurare correttamente il tuo layout controllando questi 10 passaggi per l'utilizzo di un pacchetto di layout per il tuo nuovo progetto.

Una volta completati i 5 passaggi precedenti, sei pronto per iniziare.

L'anticipo

Ecco una sbirciatina ad alcune delle pagine WooCommerce che creerai.

Utilizzo del Fashion Layout Pack di Divi per creare un negozio online con WooCommerce

Iscriviti al nostro canale Youtube

Cambia il tuo colore di accento globale

Per iniziare, cambieremo il colore dell'accento globale per il tema Divi. Cambiare il colore dell'accento globale in modo che corrisponda al tuo layout è sempre una buona idea, ma è anche il modo più semplice per abbinare le tue pagine WooCommerce alla tua combinazione di colori senza dover utilizzare CSS personalizzati. Noterai che questo colore accento viene utilizzato per modellare gli elementi su ciascuna delle tue pagine WooCommerce come la pagina del singolo prodotto, la pagina del carrello, ecc.

Per modificare il colore dell'accento globale, vai a Personalizzatore tema e vai a Impostazioni generali> Impostazioni layout e trova l'opzione Colore accento tema in basso.

Sto usando questo colore rosa dal layout: #fc7086

Quindi, una volta modificato, salva e pubblica le impostazioni e aggiorna la pagina per consentire al colore principale di aggiornare altre impostazioni all'interno del personalizzatore.

Aggiorna le impostazioni della tipografia nel personalizzatore del tema

Poiché WooCommerce utilizza le impostazioni predefinite del personalizzatore del tema per modellare il testo per ciascuna delle sue pagine, dovrai assicurarti di abbinare la tipografia utilizzata sui tuoi layout con le impostazioni della tipografia nel personalizzatore del tema.

Per aggiornare la tua tipografia, vai su Divi > Personalizzazione del tema > Impostazioni generali > Tipografia e aggiorna quanto segue:

Dimensione del testo del corpo: 16px
Altezza della linea del corpo: 1,9
Dimensione del testo dell'intestazione: 42
Stile carattere intestazione: B
Carattere dell'intestazione: display Playfair
Carattere del corpo: Poppins
Colore del collegamento del corpo: [se hai aggiornato il colore dell'accento globale, questo colore dovrebbe apparire qui]

Imposta la pagina del negozio WooCommerce

WooCommerce ti consente di impostare quale pagina vuoi essere la pagina del tuo negozio di base. Questa pagina dovrebbe includere tutte le categorie di prodotti in modo che gli utenti sappiano tutto ciò che il tuo negozio ha da offrire. Poiché il nostro layout ha una pagina del negozio, andiamo avanti e rendiamo questa la nostra pagina del negozio di base.

Dalla dashboard di WordPress, vai su WooCommerce > Impostazioni e fai clic sulla scheda Prodotti nella parte superiore della pagina. Nel menu direttamente sotto la scheda, seleziona Visualizza . Quindi seleziona la pagina del negozio nella pagina "Negozio" che hai creato con il nuovo layout della pagina del negozio dal pacchetto di layout di moda.

Quindi salvare le modifiche.

Aggiungi prodotti al tuo negozio

Potresti aver notato che la tua Pagina del negozio, nonostante abbia due moduli del negozio, non mostra alcun prodotto. Beh, ovviamente devi prima aggiungere i prodotti. Per aggiungere un nuovo prodotto al tuo negozio, vai alla dashboard di WordPress e segui questi passaggi:

1. Vai a Prodotti > Aggiungi nuovo
2. Inserisci il nome del prodotto
3. Inserisci la descrizione per il prodotto
4. Inserisci il prezzo del prodotto
5. Inserisci una breve descrizione per il prodotto
6. Aggiungi tre nuove categorie (estate, in primo piano e in saldo)
7. Seleziona la categoria del tuo Prodotto (in questo caso sarebbe Estate)
8. Aggiungi l'immagine del prodotto
9. Pubblica/Aggiorna prodotto

Assegna categorie ai tuoi prodotti

Mentre ripeti i passaggi precedenti per creare più nuovi prodotti, assicurati di assegnare una categoria a ciascuno (n. 7 nei passaggi sopra elencati). Per questo tutorial, ho aggiunto 6 prodotti nella categoria "Estate", 6 prodotti nella categoria "In primo piano" e 1 prodotto nella categoria "In saldo".

Aggiorna i moduli del negozio sulla pagina del negozio

Ora che hai creato i tuoi prodotti, puoi aggiungere questi prodotti alla pagina del tuo negozio. Come ho detto prima, il layout della pagina del negozio ha già moduli del negozio integrati nel layout. Ce n'è uno nella sezione Estate e uno nella sezione In primo piano.

Vai alla pagina del negozio e distribuisci il visual builder. Quindi passa il mouse sul modulo del negozio (attualmente non mostra alcun prodotto) sotto la riga contenente il titolo Summer Fashion e fai clic sulle impostazioni del modulo.

Aggiorna le impostazioni per includere solo la categoria "Estate".

Ora dovresti vedere tutti i prodotti aggiunti con la categoria estate.

Quindi, trova il modulo del negozio sotto il titolo dei prodotti in primo piano e aggiorna le impostazioni per includere solo la categoria in primo piano.

Aggiungi un modulo negozio per visualizzare gli articoli "in vendita" nella pagina del negozio

Poiché abbiamo due categorie (Prodotti in evidenza e Moda estiva) nella pagina del negozio, sarebbe facile creare categorie e prodotti aggiuntivi utilizzando i moduli già forniti nel layout.

Creiamo un'altra sezione per visualizzare i nostri prodotti “In Saldo”.

Per fare ciò, distribuisci il visual builder e usa le opzioni del tasto destro per copiare l'intera sezione che mostra i prodotti di moda estivi e incollala direttamente sotto la sezione Prodotti in evidenza.

Ora tutto ciò che devi fare è fare alcuni aggiornamenti.

Nella riga che mostra il titolo, fai clic sul testo nel modulo di testo e cambia il titolo per dire "In vendita" invece di "Moda estiva".

Quindi cambia l'immagine nella colonna di sinistra con qualcosa di più coerente con i tuoi prodotti in vendita.

Infine, aggiorna il modulo del negozio per includere solo la categoria "In vendita".

Dai uno stile alle tue pagine WooCommerce con il layout Fashion

WooCommerce genera automaticamente il proprio set di pagine WooCommerce quando installi il plug-in. Questi includono quanto segue:

Negozio – che è un segnaposto per un archivio di tipi di post per i tuoi prodotti.
Carrello – che utilizza lo shortcode [woocommerce_cart] per generare il contenuto del carrello
Checkout – che utilizza lo shortcode [woocommerce_checkout] per mostrare le informazioni.
Il mio account – che utilizza lo shortcode [woocommerce_my_account] per mostrare informazioni specifiche sui clienti relative al loro account.

Poiché abbiamo già selezionato la nostra pagina Shop, non è necessario alcun ulteriore design. Ma per le altre 3 pagine WooCommerce, dobbiamo modellarle per adattarle al design degli altri layout di pagina.

Aggiunta di un'intestazione di sezione al carrello e alle pagine di pagamento

Diamo prima un'occhiata alla pagina del carrello. Ecco come appare prima che ci facciamo qualcosa.

Nota che poiché abbiamo aggiornato il nostro colore di accento globale, i nostri collegamenti e pulsanti corrispondono già alla combinazione di colori. E, poiché abbiamo aggiornato le nostre impostazioni di tipografia in Theme Customizer, anche le intestazioni e il testo del corpo corrispondono al nostro tema.

Ma possiamo fare qualcosa di meglio con pochi clic. Per prima cosa vai alla pagina del negozio, distribuisci il visual builder e salva la sezione superiore contenente l'intestazione della pagina nella libreria. Puoi dare il nome "sezione di intestazione della pagina".

Quindi scorri fino alla fine della pagina e trova l'ultima sezione contenente l'opzione e-mail e i dettagli di contatto e salvala nella tua libreria con il nome "sezione piè di pagina".

Ora vai a modificare la pagina del carrello. Dall'editor di pagina predefinito, seleziona per utilizzare Divi Builder, quindi "Usa Visual Builder". Il builder dovrebbe aver inserito automaticamente lo shortcode [woocommerce_cart] in un modulo di testo all'interno di una riga di una colonna di una sezione normale. In caso contrario, dovrai crearlo tu stesso. Quindi, fai clic sull'icona blu più per aggiungere una nuova sezione sotto quella corrente, seleziona la scheda "Aggiungi dalla libreria". Quindi seleziona la nuova sezione appena creata chiamata "Sezione intestazione pagina".

Quindi trascina quella sezione nella parte superiore della pagina e modifica il testo del titolo in "Il tuo carrello". Questo è tutto!

Puoi ripetere questo processo anche per la pagina di pagamento.

Progettare la pagina del mio account utilizzando Divi Builder

Ora che sai come aggiungere un'intestazione a queste pagine WooCommerce, vai avanti e fai lo stesso per la pagina Il mio account. Questa volta puoi aggiungere la sezione del piè di pagina che hai salvato nella libreria in fondo a questa pagina.

Potresti voler dare a questa pagina un design distinto per rendere più evidente che si tratta di una pagina che gestisce il tuo account. Quindi, invece dello sfondo sfumato rosa per le sezioni dell'intestazione e del piè di pagina, vai alle impostazioni della sezione per ciascuna e cambia i colori del gradiente di sfondo in # 9599e2 e # 8bc6ec.

Usa le impostazioni del modulo di testo per modellare il contenuto dello shortcode di WooCommerce

Poiché lo shortcode WooCommerce ora risiede all'interno di un modulo di testo, puoi usarlo a tuo vantaggio per modellare alcuni di quegli elementi all'interno delle impostazioni del modulo.

Facciamolo per la nostra pagina Il mio account. Dal visual builder, aggiorna le impostazioni del modulo di testo che contiene il contenuto dello shortcode come segue:

Nella scheda Progettazione...

Dimensione del testo del testo: 20px
Altezza riga di testo: 1,6 em

Ora fai clic sulla scheda del collegamento sotto la sezione Testo per definire lo stile dei collegamenti come segue:

Carattere del collegamento: Poppins
Peso del carattere del collegamento: semi grassetto
Dimensione del testo del collegamento: 27 px
Altezza della linea di collegamento: 1,5 em

Salva le impostazioni

Ora controlla la tua pagina Il mio account.

Usando CSS personalizzati per modellare le pagine di archivio WooCommerce?

Alcune delle pagine di archivio utilizzate da WooCommerce non sono generate con uno shortcode come le altre pagine, quindi non possono essere modificate utilizzando Divi Builder. Quindi, per queste pagine, dovresti creare dei CSS personalizzati.

Diamo un'occhiata alla pagina Categoria in primo piano come esempio.

Ora apriamo il Personalizzatore di temi e facciamo clic su CSS aggiuntivo e aggiungiamo quanto segue:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Questo modellerà la casella a discesa di ordinamento, i breadcrumb e il carattere del prezzo. Il resto del testo può essere modificato utilizzando le impostazioni Tipografia dal personalizzatore del tema.

Pensieri finali

La creazione di un negozio online per il tuo sito Web è resa molto più semplice con l'aiuto di questo fantastico pacchetto di layout, WooCommerce e Divi Builder. Ovviamente, ci sono alcune necessità che devono ancora essere fatte che esulano dallo scopo di questo articolo. Ad esempio, dovrai comunque decidere quale gateway di pagamento utilizzare, come vuoi gestire la spedizione e altri elementi di azione più specifici dell'azienda. Ma WooCommerce dovrebbe essere in grado di gestire la maggior parte di ciò di cui hai bisogno.

Se non altro, spero che questo post ti abbia ispirato a creare qualcosa di straordinario da solo.

Non vedo l'ora di sentirti nei commenti.

Saluti!