WooCommerce Storefront CSS Guida alla personalizzazione completa

Pubblicato: 2020-10-15

WooCommerce Storefront CSS Con oltre 200.000 installazioni attive, il tema Storefront è progettato, sviluppato e mantenuto dagli sviluppatori WooCommerce Core. È quindi soprannominato il tema ufficiale di WooCommerce.

Questo tema è progettato per essere flessibile come WooCommerce. L'ultima versione ha più di 40 ganci di azione e più di 60 ganci di filtro.

WooCommerce Storefront CSS

Tuttavia, la domanda principale è come puoi modificare l'aspetto e il layout del tuo tema. Se sei un utente WordPress esperto, questo non sarà un problema. Gli utenti che non vogliono sporcarsi le mani con CSS e PHP trovano difficile personalizzare il tema. Per questo tutorial, devi avere alcune abilità di programmazione. Aggiungeremo le regole CSS nella sezione CSS aggiuntivo tramite il personalizzatore.

Il vantaggio dell'utilizzo di questa sezione è che il personalizzatore di WordPress ti consente di modificare in tempo reale. Puoi vedere le modifiche apportate prima di poter pubblicare le modifiche.

Vale anche la pena ricordare che il tema Storefront deve essere il tema attivo durante la personalizzazione.

In questo post, ti fornirò la guida definitiva alla personalizzazione dei CSS nel tema Storefront. Il trucco è identificare l'elemento che è necessario modificare e aggiungere una regola a quell'elemento.

Detto questo, ecco alcune delle regole CSS che puoi utilizzare per il tema della vetrina.

1. Personalizza la dimensione dell'intestazione

Qui useremo di nuovo il Customizer del tema, ma scriveremo del codice CSS nella sezione "CSS aggiuntivo".

Aggiungi il seguente codice:

 * Testata */

#masthead.site-header {

    altezza: 155px! importante;

    margine inferiore: 0px

}

/* CSS mobile per masthead */

Schermata solo multimediale e (larghezza massima: 320 px) {

    #masthead.site-header {

    altezza: 80px! importante;

    margine inferiore:0px;

}

}

/* Menu masthead */

.storefront-primary-navigation a, .cart-contents a {

    margine:0 0 0 0;

}

.navigazione-principale ul {

    padding:0 0 10px 4px!importante;

}

.navigazione-principale li {

    altezza:38px!importante;}

/* CSS mobile per il menu masthead */

Schermata solo multimediale e (larghezza massima: 320 px) {

.navigazione-principale ul {

    sfondo:#D6DDE4!importante;

}

}

/* Area dell'intestazione */

.intestazione-sito {

imbottitura superiore: 0,5 em;

}

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {

margine inferiore: -45px;

}

Ecco il risultato: Personalizza la dimensione dell'intestazione

2. Rimuovere la barra di ricerca dall'intestazione del tema

Aggiungi questo codice alla sezione "CSS aggiuntivo".

 .intestazione-sito .widget_product_search {

display: nessuno;

}

Ecco il risultato: Rimuovi la barra di ricerca

3. Modificare il colore del menu dell'intestazione

Il personalizzatore ci consente di personalizzare l'intestazione con i colori che desideri. Puoi farlo andando su Personalizza, quindi intestazione e selezionando il colore desiderato.

Tuttavia, questa opzione colora l'intera regione dell'intestazione, inclusa la barra di ricerca, la sezione di accesso e il logo. Per ottenere uno sfondo diverso dal menu dell'intestazione, aggiungi il seguente snippet di codice al pannello CSS aggiuntivo.

 .storefront-primaria-navigazione,

.navigazione-principale ul.menu ul.sottomenu{

colore di sfondo: verde;

}

Ecco il risultato: Cambia il colore del menu dell'intestazione

4. Nascondere la barra di navigazione principale

Storefront Theme, per impostazione predefinita, mostra tutte le pagine come un menu. Se vuoi nascondere la barra di navigazione principale, eliminare il menu non è sufficiente. Passare a Personalizza, quindi alla sezione CSS aggiuntivo e aggiungere le seguenti righe:

 .storefront-navigazione-principale {

display: nessuno;

}

Ecco il risultato: Nascondi la barra di navigazione principale

