Intro personalizzare woocommerce account page

Ecco un tutorial su come personalizzare la nostra Woocommerce account page di default e renderla piú elegante e non uguale a tutti.

Woocommerce ne ho giá parlato in diversi articoli é il plugin per trasforma il tuo sito WordPress in un vero e-commerce online, aggiungendo la funzione del carrello, gestione degli ordini, aggiunta dei prodotti e molto altro. Molto spesso le pagine di default di Woocommerce non possono sempre piacere e sono veramente semplici e molto confusionarie.

Recentemente ho scritto anche come modificare il checkout di woocommerce usando CartFlow e tutto il processo di acquisto nel tuo negozio, ma oggi andremo a vedere come rendere finalmente la pagina woocommerce account page piú bella ma sopratutto piú semplice da utilizzare utilizzando Elementor il migliore page builder per WordPress e qualche css.

Cosa sono i css

I css sono i fogli di stile nel tuo tema, che permettono la visualizzazione delle pagine e elementi con personalizzazioni. Ogni tema su WordPress ha un foglio di stile “style.css” e qualche tema permette anche di aggiungere css personalizzati nel loro pannello delle opzioni. Comunque puoi anche inserirli sulla funzione “personalizza” nativa di WordPress cosi andranno a lavorare sopra a qualsiasi altro CSS. Se invece vuoi inserire i css su style.css ti consiglio di farlo sul child theme del tuo tema, cosi che se in futuro avrai aggiornamenti nel tema principale non cancelleranno il tuo lavoro.

Come funziona woocommerce account page

La Woocommerce account page permette ai clienti che hanno acquistato nel tuo negozio o che devono ancora acquistare di avere un piccolo pannello dove cambiare i dati di spedizione, pagamenti, dettagli dell’account, gestire gli ordini di default. A seconda dei plugin woocommerce installati potresti avere ulteriori voci.

Questo é il layout classico della woocommerce account page:

Woocommerce Account page - versione normale

Woocommerce Account page – versione normale

Qui invece é quello che andremo a creare in questa guida:

Woocommerce Account page

Woocommerce account page modificata

 

Quali css devo usare per modificare woocommerce account page

Ho preparato 2 semplici css niente di speciale ma che ci permetteranno di eseguire perfettamente questa operazione di “restlying dell’account Woocommerce”.

.woocommerce-MyAccount-navigation {
display:none;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}

Come vedi da questi codice, la prima parte ci serve per nascondere la vedera navigazione di woocommerce account, ovvero quella classica vertificale. Invece la seconda parte del codice CSS ci permette di estendere a tutto schermo orizzontale la sezione dove ci saranno i dati. Insomma molto semplice, una cosa dovrai tenere conto e sono gli end-point di woocommerce.

 

Cosa sono gli end-point di woocommerce

La pagina account di Woocommerce utilizza delle pagine dinamiche per le varie sezioni e queste vengono create al momento con gli end-point ad esempio:

  • Ordini –> orders
  • Vedi ordine –> view-order
  • Downloads –> downloads
  • Modifica account –> edit-account
  • Indirizzi –> edit-address
  • Metodi di pagamento –> payment-methods
  • Password dimenticata –> lost-password
  • Logout —> customer-logout

Questi end-point ci serviranno in questo tutorial per associare i pulsanti e blocchi alle vere sezioni di woocommerce cosi per caricare il tutto. Ora vediamo con Elementor come applicare il css e le grafiche.

 

Qui sotto il mio video su come fare:

Alla fine del post trovi il file elementor da importare se vuoi usare questo tema che ho creato.