Woocommerce button colors

Posted in: Newspaper
Post count: 5
NrL
#60632
Jul 22, 2015 at 10:36 pm

How can I change the colors of the buttons on the Woocommerce Archive and Product pages “Add to cart, View cart, Checkout”, etc.? When the mouse hovers they change to the theme color but by default are black.

Post count: 7909
Alin [tagDiv]
#60734
Jul 23, 2015 at 1:56 pm

Hi,

You can change the color for woocommerce button using custom css in Theme Panel > Custom Css as the theme doesn’t have an option for this. You can try this – http://screencast.com/t/AAXhVNr00fXx

.woocommerce .product a.button, .woocommerce .product #respond input#submit, .woocommerce .checkout input#place_order, .woocommerce .woocommerce.widget .button {
background-color: red !important;
}

You need to inspect every button take the default css and change the color – http://screencast.com/t/FfnKwAiVwS

.single-product .product .summary .cart .button {
background-color: red !important;
}

Thanks!

Post count: 5
NrL
#61004
Jul 24, 2015 at 11:51 pm

I tried your first recommendation and now the color doesn’t change when you mouse over the buttons. The WC buttons are currently all black by default. When I mouse over them, they change the the Theme Accent Color as set in the General Theme Colors. It seems like there should be a way to change the default black button color throughout the theme. Am I missing something?

Post count: 1291
Emil G
#61181
Jul 27, 2015 at 3:25 pm

Hi,

For hover color you have to add the :hover parameter to the target, ex:

.woocommerce .product a.button:hover, .woocommerce .product #respond input#submit:hover, .woocommerce .checkout input#place_order:hover, .woocommerce .woocommerce.widget .button:hover {
background-color: blue !important;
}

Thank you!

  • This reply was modified 11 years by Emil G.
Viewing 4 posts - 1 through 4 (of 4 total)
The forum ‘Newspaper’ is closed to new topics and replies.