Ce titre ne vous parle peut-être pas énormément mais ce snippet pourrait apporter beaucoup à votre boutique en ligne.

Ce que l’on va faire ici est ajouter une classe CSS différente par catégorie de produit à la balise <body> de notre page.

À quoi ça sert me direz-vous?

La balise HTML <body></body> est la balise englobant le contenu de votre page. Cela va donc nous permettre de modifier par exemple totalement le design suivant les catégories:

  • changer la couleur de fond,
  • modifier la police,
  • modifier les couleurs des textes…

Vous allez donc pouvoir personnaliser totalement votre boutique WooCommerce !

Pour ceci, commencez par copier-coller le code suivant dans le fichier functions.php de votre thème enfant:

/* Ajouter la catégorie produit aux class CSS de la balise body */

add_filter( 'body_class', 'wpm_wc_product_cats_css_body_class' );
 
function wpm_wc_product_cats_css_body_class( $classes ){

// On récupère les catégorie de produits 
if( is_singular( 'product' ) )
  {
	$custom_terms = get_the_terms(0, 'product_cat');
    if ($custom_terms) {
// On boucle sur les catégories de produits
      foreach ($custom_terms as $custom_term) {
//On ajoute une classe par catégorie de produits de la forme product_cat_catégorieproduit
        $classes[] = 'product_cat_' . $custom_term->slug;
      }
    }
}
  return $classes;
}

Et pour vérifier que ça marche, regardez par exemple les catégories du produit suivant.

Nous utilisons ici les données de tests fournis directement avec WooCommerce.

Ce sont “Clothing” et “T-shirts”:

catégories produit woocommerce

Nous pouvons voir qu’elles sont bien présentes dans la balise <body> de notre page dans l’inspecteur de code de Google Chrome en faisant un clic droit sur la page puis Inspecter:

catégories produits body

Voilà, vous avez maintenant toutes les cartes en mains pour personnaliser votre boutique et ses catégories comme bon vous semble!

source: Business Bloomer