Mise à jour de l’article le 06/05/2025 : J’ai mis à jour les plugins de l’article et des astuces bonus dans l’article !
WooCommerce est vraiment une solution e-commerce facile à mettre en place et très complète, avec de nombreuses options. Cependant, selon votre thème WordPress, certaines modifications peuvent être assez compliquées à réaliser, comme changer des textes, des couleurs de boutons, etc. Voici comment personnaliser votre site e-commerce sans toucher une ligne de code !
Pourquoi personnaliser WooCommerce ?
Les fonctionnalités de base présentes dans l’extension WordPress sont tout à fait adaptées à une utilisation e-commerce. Toute personne utilisant ce plugin aura les mêmes options que vous sur son site. L’objectif est de vous démarquer, mais pas seulement !
Selon les produits que vous vendez, vous aurez besoin d’un affichage particulier sur votre site internet. Un exemple très simple : si vous proposez de la personnalisation de produit, le texte du call to action “Ajouter au panier” pourrait être modifié en “Je commande ma personnalisation”.
Cet article a pour but de vous offrir plus de liberté face à la personnalisation de votre site e-commerce.
En parallèle, vous pouvez lire deux articles : les shortcodes de WooCommerce et Créer des filtres produit sur WooCommerce pour améliorer votre boutique en ligne.
WooCommerce Customizer, plugin gratuit !
Ce plugin permet de personnaliser vos textes. Vous pouvez traduire le bouton “Ajouter au panier”, que ce soit pour un produit simple ou variable, traduire le bandeau “promo”, le bloc de code de réduction dans le panier, etc.
Il est très simple à utiliser et pas du tout compliqué. Il s’affiche dans les réglages de WooCommerce, dans un nouvel onglet, après installation.
Changez les couleurs par défaut de Woocommerce et bien plus !
Voici un petit plugin avec juste quelques options mais il est très efficace !
Nativement le cms embarque un code couleur selon votre thème et le but est de pouvoir adapter la partie e-commerce de votre WordPress à la charte graphique de votre site. En plus de cela, le plugin est gratuit et pas très lourd à installer.
Petite info pour l’avoir testé, une fois installé, vous devez aller dans apparence -> personnaliser pour voir les options du plugin “StoreCustomizer – A plugin to Customize all WooCommerce Pages”.
Attention, je préviens que lors de tests, j’avais des options de changement de couleur liées à mon thème et, du coup, celles du plugin ne fonctionnaient pas. Donc, faites attention au thème que vous utilisez. Peut-être qu’il a déjà des options, en tout cas pour les couleurs.
Personnaliser d’autres options de WooCommerce
Le plugin ne se contente pas de modifier les couleurs. Il permet également, par exemple, de changer la taille de la typographie des titres ou des boutons.
De plus, il inclut d’autres fonctionnalités, telles que la possibilité de masquer le fil d’Ariane ou d’ajouter un bouton de retour à un endroit précis sur votre site. Il est même possible de supprimer certaines sections, comme par exemple la recommandation de produits sur la fiche produit.
Les options de personnalisation sont aussi nombreuses sur la page produit que sur la page catégorie de WooCommerce.
Il y a tellement d’options de mise en page et de modifications disponibles avec ce plugin, même en version gratuite, que je ne peux pas toutes les citer ici. Je vous invite à consulter sa page sur WordPress ou à le tester sur votre site.
Affichez des éléments WooCommerce n’importe où sur votre site !
Vous avez besoin d’afficher sur la page d’accueil les derniers avis de vos clients ? Aucun problème !
Désormais, vous pouvez ajouter depuis votre éditeur de page n’importe quel élément appartenant à WooCommerce. Cette option (voir capture ci-dessous) est intégrée directement dans les dernières versions de WordPress.
Vous pouvez maintenant afficher des produits dans vos articles de blog, par exemple, ce qui est idéal si vous écrivez quelque chose concernant un produit en particulier.
Si cette option n’est pas disponible sur votre installation, il existe un plugin qui fonctionne avec l’éditeur Gutenberg. Cependant, il ne se contente pas d’ajouter des blocs dans WordPress, il ajoute également énormément de fonctionnalités de personnalisation que je survole dans cet article. Je trouve que c’est un peu une usine à gaz. Cependant, étant donné le nombre de fonctionnalités, il peut vous aider à personnaliser facilement votre boutique.
Personnaliser la page mon compte de WooCommerce
Les pages de compte client ne sont pas du tout modifiables depuis le back-office.
Avec ce plugin gratuit, vous pourrez gérer les différents éléments que vous souhaitez mettre à disposition dans le compte de vos clients. Il se nomme SysBasics Customize My Account for WooCommerce. Vous pouvez également choisir l’ordre d’affichage des éléments dans le menu et ajouter un avatar.
Lors de mes tests, j’ai constaté des dysfonctionnements avec le thème WordPress Proteo. Étant donné que ce thème utilise une mise en page particulière pour la page du compte client WooCommerce, cela entre en conflit avec ce plugin. Assurez-vous de bien tester vos plugins avec votre thème.
Pour aller plus loin dans la modification de la page “Mon compte”, vous pouvez utiliser un plugin premium qui permet de faire énormément de choses : Yith WooCommerce customize my account page
Modifier la page commande de WooCommerce
L’optimisation des ventes peut également se faire sur le tunnel de vente, et plus particulièrement sur les champs demandés lors de l’inscription. Plus vous demandez d’informations (et de champs obligatoires), plus le client mettra du temps à terminer sa commande, ce qui augmente le risque d’abandon.
Avec WooCommerce Checkout Manager, vous pourrez personnaliser les champs du tunnel de commande de WooCommerce. Vous pourrez définir ceux qui sont obligatoires, ceux à ne pas afficher, ajouter de nouveaux champs, etc. C’est vraiment idéal de pouvoir personnaliser les champs à remplir en fonction de son activité.
Lors de mes recherches, j’ai également trouvé un autre plugin gratuit qui permet l’édition des champs client dans WooCommerce, il s’appelle Checkout Field Manager for WooCommerce. Vous avez le choix entre ces deux plugins pour améliorer cette section.
Ajouter un panier fixe sur votre boutique Woocommerce
Petite astuce avec un plugin gratuit, vous pouvez ajouter un bouton fixe panier sur votre site internet qui va afficher le détail panier.
Cela évite au client d’avoir plusieurs pages à visiter. On passe de l’ajout au panier directement à la page de commande, sans passer par la page “Panier” de WooCommerce.
Afficher des couleurs pour les variations WooCommerce
C’est quelque chose d’assez basique en e-commerce. Lorsqu’on vend des produits avec des déclinaisons, notamment des couleurs, il est important de pouvoir visualiser la couleur sélectionnée.
Avec ce plugin gratuit, vous pouvez en quelques minutes afficher des blocs de couleurs à la place d’un select ou d’une checkbox pour vos variations WooCommerce, tout en choisissant un code hexadécimal. Cela vous permet ensuite d’afficher la couleur exacte que vous souhaitez.
Le client pourra cliquer sur un petit cercle de couleur pour sélectionner la variation de son choix. Vous pouvez également personnaliser la bordure autour de la sélection de la variation, ainsi que sa taille.
Importez vos produits en masse dans WooCommerce
Avec un fichier CSV, vous pouvez importer autant de produits que vous le souhaitez dans votre WooCommerce. Plus besoin de créer chaque élément un par un depuis le back-office, vous allez gagner énormément de temps !
J’ai réalisé un tutoriel vidéo sur YouTube, je vous invite à la regarder et à vous abonner à ma chaîne.
Votre site WooCommerce est prêt ? Il vous faut du trafic maintenant !
Une fois que votre site e-commerce est fonctionnel, il est nécessaire d’acquérir du trafic pour le développer. Vous allez créer du contenu pour votre site et l’optimiser pour Google. Nous rêvons tous d’un site avec du trafic “gratuit” grâce à notre positionnement sur des mots-clés Google.
C’est un domaine qui n’est pas si simple, car il faut mettre en place plusieurs actions pour vraiment optimiser le référencement naturel de votre site.
Olivier Clémence a écrit un excellent article de blog sur le référencement naturel en e-commerce. Je mets l’accent sur la partie e-commerce, car vous trouverez souvent des ressources plus adaptées à un simple site vitrine. Voici le lien : https://www.reussir-mon-ecommerce.fr/referencement-ecommerce/.
Le meilleur plugin SEO WooCommerce
Depuis maintenant plusieurs années, j’utilise SEOPress comme extension pour gérer le référencement naturel de mon site et celui de mes clients. Juste la version gratuite offre beaucoup de fonctionnalités. Pour moi, c’est vraiment le meilleur qui existe et en plus, Cocorico, c’est français.
En version pro, vous avez des options spécifiques à WooCommerce :
- Plan de site XML des produits
- Schéma des extraits produits
- Google Analytics e-commerce
- Noindex sur pages mon compte
- etc…
Maintenant, vendez plus sur WooCommerce !
Voilà ! J’espère que ces plugins vous seront utiles pour personnaliser et améliorer votre site e-commerce WordPress. En utilisant ces outils, vous pourrez vraiment optimiser l’expérience de vos utilisateurs et rendre votre boutique plus performante.
Si vous utilisez d’autres plugins de ce genre qui vous ont aidé dans vos projets, n’hésitez pas à partager vos suggestions en laissant un commentaire ci-dessous. Cela pourra grandement aider la communauté et enrichir les choix d’extensions pour chacun !
Pour améliorer encore votre boutique Woo, je vous conseil d’autres de mes articles blog :
- Proposer des cartes cadeaux sur WooCommerce
- La relance panier abandonnée sur WooCommerce
- Comment faire du B2B sur WooCommerce
Merci pour ses astuces !
David.
Au plaisir !
bonjour je suis entrain de créer ma boutique enligne, cependant le fait de voir lorsque j’arrive au niveau du panier certains mots ecrit en anglais ( product , quantity , price etc ) comment faire pour changer et mettre en Français svp
Bonjour,
Utilisez le plugin Loco Translate, c’est gratuit.
Si vous voulez quelque chose de premium, il y a WPML
Ok merci pour votre réponse
Désolé de vous déranger de nouveau
Comment faire pour exemple
Un produit coûte 4 € de base
Et lorsque la personne ajoute un supplément de 0,50€ par exemple cela ce calcule pour donner 4,50€ au paiement final
Je sais que il faut faire variable et tout mais bon je suis perdu
Vous avez déjà posé cette question sur Youtube, voici ma réponse :
Vous devriez regarder du côté de ce plugin : Extra Fees Plugin for WooCommerce
Bonjour,
Mon site vend des produits personnalisables mais je n’arrive pas à ajouter un module sur la page produit pour que le client puisse écrire les détails avant de l’ajouter au panier. Il faudrait que je puisse avoir un petit commentaire de sa part dans sa commande avec ce qu’il a choisi, avez-vous une solution pour m’aider ?
Merci 🙂
La solution la plus simple est d’utiliser le champ infos complémentaires dans le panier.
Cependant si on veut ajouter un champ sur le produit (donc avant l’ajout au panier) il faut utiliser un plugin ou faire un développement.
Testez ce plugin gratuit : https://wordpress.org/plugins/product-input-fields-for-woocommerce/
Sinon 2 plugins complets permettent de faire pas mal de chose : 1.envato.market/Kbg2N / 1.envato.market/zMRXr
Bonjour tout le monde, je travail actuellement sur un site sous WordPress fait uniquement avec elementor, et j’aimerai faire en sorte que les avis woocommerces soient dans une div que je puisse modifier, cependant je n’y arrive pas étant donné que les avis sont directement gérés via WooCommerce…une idée de comment je pourrais procéder ? Merci de vos conseils Matthieu
Nativement les avis Woocommerce sont uniquement liés à un produit en particulier.
Il est donc difficile d’extraire des avis de produits pour les afficher ailleurs (sauf si vous avez un plugin particulier)
Il faudrait voir pour utiliser un module permettant d’afficher les avis sous forme de shortcode à placer n’importe où comme celui-ci.
Vous devriez trouver des infos chez wpmarmite.com, ils sont expert sur Elementor !
Salut et merci beaucoup pour tes conseils dans cet article, cela va m’aider à personnaliser la boutique WooCommerce que je suis entrain de créer.
Bonjour,
Je n’arrive pas à modifier les produits avec woo commerce AVADA “Bakery theme”
Dans l’ensemble du site avec FUSION BUILDER, je peux modifier sans problème
Mais quand je suis dans les produits pour modifier j’ai un pavé de code codage absolument incompréhensible.
Comment cela se fait-il ?
Merci pour votre retour,
Bonjour,
Je ne suis pas expert sur Avada, il faudrait regarder plus en détail votre problème.
Si Avada ne s’affiche plus sur les produits, testez de regarder dans le fusion builder > réglage si le constructeur de page de Avada est bien sélectionne pour les produits.
S’il n’est pas coché, alors Worpdress affiche l’éditeur classique et donc les anciens shortcodes du constructeur de page
Matthieu,
Merci pour votre réactivité !
En plus c’était exactement ce qu’il fallait faire, plusieurs étaient décochées.
Du coup, c’est rentré dans l’ordre !
merci beaucoup,
Hello,
J’ai un souci avec WOOCOMMERCE CUSTOMIZER, le problème c’est que ça ne fonctionne pas avec les produits réservables, créés avec les pluggins de booking…
Si jamais tu as une astuce pour ça !
Merci a toi !
Bonjour,
C’est un problème de compatibilité entre les modules.
Il faudrait voir avec un des développeurs des 2 plugins, s’ils ont la possibilité d’intervenir sur votre site pour corriger les problèmes.
Les plugins de booking ou thèmes vont utiliser des styles propres à eux (ou des fonctions) et donc Customizer ne peut pas faire de “surcouche” par dessus ce genre de plugin.
Bonjour,
J’ai une boutique woocommerce avec le thème Astra et Elementor et dans la partie notification de la boutique woocommerce, si je l’active, je n’arrive pas a changer ni la couleur ni la taille de la bande?
Auriez-vous une solution?
Merci d’avance.
Si vous activez quoi ?
Dans la partie personnaliser du thème astra a une partie WooCommerce et après une partie notification de la boutique et dans cette partie je n’arrive pas à changer ni la taille ni la couleur. Cette partie de la notification de la boutique c’est pour avoir un texte(promotion ou livraison offerte ou black friday) sur tout le site, haut de chaque page… je ne sais pas le nom exact…🤷♂️
Je ne sais pas si je me suis fait comprendre!?!?
Désolé mais je ne suis pas un expert de l’informatique…
Merci d’avance 😉
Du coup ce n’est pas avec un plugin de cet article ?
Vous devez avoir une erreur Javascript sur votre thème, je vous conseille de contacter les développeurs du thème astra (avec l’achat de ce template vous avez toujours une partie support).
Sinon faire appel à un professionnel pour essayer de débloquer votre thème
Bonjour,
Savez-vous comment on peut enlever “sous-total” dans les pages panier et checkout (woocommerce avec astra et elementor) ?
Vous ne pouvez pas le gérer.
le mieux est de le masquer en CSS :
.cart-subtotal {
display: none
}
Ok. Merci beaucoup pour votre réponse (rapide en plus 👍🏻)
Bonjour, pour ma part c’est le terme “Étiquette” que j’aimerais remplacer par “Région”
Utilisez un plugin de traduction sinon il faudrait créer une taxonomy région.
Les étiquettes ce sont des éléments natif dans WordPress.
Vous pouvez sinon voir pour gérer avec des catégories
Merci mais je ne trouve pas la traduction quand je modifie le .po ou mo rien ne change
sinon comment faire pour créer une taxinomy ?
cordialement
P. vermander
Il faut toucher au code et ensuite faire l’intégration dans votre thème, c’est un peu de boulot.
Recherchez un plugin qui peut faire cela je pense
Merci Matthieu, mais je ne connais pas de plugin de ce gernre
Cordialment Philippe
Bonjour Matthieu !
Merci pour cet article très intéressant. Sauriez vous comment réduire les bandeaux “Code promo” ou “Mettre à jour mon panier” lorsque nous arrivons sur le panier ?
Quand je dis “réduire”, je parle de la taille de la police : )
D’avance, merci pour la réponse !
Cordialement
Gauthier
Vous devez forcément le faire en CSS, ça ne sera pas administrable .
Pour la police il faut utiliser font-size.
Votre thème a peut-être un éditeur pour personnaliser CSS sans devoir se connecter à votre serveur et éditer les fichiers
Comment arranger le bouton supprimer sur la page panier, il est tellement petit
Selon votre thème le code sera différent mais il faut modifier le CSS, exemple :
<code>
.woocommerce a.remove {
font-size: 1.5em;
height: 1em;
width: 1em;
text-align: center;
color: red !important;
font-weight: 700;
border: 0;
}
</code>
Cela va dépendre aussi si votre thème le gère en icône ou pas, le code sera a adapter.