Lors du développement de sites e-commerce à l’aide de WooCommerce nous avons souvent fait face à une décision compliquée à prendre : Doit-on « transformer » le style existant imposé par les divers fichiers CSS qui viennent avec WooCommerce ou doit-on tenter de les retirer de notre projet ?
Nous avons plutôt tendance à nous éloigner, dans nos maquettes, du style de base de WooCommerce. Paradoxalement, nous avons mis beaucoup de temps à oser retirer ces fichiers de styles imposés. Pourtant, les fichiers CSS déjà créés par WooCommerce ne nous facilitent pas la tâche. En effet, ceux-ci nous proposent des propriétés qui sont la plupart du temps, indésirables.
Nous avons dernièrement décidé de tenter le coup et de passer à l’acte : désactiver tous les fichiers CSS de WooCommerce pour pouvoir recréer plus librement l’univers de notre maquette.
Cela n’a généré aucun problème concernant le fonctionnement de WooCommerce et nous a permis d’entreprendre plus simplement les demandes du client en matière de design.
Comment s’y prendre :
Aller dans le fichier functions.php qui se trouve dans le répertoire de votre thème, ajoutez ensuite les lignes de codes suivantes afin de retirer proprement les CSS de WooCommerce :
add_filter( 'woocommerce_enqueue_styles', 'eltigre_dequeue_styles' );
function eltigre_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation return $enqueue_styles;
}
Recréer des propriétés CSS
Il faut maintenant que dans le même fichier functions.php, vous ajoutiez la référence à un nouveau fichier css (à créer à la racine de votre thème par exemple) où vous placerez tout ce qui est lié à WooCommerce :
add_action( 'wp_enqueue_scripts', 'eltigre_woocommerce_css' );
function eltigre_woocommerce_css() {
wp_enqueue_style( 'eltigre-woocommerce', get_template_directory_uri() . '/woocommerce.css' );
}
Conclusion
Cette manipulation est, je pense à réaliser à chaque début de projet WooCommerce. Elle permet de mieux clarifier quel fichier CSS fait quoi et de tout centraliser au sein de votre thème. N’oubliez pas de bien scinder le style entre celui des pages communes (style.css) et celui des pages liées à WooCoomerce (votre woocommerce.css).