Change Color of Add to Cart and Wishlist Button

[Kyle – SUPPORT]

Please provide me with your link so that I can provide you with the exact css

– Kyle

[simonvk]

Heya Kyle, a URL to a product page of mine is:

http://nieuwekoptelefoons.nl/winkel/on-ear-koptelefoons/philips-fidelio-m1bl-on-ear-koptelefoon-blauw/

[Kyle – SUPPORT]

Try this custom css:

.woocommerce p.cart a.single_add_to_cart_button {
  background-color: #1DC6DF !important;
}

– Kyle

[simonvk]

Awesome, Kyle, thank you for that!
The background color is perfect now, only thing I’d like it to have the text white, and when hovering over the button, the button goes black (and the text is still white). Actually, exactly like the “Bekijk video” button on my product page, as linked earlier.
Sorry for being such a pain, hope it’s not too difficult! 🙂

[Kyle – SUPPORT]

No problem, replace it with:

.woocommerce p.cart a.single_add_to_cart_button {
  background-color: #1DC6DF !important;
  color: #FFFFFF!important;
}
.woocommerce p.cart a.single_add_to_cart_button:hover {
  background-color: #2E2E36 !important;
  color: #FFFFFF!important;
}

– Kyle

[simonvk]

Awesomepants!
Thanks a lot 🙂

[Kyle – SUPPORT]

No problem! 🙂

[adamf]

I’m trying to do the same thing, variable product, nothing is working – the button style is inline css in the theme, and I cannot find where it is originating from – HALP.

[Kyle – SUPPORT]

Hi

the !importants should overwrite the inline css

– Kyle

[adamf]

It should, I agree, but it doesn’t. Maddening.

[Kyle – SUPPORT]

Please can I see your link to check?

– Kyle

[adamf]

This reply has been marked as private.

[Swift Ideas – Ed]

@adamf – that code is generated from the styles set in the customiser. If you wish to override on the product page, please use this custom css:

.woocommerce form.cart button.single_add_to_cart_butto {
  background-color: #1DC6DF !important;
  color: #FFFFFF!important;
}
.woocommerce form.cart button.single_add_to_cart_butto:hover {
  background-color: #2E2E36 !important;
  color: #FFFFFF!important;
}
.yith-wcwl-add-button a {
  background-color: #1DC6DF !important;
  color: #FFFFFF!important;
}
.yith-wcwl-add-button a:hover {
  background-color: #2E2E36 !important;
  color: #FFFFFF!important;
}

Hope that helps.

– Ed

[adamf]

Perfect, thanks very much for that.

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved. Thanks Ed :-).
With Best Regards
Swift Ideas