Come creare una pagina di account WooCommerce con una sezione di prodotti in primo piano per gli utenti che hanno effettuato l'accesso

I moduli Woo di Divi possono essere utili per mostrare una sezione di prodotti in primo piano ovunque sul tuo sito Web, comprese altre pagine WooCommerce come la pagina dell'account. In questo modo è facile fare offerte speciali agli utenti anche quando stanno sfogliando le informazioni del proprio account.

In questo tutorial, progetteremo da zero un'intera pagina account WooCommerce completa di una pratica sezione di prodotti in primo piano utilizzando i moduli Woo. Includeremo anche alcuni frammenti di CSS che mostreranno la sezione del prodotto in primo piano solo quando l'utente ha effettuato l'accesso.

Iniziamo.

Sbirciata

Ecco una rapida occhiata alla pagina dell'account che creeremo in questo tutorial.

Ecco la pagina dell'account prima che un utente acceda.

Ecco la pagina dell'account dopo che un utente ha effettuato l'accesso. Come puoi vedere, la sezione del prodotto in primo piano viene visualizzata sotto il contenuto della pagina dell'account.

Scarica GRATUITAMENTE il layout della pagina dell'account del prodotto in primo piano

Per mettere le mani sul layout della pagina dell'account 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 sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

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!

Iscriviti al nostro canale Youtube

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non lo hai ancora fatto, installa e attiva il tema Divi installato (o il plug-in Divi Builder se non utilizzi il tema Divi).
2. Installa e attiva il plugin WooCommerce. Se è la prima volta che configuri WooCommerce, dovrai eseguire la procedura guidata di configurazione di base per preparare il tuo negozio. Una volta fatto, sei pronto per aggiungere i tuoi nuovi prodotti.
3. Crea alcuni prodotti se non ne hai ancora. Per maggiori informazioni su come aggiungere un nuovo prodotto, dai un'occhiata a questo tutorial.

Successivamente, sarai pronto per iniziare a progettare una sezione di prodotti in primo piano in Divi.

Parte 1: Progettazione della pagina dell'account

Abilita Divi Builder nella pagina dell'account WooCommerce

Una volta installato e attivato WooCommerce, la pagina dell'account WooCommerce verrà creata automaticamente per te. Per modificare la pagina dell'account, puoi trovarla dalla dashboard di WordPress andando su Pagine > Tutte le pagine. Quindi passa il mouse sulla pagina Account e fai clic su "modifica".

Successivamente, noterai lo shortcode WooCommerce che viene utilizzato per generare il contenuto della pagina dell'account. Vai avanti e fai clic per utilizzare Divi Builder.

Lo shortcode verrà trasferito e inserito in un modulo di testo. Ora fai clic per utilizzare Divi Builder sul front-end.

Le impostazioni della sezione

La prima cosa che faremo è aggiungere uno sfondo alla sezione. Apri le impostazioni della sezione e aggiorna quanto segue:

• Colore sfondo sfumato sinistro: #ad52b7
• Colore di sfondo sfumato a destra: rgba (255,255,255,0.66)
• Direzione gradiente: 90 gradi
• Posizione di partenza: 33%
• Posizione finale: 0%
• Posiziona il gradiente sopra l'immagine di sfondo: S

Quindi aggiungi un'immagine di sfondo larga almeno 1920 px.

Aggiungi intestazione utilizzando un nuovo modulo di testo

Per aggiungere l'intestazione della pagina principale (h1), aggiungi un nuovo modulo di testo facendo clic sull'icona più grigia sotto il modulo di testo corrente contenente lo shortcode WooCommerce.

Quindi trascinalo sopra il modulo di testo shortcode WooCommerce e aggiorna le impostazioni come segue:

Contenuto del corpo:

<h1>My Account</h1>

Nella scheda H1, aggiorna i seguenti stili di testo dell'intestazione:

• Carattere intestazione: Prompt
• Peso del carattere dell'intestazione: grassetto
• Colore del testo dell'intestazione: #3f214f
• Dimensione del testo dell'intestazione: 90 px (desktop), 56 px (tablet), 36 px (telefono)
• Spaziatura delle lettere dell'intestazione: 5px

Personalizza il contenuto dello shortcode

Anche se le informazioni sulla pagina dell'account woocommerce vengono generate da uno shortcode, possiamo comunque scegliere come target alcuni di questi elementi utilizzando le impostazioni del modulo di testo.

Apri le impostazioni del modulo di testo che contiene lo shortcode e aggiorna quanto segue:

• Colore di sfondo: rgba (255,255,255,0.9)

Nella scheda del testo del paragrafo, aggiorna quanto segue:

• Carattere del testo: Roboto
• Dimensione del testo del testo: 16px

Nella scheda Collegamento, aggiorna quanto segue:

