CSS additionnel WordPress : où l’ajouter et comment changer la couleur d’un bouton

Avant d’écrire du CSS : un réglage suffit peut-être

La couleur de bouton la plus simple est celle que vous réglez sans code. Vérifiez d’abord :

• Thème à blocs : Apparence → Éditeur → Styles. Dans les réglages des blocs ou des éléments, vous trouverez les boutons et pourrez changer leur couleur de fond et de texte pour tout le site.
• Thème classique : Apparence → Personnaliser. Beaucoup de thèmes y ont une section couleurs ou boutons.
• Boutique WooCommerce : les boutons Ajouter au panier prennent en général leur couleur du thème, une modification dans les styles du thème suffit donc souvent.

Il vous faut du CSS quand cette option n’existe pas, ou quand vous voulez changer un bouton précis.

Où se trouve le CSS additionnel dans votre thème

Le CSS de l’éditeur du site et le CSS de Personnaliser sont deux endroits séparés. La note de l’équipe du cœur de WordPress sur le CSS dans les styles globaux l’explique. Si vous avez un thème à blocs mais avez un jour ajouté du CSS dans Personnaliser, il vaut la peine de tout regrouper à un endroit, pour savoir où chercher dans un an.

Comment changer la couleur d’un bouton étape par étape

1. Ouvrez la page avec le bouton, faites un clic droit dessus et choisissez Inspecter. Vous verrez la classe de l’élément, par exemple wp-block-button__link ou button.
2. Allez à l’emplacement du CSS additionnel indiqué dans le tableau ci-dessus.
3. Ajoutez une règle, par exemple :

.wp-block-button__link {
  background-color: #1f6f5c;
  color: #ffffff;
}
.wp-block-button__link:hover {
  background-color: #17574a;
}

4. Regardez l’aperçu. Si la couleur n’a pas changé, une règle du thème est plus forte. Mettez le nom d’une zone avant la classe, par exemple .site-footer, plutôt que de forcer tout de suite la règle avec important.
5. Publiez ou enregistrez les modifications.
6. Vérifiez la page dans une fenêtre privée et sur un téléphone. La couleur du texte doit rester lisible sur le nouveau fond.

Les couleurs de l’exemple ne sont que des exemples. D’autres approches, dont un thème enfant et une extension, sont présentées dans le guide de Hostinger sur le CSS personnalisé dans WordPress.

Ce que quelques lignes de CSS peuvent encore corriger

La couleur des boutons est la demande la plus fréquente, mais le même champ aide pour d’autres petites corrections de style :

• Masquer un élément, par exemple la date sous les articles ou le nom de l’auteur, avec une règle display: none. L’élément reste dans le code de la page, vous ne le voyez simplement plus.
• Les espacements, quand un titre colle à une image ou que les boutons sont trop proches sur téléphone.
• La taille de police à un endroit, par exemple le pied de page, sans changer toute la typographie du thème.
• La couleur des liens dans le contenu des articles, quand celle du thème est trop pâle sur fond blanc.
• La mise en page mobile, avec une règle qui a une condition de largeur d’écran et ne s’applique que sur les écrans étroits.

Deux habitudes vous éviteront des recherches dans quelques mois. Au-dessus de chaque règle, ajoutez un commentaire entre /* et */, par exemple « boutons verts, octobre 2026 ». Et gardez toutes vos corrections à un seul endroit, pas un peu dans Personnaliser, un peu dans les styles de l’éditeur et un peu dans les réglages d’une extension de constructeur de pages. Vous voyez alors facilement quelle règle fait quoi, et supprimez sans crainte celles dont vous n’avez plus besoin.

Un mot de prudence sur le masquage. Si vous masquez ainsi un texte important pour les clients, par exemple les frais de livraison, il disparaît de l’écran mais pas des obligations de la boutique. Corrigez ce type de contenu à la source.

Quand le CSS additionnel ne suffit pas

Le CSS additionnel change l’apparence, pas le contenu ni la structure HTML. Vous ne pouvez pas l’utiliser pour ajouter un nouveau texte dans le pied de page ou déplacer un bouton dans une autre section. Pour cela, il vous faut les modèles de l’éditeur du site ou les fichiers d’un thème enfant WordPress. Ils sont décrits dans le manuel des thèmes WordPress.

Si rien ne change après l’enregistrement alors que le CSS est correct, le cache est souvent en cause. Nous décrivons l’ordre pour le vider dans l’article modifications qui ne s’affichent pas dans WordPress.

Comment le chat modifie le CSS avec un aperçu

L’extension TellMyShop pour WordPress et WooCommerce permet à votre chat (Claude ou ChatGPT) de lire votre CSS additionnel actuel et d’en ajouter ou d’en remplacer une partie. Avant l’enregistrement, il vérifie que les accolades correspondent, et il vous avertit du chargement de styles depuis d’autres domaines. Dans un thème à blocs, il modifie aussi les couleurs et la typographie dans les styles globaux.