Change Color of Add to Cart and Wishlist Button

[maike]

Hi,
how can I change the color and color on hover of the Add to Cart and Wishlist Button:

1) On Shop and Categorie Pages
2) On Single Product Pages?

Thanks a lot 🙂
Maike

[Swift Ideas – Ed]

These buttons are linked to your secondary accent colour, and accent colour, both of which you can set in the Color Customiser (link in the WP Admin Bar).

If you need to set it to something else, let me know and I can help out with some custom css.

– Ed

[maike]

Mmmh…I tried this, but it just makes changes to the text, not to the background…

[Swift Ideas – Ed]

Apologies, the background colour is actually the alt bg colour on the shop/category pages.

Heres some custom css you can use to manually change it:

.woocommerce ul.products li.product figure figcaption, .woocommerce form.cart button.single_add_to_cart_button, .yith-wcwl-add-to-wishlist {
background: #f7f7f7;
}
.woocommerce ul.products li.product figure figcaption .shop-actions > a, .woocommerce .wishlist_table tr td.product-add-to-cart a, .woocommerce form.cart button.single_add_to_cart_button, .woocommerce form.cart .yith-wcwl-add-to-wishlist a {
color: #444;
}

Hope that helps.

– Ed

[maike]

Hi Ed,

thank you the fast reply. Unfortunately it don’t change the background color of the buttons, just the text…

Greetigs
Maike

[Swift Ideas – Ed]

Did you edit the css I provided? If you send over a link to your site in a private reply, I’ll happily take a look at what’s happening.

– Ed

[maike]

Hi Ed,

I tried the CSS but nothing happened. But what I found out is, if I change the Alt Background Color in the Theme Color Customizer the Background of the Buttons change – but with this all other items using this change aswell (e.g. the sorting drop down box on the shop side or the quantity selector).

Does this help?

BR
Maike

[Swift Ideas – Ed]

If you try adding !important to your custom css, after the value it should override it.

– Ed

[maike]

That’s it. Just the Background of the Wishlist Button on the Main Shop and Category Pages doesn’t change. Is there something missing?

Thank you again!

[Swift Ideas – Ed]

Change your code to this:

.woocommerce ul.products li.product figure figcaption, .woocommerce form.cart button.single_add_to_cart_button, .yith-wcwl-add-to-wishlist, .yith-wcwl-add-to-wishlist a {
background: #f7f7f7;
}
.woocommerce ul.products li.product figure figcaption .shop-actions > a, .woocommerce .wishlist_table tr td.product-add-to-cart a, .woocommerce form.cart button.single_add_to_cart_button, .woocommerce form.cart .yith-wcwl-add-to-wishlist a {
color: #444;
}

Hope that helps.

– Ed

[maike]

Hi Ed,

I hope it is the last issue concerning this topic 🙂

The hove on the wishlist buttons does not work when adding this code. Everything else is super fine 🙂

BR
Maike

[Swift Ideas – Ed]

Try this:

.yith-wcwl-add-to-wishlist:hover, .yith-wcwl-add-to-wishlist a:hover {
background: #222!important;
color: #fff!important;
}

Hope that helps.

– Ed

[simonvk]

Heya, hope you don’t mind me digging up an old thread since my question is related. Tried the above, it didn’t work out, close though 🙂

I’d like my buy button (I run a site with external products so this may not be the same as the regular add to cart, not sure…) to be my accent color (which is the blue in the pic below) with white letters. I’d only like this color to be changed on the product page, I don’t want this accent blue color to be the hover color when you’re on a list page – that can just stay f7f7f7 grey.

Thanks!

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.woocommerce form.cart button.single_add_to_cart_button {
  background-color: #333333!important;
}

But change the hex value to your blue color.

– Kyle

[simonvk]

Hey Kyle, that didn’t work unfortunately.
The add to cart button remains unchanged in terms of colors…