Home>Snippets>Come disabilitare gli stili predefiniti di WooCommerce

Come disabilitare gli stili predefiniti di WooCommerce


Come disabilitare gli stili predefiniti di WooCommerce


WooCommerce aggiunge i propri stylesheet di default, per dare uno stile predefinito alle proprie pagine. Ma per quelli che volessero cimentarsi nella creazione di un tema personalizzato per WooCommerce, la cosa risulta spesso fastidiosa in quanto crea conflitti e comportamenti non previsti. Ecco quindi un utile suggerimento per prepararsi il terreno.

  • Leggi l'articolo, ti bastano solo 1 minuto, 12 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Disabilitare tutti gli stili predefiniti

Per eliminare completamente tutti gli stylesheet di WooCommerce, è sufficiente modificare il file:

wp-content/themes/{nome_del_tema}/functions.php

che trovi nello spazio FTP del tuo sito, ed inserire il seguente codice:

// Disabilito gli stili di default
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

ed otterrai un layout “pulito” da cui iniziare le tue personalizzazioni grafiche.


Disabilitare selettivamente gli stili predefiniti

Se invece preferisci eliminare solamente uno degli stili predefiniti richiamati da WooCommerce, puoi utilizzare il codice:

// Disabilita gli stili di default singolarmente
add_filter( 'woocommerce_enqueue_styles', function( $enqueue_styles ) {
	unset( $enqueue_styles['woocommerce-general'] );
	unset( $enqueue_styles['woocommerce-layout'] );
	unset( $enqueue_styles['woocommerce-smallscreen'] );
	return $enqueue_styles;
} );

da inserire sempre nel file:

wp-content/themes/{nome_del_tema}/functions.php

che trovi nello spazio FTP del tuo sito.

Naturalmente, puoi scegliere quale dei tre fogli di stile lasciare invariato semplicemente cancellando la relativa riga nel precedente codice (la funzione unset(), infatti, serve per rimuovere lo stile dall’elenco di quelli che verranno caricati).

I tre fogli di stile, come da definizione dello stesso WooCommerce, servono per:

  • woocommerce-general: gestisce l’aspetto generale delle sezioni dei negozi WooCommerce
  • woocommerce-layout: applica il layout predefinito al design di frontend di WooCommerce
  • woocommerce-smallscreen: ottimizza il layout predefinito di frontend di WooCommerce quando viene visualizzato su schermi più piccoli

Concludendo

Adesso, puoi provare a cimentarti nella creazione del tuo tema personalizzato senza alcuna interferenza!

Se non sai come fare a creare un tema personalizzato, ma vorresti imparare a farlo, forse questo corso potrebbe fare al caso tuo:




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Ottenere la lista dei prodotti più venduti in Magento

Ottenere la lista dei prodotti più venduti in Magento


Personalizza il tuo e-commerce Magento con una funzione davvero utile che ti permette di ottenere la lista dei bestsellers del tuo negozio.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)