Give buttons background color


#1

Hi is it possible with css code to give the buttons a background color? At the moment they are all transparent.

Buttons


#2

Hello…

Yeah, you can add the button background color to.
Here is the css code:

.woocommerce ul.products li.product a {
    background-color: grey;
    color: white;
}

#3

It worked for the homepage buttons but not for the “Buy Now / Add to Cart” buttons.

Buttons


#4

Checking your site and I can’t see the button. can you display it? Maybe you only display the button per regions?


#5

Hi, on the homepage the grey background shows: http://fuhndeals.co.za/

http://fuhndeals.co.za/deals/product/hotel-2/

and then on the product description page the button still has transparent background http://fuhndeals.co.za/product/stylish-beach-crossover-50-off/

as well as on the “cart page” - http://fuhndeals.co.za/cart/


#6

Hi Judy,

You can change the WooCommerce buttons’ background color anywhere on your site with this CSS:

.woocommerce .button {
    background-color: grey !important;
}

.woocommerce .button:hover {
    background-color: #b10b53 !important;
}

Please make sure to add the above CSS to the style.css of your Child Theme, so you will don’t loose your changes after a theme update.

Best Regards,
Csaba


#7

I love you guys! Thank you. I’m so keen to learn how to develop but oh my, it looks so complicated, how would you know to use “important” :slight_smile:


#8

Just looking at it again, I would like the background as my theme color, pink, and the hover as grey and in both cases the font to be in white.

http://fuhndeals.co.za/product/high-waist-that-will-make-you-look-crazy-hot/

http://fuhndeals.co.za/cart/


#9

Thanks @csaba for your help :smiley:

@Judy Sorry I can’t see the button http://prntscr.com/968try


#10

It only shows when the variable options have been selected (size and colour) :frowning: Yip,not sure if its a problem or has to be that way.


#11

Oh sorry, I didnt try to select the options.

Please try this code then:

.woocommerce .single_add_to_cart_button.button:hover {
    background-color: grey !important;
}

.woocommerce .single_add_to_cart_button.button {
    background-color: #b10b53 !important;
    color: white;
}


#12

You are great, thanks it changed on that page BUT I need to do the same for the buttons on the Cart page as well

http://fuhndeals.co.za/cart/


#13

Hi Judy,

This Custom CSS have to work everywhere on your site ( for WooCommerce Buttons ):

.woocommerce .button {
    background-color: #b10b53 !important;
    color: white !important;
}

.woocommerce .button:hover {
    background-color: grey !important;
    color: white !important;
}

Please let Us know how it works.

Best Regards,
Csaba


#14

Hi,

@csaba I think Judy want a different color for specific button :slight_smile:

@Judy you can try these css code then:

.woocommerce .shop_table.cart .button:hover, .wc-proceed-to-checkout .button:hover, .woocommerce .single_add_to_cart_button.button:hover {
    background-color: grey !important;
}

.woocommerce .shop_table.cart .button, .wc-proceed-to-checkout .button, .woocommerce .single_add_to_cart_button.button {
    background-color: #b10b53 !important;
    color: white !important;
}

#15

Awan and Csaba, you guys are the best, really. Look how nice it looks now…
http://fuhndeals.co.za/cart/

I can’t believe how supportive you guys have been …you have given the best service and response than any other company I have dealt with … I will definately buy from and support you guys anytime. Thanks soooo much.

This is why I wish you had ALL I require to finish the site …I’m battling to find plugins. Because it’s a “Deal” site I’m looking to put a countdown timer on the products page above the “Add to Cart” button as well as a social share discount plugin. If they share to their social networks then the price goes down (to what we set it at). I imagine this will really help build the site quicker.

P.S I had one that had both, did not work with variables, altho the demo shows that it does, obviously they did not test it with variables. I’m so frustrated because a site that could have taken 2hrs to complete has taken 2months… (because service and support sucks) that’s how long I’ve been working with them to prove that their plugin does NOT WORK. I’m trying to get a refund.