5. Rimuovere lo spazio vuoto dall'intestazione

Passare a Personalizza, quindi alla sezione CSS aggiuntivo e aggiungere le seguenti righe:

 .marchio del sito {

margine inferiore: 0px;

}

Ecco il risultato: Rimuovi lo spazio vuoto dall'intestazione

6. Aumenta la larghezza della barra di ricerca

Cosa faresti se volessi estendere la larghezza della barra di ricerca? Usando la sezione CSS aggiuntivo, aggiungi le seguenti righe:

 .woocommerce-active .site-header .site-search {

larghezza: 44,739%;

}

#masthead .site-search .widget_product_search input[type="search"] {

larghezza: 700px !importante;

}

Ecco il risultato: Aumenta la larghezza della barra di ricerca

7. Come modificare le dimensioni del logo, della navigazione secondaria e della barra di ricerca

Per cambiarli tutti in una volta, aggiungi il seguente codice alla sezione CSS aggiuntivo:

 @schermo multimediale e (larghezza minima: 768px) {

/* LOGO */

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { larghezza: 30% !importante; /* Usa i valori px se vuoi, ad es. 350px */ }

/* NAVIGAZIONE SECONDARIA */

.intestazione-sito .navigazione-secondaria { larghezza: 40% !importante; /* Usa i valori px se vuoi, ad es. 350px */ }

/* BARRA DI RICERCA */

.site-header .site-search { larghezza: 30% !importante; /* Usa i valori px se vuoi, ad es. 350px */ }

Ecco il risultato: Come modificare le dimensioni del logo, della navigazione secondaria e della barra di ricerca

8. Rimuovere il carrello dall'intestazione

In questo esempio, rimuoverò l'icona del carrello aggiungendo una nuova regola ' display: none; '. Aggiungi il seguente codice CSS nella sezione CSS aggiuntivo:

 .site-header-cart .cart-contents {

display: nessuno;

}

Ecco il risultato: Rimuovi il carrello dall'intestazione

9. Nascondi l'intestazione

Per nascondere l'intestazione, aggiungi il seguente codice CSS nella sezione CSS aggiuntivo:

 .intestazione-sito {

display: nessuno;

}

Ecco il risultato: Nascondi l'intestazione

10. Aumenta la dimensione del collegamento del menu nell'intestazione della vetrina

I menu sono leggermente più piccoli, secondo le preferenze di molti utenti. Tuttavia, devono aggiornare la dimensione del carattere dei collegamenti ai menu nel tema della vetrina. Aggiungi il codice seguente nella sezione CSS aggiuntivo:

 .navigazione-principale ul.menu > li > a, .navigazione-principale ul.nav-menu > li > a {

dimensione del carattere: 28px;

}

Ecco il risultato: Aumenta la dimensione del collegamento del menu nell'intestazione della vetrina

11. Modificare la dimensione dell'icona del carrello nell'intestazione della vetrina

Puoi farlo aggiungendo il seguente codice CSS nella sezione CSS aggiuntivo

 .site-header-cart .cart-contents {

dimensione del carattere: 30px;

}

Ecco il risultato: Modifica la dimensione dell'icona del carrello nell'intestazione della vetrina

12. Modificare la dimensione del titolo dell'intestazione del sito nel tema Storefront

Aggiungi il seguente codice nella sezione CSS aggiuntivo:

 .intestazione-sito {

dimensione del carattere: 20px;

}

Ecco il risultato: Modifica la dimensione del titolo dell'intestazione del sito nel tema della vetrina

13. Modifica la dimensione del pulsante del menu mobile

È importante notare che il modo in cui viene visualizzato il menu fa parte della reattività del menu. Pertanto, se il menu di navigazione principale è sotto forma di elenco su un dispositivo desktop, lo stesso menu può essere visualizzato come menu hamburger su un dispositivo mobile.

Per modificare la dimensione, aggiungi il seguente codice CSS nella sezione CSS aggiuntivo:

 .button.menu-toggle {

dimensione del carattere: 19px;

}

Ecco il risultato: Cambia la dimensione del pulsante del menu mobile

14. Nascondi il titolo dei prodotti nella pagina del negozio

Per nascondere il titolo del prodotto nella pagina del negozio, vai semplicemente alla sezione Personalizza e poi CSS aggiuntivo e aggiungi le seguenti righe:

 h2.woocommerce-loop-product__title {

display: nessuno !importante;

}

Ecco il risultato:

Nascondi il titolo dei prodotti nella pagina del negozio

15. Nascondi i pulsanti Quantità prodotto più e meno dalla pagina del prodotto

Per nascondere il campo di testo con i pulsanti più e meno per aumentare o diminuire la quantità del prodotto, è sufficiente aggiungere il seguente codice CSS nella sezione CSS aggiuntivo: 

 .quantità {

display: nessuno !importante;

}

Ecco il risultato: Nascondi i pulsanti Quantità prodotto più e meno dalla pagina del prodotto

16. Nascondi il pulsante "Aggiungi al carrello" nella pagina del prodotto

Per fare ciò, vai semplicemente alla sezione Personalizza e poi CSS aggiuntivo e aggiungi le seguenti righe:

 .pulsante_aggiungi_al_carrello_singolo {

display: nessuno !importante;

}

Ecco il risultato: Nascondi il pulsante "Aggiungi al carrello" nella pagina del prodotto

17. Modifica il colore della sezione del widget Storefront e la dimensione del carattere

Non esiste un modo diretto per modificare il colore o la dimensione del carattere per i widget della pagina utilizzando il personalizzatore. Puoi facilmente modificarlo aggiungendo le seguenti righe di codice CSS. Per fare ciò, vai su Personalizza, quindi sezione CSS aggiuntivo e aggiungi le seguenti righe:

 .widget-area .widget {

colore: verde;

dimensione del carattere: 1em;

}

Ecco il risultato: Cambia il colore della sezione del widget Storefront e la dimensione del carattere

18. Mostra il badge "Saldi" della vetrina sull'immagine del prodotto

La versione predefinita del tema WooCommerce Storefront consente di definire una vendita o un prezzo scontato per un determinato prodotto. Tuttavia, se desideri aggiungere il badge Sale sull'immagine del prodotto, vai su Personalizza, quindi Sezione CSS aggiuntivo e aggiungi le seguenti righe:

 ul.products li.product .onsale {

posizione: assoluta;

in alto: 137px;

a destra: 62px;

}

Ecco il risultato: Mostra il badge "Saldi" della vetrina sull'immagine del prodotto

19. Cambia il Colore del badge “Saldi”.

Per cambiare il colore del badge Sale, vai semplicemente alla sezione Personalizza e poi CSS aggiuntivo e aggiungi le seguenti righe:

 .in vendita {

colore di sfondo: nero;

colore del bordo: rosso;

colore rosso;

}

Ecco il risultato: Cambia il colore del badge "Saldi".

20. Modificare il colore della casella "più-meno" della quantità

Questo può essere fatto cambiando il colore di sfondo dei pulsanti quantità più e meno. Per fare ciò, vai su Personalizza, quindi sezione CSS aggiuntivo e aggiungi le seguenti righe:

 .quantità .quantità {

colore: #000;

colore di sfondo: #f5df72;

}

Ecco il risultato: Modifica il colore della casella "più-meno" della quantità

21. Modificare il colore di sfondo del Minicart nell'intestazione

Quando si cambia il colore dell'intestazione, il menu a discesa del mini carrello eredita questo colore. Tuttavia, puoi modificarlo utilizzando le seguenti regole CSS per una maggiore visibilità. Passare a Personalizza, quindi alla sezione CSS aggiuntivo e aggiungere le seguenti righe:

 .woocommerce.widget_shopping_cart {

sfondo: rosso;

raggio di confine: 12px;

}

Ecco il risultato: Cambia il colore di sfondo del Minicart nell'intestazione

22. Aggiungi un'immagine nel piè di pagina di Storefront utilizzando CSS sotto Copyright

Se desideri aggiungere il tuo logo, i pagamenti accettati o il badge del partner sotto il testo del copyright, vai a Livelli, Personalizza , quindi fai clic su Piè di pagina .

Fare clic su Personalizzazione per espandere il pannello e fare clic su Seleziona immagine sullo sfondo.

Seleziona l'immagine che desideri e aggiungila.

Selezionare Nessuna ripetizione e Fondo o posizionarlo manualmente come desiderato.

Torna al Customizer e fai clic su CSS per espandere il pannello. Tuttavia, dovresti assicurarti che le percentuali siano conformi alle tue specifiche. Quindi aggiungi le seguenti righe:

 .info-sito:dopo {

contenuto: '';

background-image: url(aggiungi il tuo URL);

blocco di visualizzazione;

larghezza: 100px;

altezza: 100px;

margine: 0 automatico;

}

Ecco il risultato: Aggiungi un'immagine nel piè di pagina di Storefront utilizzando CSS sotto Copyright

  1. Come rimuovere lo spazio vuoto nel piè di pagina

Passare a Personalizza, quindi alla sezione CSS aggiuntivo e aggiungere la seguente riga:

.footer-widgets { padding-top: 0; }

Ecco il risultato: Come rimuovere lo spazio vuoto nel piè di pagina

24. Come rimuovere la sottolineatura dai collegamenti ipertestuali

Per impostazione predefinita, il tema Storefront sottolinea i collegamenti e, se desideri rimuoverli, vai su Personalizza, quindi Sezione CSS aggiuntivo e aggiungi le seguenti righe:

 un {

decorazione del testo: nessuna !importante;

}

Ecco il risultato: Come rimuovere la sottolineatura dai collegamenti ipertestuali

25. Come modificare il colore delle linee orizzontali sulla home page di Storefront

Aggiungi semplicemente il seguente codice al file custom.css del tuo tema figlio:

 .page-template-template-homepage .hentry .entry-header,

.page-template-template-homepage .hentry,

.page-template-template-homepage .storefront-product-section {

colore del bordo: rosso;

}

26. Come personalizzare il badge Storefront WooCommerce in vendita

Aggiungi semplicemente il seguente codice alla tua sezione CSS aggiuntivo:

 .in vendita {

colore di sfondo: #FFFFFF;

colore bordo: #FF0000;

colore: #FF0000;

}

Ecco il risultato: Come personalizzare il badge WooCommerce in vendita di Storefront

27. Come modificare l'altezza del piè di pagina del negozio WooCommerce

È molto facile modificare l'altezza del piè di pagina di WooCommerce Storefront aggiungendo il seguente codice CSS nella sezione CSS aggiuntivo: 

 widget di sezione.footer {

imbottitura superiore: 25px;

}

div.site-info {

imbottitura superiore: 16px;

imbottitura-fondo: 25px;

}

Ecco il risultato: Come modificare l'altezza del piè di pagina della vetrina di WooCommerce

28. Aggiunta di un'immagine di sfondo alla vetrina di una particolare sezione della home page

Il tema Storefront predefinito ha sei sezioni, ovvero categorie di prodotti, prodotti recenti, prodotti in primo piano, prodotti popolari, prodotti in vendita e prodotti più venduti. Aggiungi semplicemente il seguente codice alla sezione CSS aggiuntivo:

 .prodotti in vetrina{

background-image: url(Aggiungi il tuo URL qui);

posizione di sfondo: centro centro;

background-repeat: no-repeat;

dimensione dello sfondo: copertina;

-o-dimensione-sfondo: copertina;

}

Ecco il risultato: Aggiunta di un'immagine di sfondo alla vetrina di una particolare sezione della home page

29. Aggiunta del colore di sfondo alle sezioni della home page di Storefront

Per fare ciò, devi prima identificare la sezione a cui vuoi aggiungere il colore. Questo può essere fatto facilmente aggiungendo il seguente codice alla sezione CSS aggiuntivo:

 .prodotti in vetrina{

colore di sfondo:#FFEB3B;

}

Ecco il risultato: Aggiunta del colore di sfondo alle sezioni della home page di Storefront

30. Come rimuovere o nascondere il titolo della sezione della home page

Per fare ciò devi prima identificare la sezione che vuoi rimuovere o nascondere. Questo può essere fatto aggiungendo il seguente codice alla sezione CSS aggiuntivo:

 .storefront-recent-products .section-title {display:none;}

.storefront-product-categories .section-title {display:none;}

.storefront-featured-products .section-title {display:none;}

.storefront-popular-products .section-title {display:none;}

.storefront-on-sale-products .section-title {display:none;}

.storefront-best-seller-products .section-title {display:none;}

Ecco il risultato: Come rimuovere o nascondere il titolo della sezione della home page

31. Come cambiare il colore di sfondo dei prodotti in vendita

Questo può essere fatto aggiungendo il seguente codice alla sezione CSS aggiuntivo:

 .negozio di prodotti in vendita{

colore di sfondo:#FFEB3B;

}

Ecco il risultato: Come cambiare il colore di sfondo dei prodotti in vendita

32. Come aggiungere automaticamente spazio nell'intestazione per le pagine senza titolo

Ogni volta che disabiliti il ​​titolo della pagina principale per qualsiasi pagina, non c'è più spazio sotto l'intestazione. Questo frammento di codice ti aiuterà ad aggiungere la spaziatura per inserire un dispositivo di scorrimento, un'immagine o altri contenuti che si allineano in alto. Aggiungi il codice seguente alla sezione CSS aggiuntivo:

 body.page-header-disabled #main {

imbottitura superiore: 30px;

}