• Colore del testo del collegamento: #ad52b7

Nella scheda Elenco non ordinato, aggiorna quanto segue:

• Dimensioni testo elenco non ordinato: 26 px (desktop), 18 px (tablet)
• Spaziatura lettere elenco non ordinato: 2px
• Altezza riga lista non ordinata: 2em
• Rientro elemento elenco non ordinato: 0.01px

Anche se non possiamo vederlo in questo momento, ci sarà un'intestazione h2 nel modulo di accesso ogni volta che un utente visita la pagina dell'account senza aver effettuato l'accesso. Per scegliere come target quell'intestazione h2, aggiorna quanto segue:

• Intestazione 2 Carattere: Roboto
• Titolo 2: Dimensione testo: 56px (desktop), 32px (tablet)

Quindi aggiungi un po 'di riempimento attorno al modulo di testo:

• Imbottitura: 3% in alto, 3% in basso, 3% a sinistra, 3% a destra

Infine, dai al modulo di testo una classe CSS personalizzata.

• Classe CSS: stile account personalizzato

Con questa classe, possiamo indirizzare il modulo con alcuni CSS esterni per dare gli ultimi ritocchi agli elementi delle informazioni sull'account che non siamo stati in grado di indirizzare con le impostazioni dei moduli di testo.

Aggiunta di CSS esterni allo stile di altri elementi di informazioni sull'account

Poiché abbiamo la nostra classe CSS in atto, possiamo utilizzare CSS esterni per modellare altri elementi delle informazioni sull'account generati dallo shortcode. Questo non è necessario se vuoi controllare questi elementi dalle Impostazioni di personalizzazione del tema. Ad esempio, il colore dei collegamenti, dei pulsanti e degli sfondi delle notifiche verrà ereditato dal colore secondario selezionato nelle Impostazioni di personalizzazione del tema.

Per applicare uno stile ai colori di determinati elementi direttamente per questa pagina, apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato alla pagina:

.custom-account-style .woocommerce-Button.button, .custom-account-style .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    color: #ffffff!important;
    background-color: #9452b7;
    border-color: #9452b7;
}
.custom-account-style .woocommerce-Button.button:hover {
    background-color: #3f214f;
}

.custom-account-style .woocommerce .woocommerce-error, .custom-account-style .woocommerce .woocommerce-info, .custom-account-style .woocommerce .woocommerce-message {
   background-color: #3f214f;
}

Larghezza riga

Dopo che le informazioni sullo shortcode del modulo di testo woocommerce sono state modificate, salva le impostazioni e apri le impostazioni della riga. Aggiorna la larghezza massima come segue:

• Larghezza massima: 1250 px

Parte 2: Progettazione della sezione dei prodotti in primo piano

Ora che le informazioni sulla pagina principale dell'account sono terminate, possiamo ora progettare la sezione del prodotto in primo piano. È qui che utilizzeremo i moduli WooCommerce di Divi per inserire dinamicamente le informazioni sui prodotti. Quindi aggiungeremo alcuni frammenti di CSS per mostrare i prodotti ogni volta che l'utente effettua l'accesso.

Creazione della nuova sezione e riga

Per iniziare, crea una nuova sezione regolare.

Quindi aggiungi una riga di una colonna alla sezione.

Prima di aggiungere un modulo, copia le impostazioni della sezione e le impostazioni della riga utilizzate per il design della pagina dell'account sopra e incollale nella nuova sezione e riga che abbiamo appena aggiunto.

Aggiungi intestazione con modulo di testo

Simile a quello che abbiamo fatto per l'intestazione principale della pagina, creeremo una nuova intestazione per la sezione del prodotto in primo piano. Per fare ciò, aggiungi un nuovo modulo di testo alla riga a una colonna e aggiorna quanto segue:

Contenuto del corpo:

<h2>Special Product Offer</h2>

• Intestazione 2 Carattere: Prompt
• Intestazione 2 Peso del carattere: grassetto
• Colore testo titolo 2: #3f214f
• Titolo 2: Dimensione testo: 56px (desktop), 36px (tablet)
• Intestazione 2 Spaziatura lettere: 5px

Aggiungi seconda riga

Quindi aggiungi una nuova riga con una struttura di colonne 1/3 2/3.

Modulo Aggiungi immagini Woo

Nella colonna di sinistra, aggiungi un modulo Woo Images.

Quindi seleziona il prodotto che desideri mettere in evidenza dal menu a discesa del prodotto.

Quindi aggiorna lo stile del badge di vendita come segue:

• Colore distintivo di vendita: #f1be51
• Carattere distintivo di vendita: Roboto
• Stile carattere distintivo di vendita: TT
• Spaziatura delle lettere del badge di vendita: 5px
• Altezza della linea del badge di vendita: 1,3 em

