Change Add To Cart Hover Color

Is there a way to change all the button hover covers across the whole website? Every time I think I’ve found them all I discover another one.

I would also like to change the hover color for the ‘proceed to paypal’ button on this page: https://windanwaves.com/shop/checkout/

If I could just change all the button hover colors I could reduce the amount of code I use and potentially catch any buttons that I haven’t noticed yet.

THANKS FOR THE HELP!!

Hey, @windanwaves

To do that, go to Appearance → Customize → Additional CSS and enter the following code:

button:hover {
  background-color: red !important;
}

Hope the above will helps you.

Thanx.

So this works on most buttons.

I’m also using this code to change all the button colors to black:

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt {
	background: #000000 !important;
}

Is there a way I can combine both of these codes so that all of the buttons are #000000 and all the button hover codes are #24c7e1?

Hi Matthew,

The problem here is that some of the buttons are getting added by plugins which might have their own style.css files, so those buttons use the styling specified by the plugin rather than the styling specified by the theme. The only way to catch them all, is to find the specific CSS selectors applicable to each button.

And if you change the background color of the buttons to black, you’ll need to change the text color as well to keep the button text legible.

Lastly, try to avoid using !important as far as possible. If your CSS selector is specific enough, you should not need that. Whatever code I try, some of the !important declarations you’ve added prevents it from working correctly, so best to remove those completely.

Go to your custom CSS and remove these two rules you added:

button:hover {
  background-color: #24c7e1 !important;
}

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt {
	background: #000000 !important;
}

Then add the following – it changes all the buttons I can find, including the Proceed to PayPal one:

/* Sets background and text color for clickable buttons */
a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, a.button.wc-backward, a.button.wc-forward,button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
  background-color: #000000;
  color: #24c7e1;
}

a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover, a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, a.button.wc-backward:hover, a.button.wc-forward:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, #infinite-handle span:hover, .button:hover {
  background-color: #24c7e1;
  color: #515151;
}

/* Sets background and text color for disabled buttons */
a.button:disabled, a.button.disabled, a.button:disabled[disabled], button.button:disabled, button.button.disabled, button.button:disabled[disabled], input.button:disabled, input.button.disabled, input.button:disabled[disabled], #respond input#submit:disabled, #respond input#submit.disabled, #respond input#submit:disabled[disabled]{
  color: #24c7e1;
}

a.button:disabled:hover, a.button.disabled:hover, a.button:disabled[disabled]:hover, button.button:disabled:hover, button.button.disabled:hover, button.button:disabled[disabled]:hover, input.button:disabled:hover, input.button.disabled:hover, input.button:disabled[disabled]:hover, #respond input#submit:disabled:hover, #respond input#submit.disabled:hover, #respond input#submit:disabled[disabled]:hover {
  background-color: #24c7e1;
}

You are awesome! Thank you so much. It looks pretty much exactly how I wanted it to look. Much appreciated.

Only things I’d like to fine tune now is the text color on the select options button here:
https://windanwaves.com/shop/
I would like to change it from blue to white.

And the background on the add to cart button here when no options are selected:
https://windanwaves.com/product/follow-the-signs-tee/
I would like to change it from blue-green to black.

If that’s possible everything will be perfect. I’m already very happy with the code you’ve provided me. Thanks again!!

Howdy –

Only things I’d like to fine tune now is the text color on the select options button here:
https://windanwaves.com/shop/
I would like to change it from blue to white.

Add the following CSS:

a.button.product_type_variable.add_to_cart_button 
.content-wrapper.full-width a {
    color: #ffff;
}

And the background on the add to cart button here when no options are selected:
https://windanwaves.com/product/follow-the-signs-tee/
I would like to change it from blue-green to black.

Use the following CSS:

div.product form.cart .button {
 background-color: #15b6b8;
}

Let me know if that works out okay ??

Apologies. I messed up that second part of the CSS. Because the button is disabled until a product is selected you need to use this:

.disabled {
   background-color: black !important;
}

Hmmm for some reason the first code isn’t making any changes to the text of the select options.

The second code worked great!!

Thank you so much!

Hmmm for some reason the first code isn’t making any changes to the text of the select options.

The order in which CSS is added is important – it always gets executed from top to bottom. And it looks like in both cases you added the code Liz gave inbetween the existing code I gave you before. That might be preventing the code from working correctly, as it could be causing later code to override the new code – when Liz tested this she would have been adding her code AFTER the code I gave you, not inbetween.

Please move all the code that Liz gave you to the bottom of the custom CSS, so it only appears after the code I gave. In other words, it should look like this:

/* Sets background and text color for clickable buttons */
a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, a.button.wc-backward, a.button.wc-forward,button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
  background-color: #000000;
  color: #ffffff;
}

/* Sets background and text color for button hover */
a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover, a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, a.button.wc-backward:hover, a.button.wc-forward:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, #infinite-handle span:hover, .button:hover {
  background-color: #24c7e1;
  color: #ffffff;
}

/* Sets background and text color for disabled buttons */
a.button:disabled, a.button.disabled, a.button:disabled[disabled], button.button:disabled, button.button.disabled, button.button:disabled[disabled], input.button:disabled, input.button.disabled, input.button:disabled[disabled], #respond input#submit:disabled, #respond input#submit.disabled, #respond input#submit:disabled[disabled]{
  color: #ffffff;
}

/* Sets background and text color for disabled buttons hover */
a.button:disabled:hover, a.button.disabled:hover, a.button:disabled[disabled]:hover, button.button:disabled:hover, button.button.disabled:hover, button.button:disabled[disabled]:hover, input.button:disabled:hover, input.button.disabled:hover, input.button:disabled[disabled]:hover, #respond input#submit:disabled:hover, #respond input#submit.disabled:hover, #respond input#submit:disabled[disabled]:hover {
  background-color: #000000;
}

/* Changes text color on Select Options button on Shop page */
a.button.product_type_variable.add_to_cart_button  {
  color: #ffffff;
}

Also note I’ve changed the code for the Select Options button a bit.

The second code worked great!!

Using !important overrides this order, which is why any code you add with that always works. But it overrides this order, meaning once you’ve added !important to something, there’s absolutely no way to override it later on if you need to.

Instead, please try this (remember to only add it after the existing code):

/* Changes background color for inactive Add To Cart button on variable product page */
button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
  background-color: #000000;
}

By just being more specific in our selector we can achieve the same result as using !important, but without the possible future problems that !important might cause.

Works flawlessly! Thank you!!!!! <3

Happy to help ??