You've just added an online store to your Divi site and you realize that the WooCommerce buttons are a terrible blue? Don't worry, in this article, I'll quickly explain how to get a store that matches your graphic design...
Here is the program:
- Change the theme accent color
- Change the color of the hover buttons
- Change the color of the WooCommerce promo badge
- Use a different color than the theme's accent color
Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
1 - Change the theme accent color
As you can see in the screenshot above: this is what a product listing looks like in an online store created with WooCommerce and Divi. If you don't change anything, your product will look like this:
- The WooCommerce notification will have a blue background
- The button View cart will be written in blue
- The promotional badge will be orange
- The product price will be blue
- The button Add to cart will also be blue.
And that blue, I guess we all hate it!!!
So here's how to change the color of most WooCommerce buttons/notifiers in one click:
- Go to the tab Appearance > Customize > General Settings > Layout Settings. Set the accent color of your theme. This means that many elements on your site will have the same color. This helps to unify the design of your site and will also work for your store.
- This way, the WooCommerce notification will take the accent color of your theme.
- The price of the product as well.
- However, the add to cart button will remain blue for the time being, on mouse over.
- And the promo badge, will remain orange as well.
2 - Change the color of the hover buttons
To change the color of the button Add to cartbutton, when the mouse hovers over it:
- Go to the Appearance > Customize > Buttons > Hover Button Style. Set the color of the text on mouseover.
- Now the hover text gets the desired color.
- The promo badge is always orange. We'll see how to change it next.
3 - Change the color of the WooCommerce promo badge
There is no option to change the background color of the promo badge. You will have to do it in CSS :
- Go to the tab Appearance > Customize > Additional CSS.
- Enter the code below.
- The color of the promo badge is customized!
/* changer la couleur du badge promo woocommerce */ .woocommerce span.onsale, .woocommerce-page span.onsale { background: #974df3 !important; }
Of course, you will change the color code to use your own.
4 - Use a different colour from the theme's accent colour
What if you want to use a different color for your WooCommerce store than the Divi theme accent color?
It is quite possible. In this case you will have to customize your WooCommerce store entirely with CSS.
The following code is to be pasted to the tab Appearance > Customize > Additional CSS.
/* customiser WooCommerce avec Divi */ .woocommerce a.button, .woocommerce a.button.alt, .woocommerce a.button.alt:hover, .woocommerce a.button:hover, .woocommerce-page a.button, .woocommerce-page a.button.alt, .woocommerce-page a.button.alt:hover, .woocommerce-page a.button:hover, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce-page button.button, .woocommerce-page button.button.alt, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce-page button.button:hover, .woocommerce-page button.button.alt:hover { color: #974df3 !important; } .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message { color: #974df3 !important; background: #974df3 !important; } .woocommerce .woocommerce-message { color: #ffffff!important; } .entry-summary p.price ins { color: #974df3 !important; } .woocommerce span.onsale, .woocommerce-page span.onsale { background: #974df3 !important; }
Here, too, you'll want to consider changing the color code with your own.
Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!
You will also like :
- Get a different color on each page of your Divi site
- Get a background that changes color automatically
Bonjour, j’ai regardé pour faire mon changement de couleur d’accent du thème mais je pense avoir la dernière version de DIVI. donc j’ai rien pour le changer dans la manière que vous l’expliquer comment faire dans ce cas et dans quelle ligne mon css faut faire les changement;
merci à voua d si vous pouvez m’aider.
Audrey
Salut Audrey, tu dois inspecter le code CSS dans ton navigateur pour trouver quelle est la ligne à changer.
Bonjour,
je ne sais pas si je suis dans la bonne section.
Je post ici mon problème:
J’utilise le layout ‘Nutritionnist’ pour mon site que je personnalise. Il n’y a pas de page SHOP dans ce layout.
Donc j’utilise un autre layout qui possède une page SHOP.
Seulement cette page SHOP ne se met pas en fullWidth comme convenu.
J’ai essayé plusieurs possibilités, ajout de code CSS, parametrages dans les options de theme, mais rien n’y fait.
Auriez-vous une solution?
Merci à vous 🙂
Damien
Salut Damien,
Tu dois vérifier le dimensionnement, soit des sections, soit des rangées. Tu dois mettre à 100% au lieu de 80% et mettre la largeur à 2500px au lieu de 1080px. Ça se passe dans les réglages des sections ou des rangées à l’onglet Styles > Dimensionnement ou Styles > Espacement.
Bonjour Lycia,
je recherche une manière de changer la forme des boutons, auriez-vous une solution?
Ça ne fonctionne pas si tu personnalises tes boutons depuis l’onglet Apparence > Personnaliser > Boutons ?