Ecco il risultato: Come aggiungere automaticamente spazio sotto l'intestazione per le pagine senza titolo

33. Come nascondere il pulsante Scorri verso l'alto sul cellulare

 Aggiungi semplicemente il seguente codice alla sezione CSS aggiuntivo:

Schermo solo @media e (larghezza massima: 959px) {

#site-scroll-top { display: nessuno !important; }

}

Ecco il risultato: Come nascondere il pulsante Scorri verso l'alto sul dispositivo mobile

Conclusione

Ho condiviso alcuni suggerimenti CSS in questa guida che puoi utilizzare per definire lo stile del tema Storefront. Consiglio vivamente di aggiungere le regole CSS nella sezione CSS aggiuntivo in modo da poter visualizzare in anteprima le modifiche in tempo reale. L'anteprima delle modifiche ti consentirà di modificare la regola in base alle tue specifiche.

Per aggiungere la regola, copia/incolla nella sezione " CSS aggiuntivo " dell'interfaccia di personalizzazione del tema di Storefront. Per farlo:

  • Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
  • Dal menu Dashboard, fai clic su Menu Aspetto > Personalizza .
  • Passa a CSS aggiuntivo nella barra laterale sinistra che appare.
  • Aggiungi la regola CSS.
  • Se sei soddisfatto delle modifiche, fai clic su Pubblica.

