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:
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”:
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
:
Voilà, vous avez maintenant toutes les cartes en mains pour personnaliser votre boutique et ses catégories comme bon vous semble!
source: Business Bloomer