Aggiungi divisore

Nella colonna di destra, aggiungi un modulo divisore e aggiorna le impostazioni come segue:

• Colore linea: #dddddd
• Peso del divisore: 3px
• Margine: 10px in basso

Aggiungi modulo titolo Woo

Sotto il modulo divisore, aggiungi un modulo titolo Woo.

Quindi aggiungi lo stesso prodotto di quello aggiunto nel modulo immagini woo.

Quindi aggiorna le impostazioni di progettazione come segue:

• Livello titolo titolo: H3
• Carattere del titolo: Roboto
• Dimensione del testo del titolo: 38px

Aggiungi modulo prezzo Woo

Quindi, aggiungi un modulo prezzi Woo con lo stesso prodotto.

Quindi aggiorna le impostazioni di progettazione come segue:

• Carattere prezzo: Roboto
• Colore testo prezzo: #ad52b7

Aggiungi il modulo di descrizione di Woo

Sotto il modulo del prezzo di Woo, aggiungi un modulo di descrizione di Woo.

Quindi aggiungi lo stesso prodotto al modulo di descrizione di woo.

Quindi aggiorna le impostazioni come segue:

• Colore di sfondo: #eeeeee
• Imbottitura: 20px in alto, 20px in basso, 20px a sinistra, 20px a destra

Aggiungi il modulo Aggiungi al carrello

Sotto il modulo Woo Description, aggiungi il modulo Woo Add to Cart e seleziona lo stesso prodotto.

Quindi aggiorna le impostazioni come segue:

• Usa stili personalizzati per il pulsante: S
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #ad52b7

Aggiorna le impostazioni della riga

Quindi aggiorna le impostazioni della riga come segue:

• Colore di sfondo (tablet): #ffffff
• Larghezza massima: 1250 px
• Imbottitura (desktop): 0px in alto, 0px in basso
• Imbottitura (tablet): 25 px in alto, 25 px in basso, 25 px a sinistra, 25 px a destra

Quindi, apri le impostazioni della colonna di sinistra e aggiorna quanto segue:

• Colore di sfondo: #3f214f
• Imbottitura: 25px in alto, 25px in basso, 25px a sinistra, 25px a destra

Aggiunta di più prodotti

Il trucco per aggiungere più prodotti a questa sezione in primo piano è duplicare la riga contenente gli elementi WooCommerce che compongono il prodotto in primo piano. Quindi apri il modulo Woo Images per all'interno della nuova riga duplicata e fai clic per utilizzare Trova e sostituisci sull'opzione Prodotto.

Quindi utilizza le opzioni Trova e sostituisci per sostituire la selezione di prodotti con un nuovo prodotto di tua scelta. Assicurati di sostituire il prodotto per tutte le opzioni di prodotto all'interno di questa riga. Quindi fare clic sul pulsante Sostituisci.

Dopodiché, tutti e 5 i moduli woo condivideranno automaticamente lo stesso nuovo prodotto.

Aggiungi ID CSS

Per nascondere la sezione dei prodotti in primo piano agli utenti che non hanno effettuato l'accesso, dobbiamo aggiungere una classe CSS alla sezione dei prodotti in evidenza come segue:

• Classe CSS: solo accesso

Aggiungi CSS esterno

Dopo che la classe CSS è a posto, apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato proprio sotto il nostro precedente frammento CSS.

.logged-in-only {
  display: none;
}
.logged-in .logged-in-only{
  display: block;
}

Questo codice nasconderà la sezione per impostazione predefinita e quindi mostrerà la sezione una volta che un utente accede al tuo sito WordPress.

Risultato finale

Ecco la pagina dell'account prima che un utente acceda.

Ecco la pagina dell'account dopo che un utente ha effettuato l'accesso.

Pensieri finali

Avere una sezione prodotti in primo piano per la pagina dell'account WooCommerce è un ottimo modo per promuovere nuove offerte di prodotti in una posizione mirata sul tuo sito web. Divi semplifica la personalizzazione di una pagina dell'account WooCommerce con un design completamente unico in pochi minuti. Inoltre, i moduli Woo di Divi rendono la creazione di sezioni di prodotti in primo piano un gioco da ragazzi. Inoltre, la visualizzazione dei prodotti in primo piano solo agli utenti che hanno effettuato l'accesso aggiunge valore e incentiva ulteriormente l'offerta.

Speriamo che questo ti dia un po' di ispirazione durante la progettazione della tua prossima pagina dell'account in Divi.

Per ulteriori informazioni, scopri ulteriori suggerimenti sullo stile delle pagine dell'account in Divi. E non dimenticare di dare un'occhiata alla documentazione completa sui moduli Woo per scoprire ancora più possibilità.

Non vedo l'ora di sentirti nei commenti.

Saluti!