Tuttavia, è essenziale notare che i suggerimenti CSS condivisi qui funzionano solo per il tema Storefront.

Articoli simili

  1. Come regolare l'altezza dell'intestazione del negozio WooCommerce
  2. Come impostare la home page in WooCommerce Storefront
  3. Come aggiungere il menu delle opzioni di logout WooCommerce Storefront Theme [Esempio]
  4. Come modificare lo slogan del tema della vetrina WooCommerce
  5. Come modificare il tema della vetrina del negozio della dimensione del carattere del menu principale
  6. WooCommerce Storefront Header Guida alla personalizzazione CSS
  7. Vetrina WooCommerce Mostra tutte le categorie sulla home page
  8. Come modificare le dimensioni del tema della vetrina del pulsante del menu mobile
  9. Come cambiare il colore del menu WooCommerce Storefront
  10. Come modificare l'altezza del piè di pagina della vetrina di WooCommerce
  11. Come rimuovere il tema del piè di pagina Storefront WooCommerce
  12. Come modificare la dimensione del titolo del sito WooCommerce Storefront Theme
  13. Come rimuovere l'intestazione WooCommerce Storefront Theme
  14. Personalizzazione della home page del tema WooCommerce Storefront [Guida definitiva]
  15. Come modificare la dimensione dell'immagine in primo piano della vetrina di WooCommerce
  16. Come rendere scorrevole il menu Divi Mobile Soluzione di correzione rapida
  17. Come nascondere il tema della vetrina di WooCommerce per la categoria
  18. Come modificare la dimensione dell'icona del carrello nel tema WooCommerce Storefront
  19. Come rimuovere il tema WooCommerce Storefront di prodotti correlati
  20. Come nascondere i migliori venditori WooCommerce Storefront Frontpage