Personnalisation du thème
Personnalisez le design de votre boutique WooCommerce en ligne sans toucher au code grâce au Customizer et aux page builders.
Besoin d'un développement custom pour WooCommerce ? Notre agence web crée des boutiques sur mesure. Contactez-nous.
Dans ce guide :
Recommandation - Utilisez des outils sans-code comme le Customizer ou Elementor avant de passer au CSS personnalisé. La simplicité garantit la maintenabilité.
WordPress customizer
C'est l'outil natif de WordPress pour la personnalisation visuelle en temps réel.
Accéder au customizer
Le menu Apparence > Personnaliser ouvre le Customizer.
L'interface est divisée en deux parties : la sidebar gauche contient les options et la preview droite affiche le site en direct.
Les modifications sont visibles instantanément dans la preview. Cliquez sur Publier pour appliquer les changements au site public.
Options disponibles
Les options varient selon le thème, mais les standards incluent :
Identité du site - Vous pouvez configurer le logo, le titre du site, le slogan et l'icône favicon.
Uploadez un logo professionnel (fichier PNG transparent, 200 à 300px de large). Il remplace le texte générique "Nom du Site".
Couleurs - Vous définissez la palette du site (couleur primaire, secondaire, liens, textes).
Choisissez des couleurs cohérentes avec votre marque. Évitez d'utiliser 10 couleurs (c'est visuellement chaotique). 2 à 3 couleurs suffisent.
Typographie - Vous sélectionnez les polices pour les titres et le corps du texte (si le thème le supporte).
Les Google Fonts sont intégrées dans la plupart des thèmes modernes. Choisissez une police lisible et professionnelle comme Roboto, Open Sans ou Montserrat.
Menus - Vous gérez la navigation principale, le footer et le menu mobile.
Créez un menu dans Apparence > Menus, puis assignez-le à un emplacement dans le Customizer.
Widgets - Vous ajoutez des blocs dans la sidebar et le footer (recherche, catégories, promotions).
Homepage Settings - Choisissez entre une page statique ou des articles de blog. Pour l'e-commerce, utilisez une page statique pour afficher votre catalogue.
WooCommerce (si le thème est compatible) - Vous configurez les couleurs des boutons, le layout des produits et le nombre de colonnes.
Explorez tous les onglets et ajustez les paramètres selon votre marque.
Page builders 🔺
Ce sont des constructeurs de pages drag-and-drop qui ne nécessitent aucun code.
Avertissement : Séduisants de prime abord, méfiez-vous des page builders. Ils ont tendance à ralentir les sites, et en cas de problème vous aurez du mal à en identifier la cause. Vous voilà prévenu !
Elementor
C'est le page builder numéro 1 avec plus de 10 millions d'installations. La version gratuite couvre les besoins basiques, la version Pro coûte 59$/an.
Fonctionnalités :
- Interface drag-and-drop WYSIWYG
- Plus de 100 widgets disponibles (titres, images, boutons, colonnes, vidéos)
- Templates pré-faits pour landing pages et sections
- Édition responsive avec des vues séparées desktop/tablet/mobile
- Intégration WooCommerce avec grilles de produits et checkout personnalisé
Installation :
- Allez dans Extensions > Ajouter > "Elementor"
- Activez le plugin
- Sur la page souhaitée, cliquez sur Pages > Modifier avec Elementor
L'interface drag-and-drop est intuitive. Glissez les widgets, éditez les textes et les images, puis publiez.
La version Pro ajoute : Theme Builder pour créer des headers et footers personnalisés, un popup builder et un WooCommerce builder avancé.
Recommandation : La version gratuite est excellente pour démarrer. Passez à la Pro si vous avez besoin de personnaliser les headers et footers.
Divi builder
C'est une alternative premium à 89$/an chez Elegant Themes, qui donne accès à tous leurs thèmes et plugins.
L'interface est similaire à Elementor. C'est un visual builder drag-and-drop avec des modules pré-faits et des layouts sauvegardables.
L'avantage est que le thème Divi est inclus et qu'il est très populaire pour l'e-commerce.
L'inconvénient est que c'est une solution propriétaire : si vous changez de thème à l'avenir, vous devrez refaire toutes vos pages.
Wpbakery (visual composer)
C'était l'ancien leader du marché, mais il décline. L'interface est complexe et datée.
Évitez-le si vous démarrez un nouveau projet. Elementor et Divi sont supérieurs.
Gutenberg (éditeur blocs wordpress)
C'est l'éditeur natif de WordPress depuis la version 5.0. Il propose des blocs à glisser-déposer.
L'éditeur est basique mais il s'améliore constamment. Il est gratuit, natif et léger.
Il est parfait pour du contenu simple. En revanche, il est insuffisant pour des layouts complexes (Elementor est meilleur dans ce cas).
Thèmes enfants 🔺
Les thèmes enfants vous permettent de modifier votre thème sans perdre vos changements lors des mises à jour du thème parent.
Pourquoi utiliser un thème enfant ?
Le problème : Si vous modifiez les fichiers du thème directement, une mise à jour du thème écrase toutes vos modifications. Votre travail est perdu.
La solution : Un thème enfant hérite du thème parent mais vos modifications restent isolées. Quand vous mettez à jour le thème parent, le thème enfant est préservé.
Créer un thème enfant
Le plugin "Child Theme Configurator" (gratuit) génère un thème enfant en 1 clic.
Procédure :
- Installez Child Theme Configurator
- Allez dans Outils > Child Themes
- Sélectionnez le thème parent (Storefront, Astra, etc.)
- Cliquez sur Créer nouveau thème enfant
- Nommez-le (par exemple "Storefront Child")
- Cliquez sur Créer
- Allez dans Apparence > Thèmes > Activer pour activer le thème enfant
Le thème enfant est maintenant actif et hérite du thème parent.
Modifications dans le thème enfant
CSS - Ajoutez vos styles dans le fichier style.css du thème enfant (il écrase celui du parent).
Templates - Copiez un template du parent (comme single-product.php) vers le thème enfant et modifiez-le. La version du thème enfant sera utilisée.
Functions - Le fichier functions.php du thème enfant vous permet d'ajouter des hooks et des filters sans toucher au parent.
Les mises à jour du parent sont sécurisées et le thème enfant reste intact.
CSS personnalisé 🔺
Le CSS personnalisé vous permet de réaliser des ajustements visuels fins.
CSS additionnel du customizer
Le menu Apparence > Personnaliser > CSS Additionnel offre un champ texte pour ajouter du CSS directement.
Exemple : Pour changer la couleur du bouton "Ajouter au panier" :
.single_add_to_cart_button {
background-color: #ff6600 !important;
color: #ffffff !important;
}
La preview s'affiche en temps réel. Cliquez sur Publier pour appliquer les changements.
Avantages :
- C'est rapide à mettre en place
- Les modifications sont préservées lors des updates du thème (si vous utilisez un thème enfant)
- Vous n'avez pas besoin d'accéder au FTP
Limitations :
- Convient uniquement aux modifications mineures
- Cela devient ingérable si vous avez 500+ lignes de CSS
Inspecteur du navigateur
L'inspecteur vous aide à trouver les sélecteurs CSS à modifier.
Dans Chrome ou Firefox :
- Faites un clic droit sur l'élément à modifier
- Cliquez sur Inspecter
- Les DevTools affichent le code HTML et le CSS appliqué
- Identifiez la classe ou l'ID (par exemple
.product-title) - Copiez le sélecteur et utilisez-le dans le CSS Additionnel
Vous pouvez modifier le CSS directement dans les DevTools pour tester en direct, puis copier le CSS fonctionnel vers votre site.
Classes CSS courantes WooCommerce
Produits :
.products- Grille produits.product- Item produit individuel.product-title- Titre produit.price- Prix.sale- Badge "Promo"
Boutons :
.button,.add_to_cart_button- Boutons généraux.checkout-button- Bouton checkout
Panier :
.cart_totals- Récapitulatif panier.woocommerce-cart-form- Formulaire panier
Consultez la documentation de votre thème pour obtenir la liste complète.
Responsive design 🔺
Votre site doit fonctionner correctement sur mobile, tablette et desktop.
Tester le responsive
Avec les Chrome DevTools :
- Appuyez sur F12 puis activez le Toggle device toolbar (icône mobile/tablet)
- Sélectionnez un appareil (iPhone, iPad, etc.)
- Naviguez sur votre site et vérifiez le layout
Le Responsive Design Checker (gratuit en ligne sur responsivedesignchecker.com) vous permet de tester plusieurs résolutions simultanément.
Media queries CSS
Les media queries vous permettent d'ajuster les styles selon la taille de l'écran.
Exemple : Un titre gros sur desktop, plus petit sur mobile :
/* Desktop */
.product-title {
font-size: 32px;
}
/* Tablet */
@media (max-width: 768px) {
.product-title {
font-size: 24px;
}
}
/* Mobile */
@media (max-width: 480px) {
.product-title {
font-size: 18px;
}
}
Problèmes courants sur mobile
Texte trop petit - Un font-size inférieur à 14px est illisible. Utilisez un minimum de 16px sur mobile.
Boutons trop petits - Les doigts sont moins précis que la souris. Les boutons doivent faire minimum 44×44px.
Images qui débordent - Ajoutez max-width: 100%; height: auto; à vos images pour éviter qu'elles dépassent de l'écran.
Menu de navigation - Utilisez un menu hamburger (☰) sur mobile au lieu du menu horizontal du desktop.
Les thèmes modernes comme Storefront ou Astra gèrent le responsive automatiquement. Vérifiez quand même que tout fonctionne correctement.
En résumé
Personnalisez votre thème WooCommerce via le Customizer WordPress pour les ajustements visuels (couleurs, polices, logos) sans toucher au code. Utilisez un thème enfant obligatoirement si vous modifiez des fichiers de template (évite de perdre vos modifications lors des mises à jour). Pour les personnalisations complexes, préférez Elementor Pro ou WooBuilder qui offrent des éditeurs visuels puissants sans coder. Optimisez la navigation en créant des menus clairs, des filtres produits et une recherche performante. Testez systématiquement la compatibilité mobile car plus de 60% du trafic e-commerce provient des smartphones.
Prochaines étapes 🔺
- Code Personnalisé - Développement custom
- Extensions Recommandées - Sélection plugins
- Installation Extensions - Process sécurisé
- Retour Extensions - Vue d'ensemble
Navigation : ← Installation Extensions | Personnalisation Thème | Suivant : Code Personnalisé →