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!
Sommario
1 Disabilitare tutti gli stili predefiniti |
2 Disabilitare selettivamente gli stili predefiniti |
3 Concludendo |
4 Commenti |
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: