Woocommerce: Aggiungere lo stile In tema child per modificarlo

Come fare per modificare correttamente il foglio di stile di Woocommerce senza perdere le modifiche al prossimo aggiornamento del plugin per WordPress.

Nota: WooCommerce comprende diversi fogli di stile che è possibile annullare l’accodamento singolarmente o totale con una riga di codice PHP. Questo tutorial si riferisce al foglio di stile generale front-end di nome woocommerce.css.

Il file css per lo stile di woocommerce si trpva nella directory /wp-content/plugins/woocommerce/assets/css/ denominato woocommerce.css.

Si potrebbero apportare le modifiche anche direttamente da questo file ma al primo aggiornamento del plugin woocommerce andrebbero perse.

Per fare in modo che questo non accada dobbiamo trasferire il file woocommerce.css nel file del nostro tema dentro ad una cartella che nomineremo woocommerce.

E’ sempre bene non apportare mai le modifiche ad una tema originale ma lavorare su un tema child.

Ricordo che non tutti i temi dichiarano la compatibilità con Woocommerce e che per adattarlo ho già scritto un articolo: WooCommerce: modifiche per compatibilità dei temi

Una volta che abbiamo creato il nostro tema child ed abbiamo, eventualmente dichiarato la compatibilità a woocommerce (suggerisco la modalità Hooks), possiamo proseguire:

Passo 1

creiamo all’interno del tema child la cartella woocommerce.

Dentro alla cartella woocommerce copiamo il file di stile /wp-content/plugins/woocommerce/assets/css/woocommerce.css.

Passo 2

Aggiungere questo codice PHP sul file funtions.php del vostro tema child per disattivare il file generale woocommerce.css

add_filter( ‘woocommerce_enqueue_styles’, ‘dequeue_woocommerce_general_stylesheet’ );
function dequeue_woocommerce_general_stylesheet( $enqueue_styles ) {
unset( $enqueue_styles[‘woocommerce-general’] );
return $enqueue_styles;
}

Passo 3

Aggiungere questo codice PHP alla fine del file functions.php del vostro tema child

function woocommerce_style_sheet() {
wp_register_style( ‘woocommerce’, get_stylesheet_directory_uri() . ‘/woocommerce/woocommerce.css’ );
if ( class_exists( ‘woocommerce’ ) ) {
wp_enqueue_style( ‘woocommerce’ );
}
}
add_action(‘wp_enqueue_scripts’, ‘woocommerce_style_sheet’);

È tutto!

Ora è possibile modificare il CSS plugin di default senza perdere la personalizzazione quando il plugin viene aggiornato.

Nota: Ci sono anche altri file inclusi in WooCoomerce che si può anche voler copiare. Non vedrete alcuna modifica dopo aver completato questi passaggi perché il foglio di stile è stato copiato. Per verificare se sono stati disattivati ​​gli stili, è sufficiente trascinare la cartella woocommerce fuori dal tema child, oppure iniziare ad pportare le modifiche al foglio di stile.

Opzioni aggiuntive

È possibile annullare l’accodamento di tutti i fogli di stile su WooCommerce utilizzando questo codice PHP nel vostro tema child inserendo nel file functions.php il seguente codice:

add_filter( ‘woocommerce_enqueue_styles’, ‘__return_false’ );

 

Fonte originale in inglese: wpsites.net