WooCommerce Buttons

[MHC]

Hi,

How can I modify a few WooCommerce buttons so that they are:

1. Without hovering effect
2. With the same background color
3. With the same text color and weight

Please see attached screenshots for the buttons. I’ve tried to adjust through color customizer but it seems impossible to make those buttons the same without changing other theme colors.

[MHC]

This reply has been marked as private.

[Noahj]

Hey MHC,

I’m obviously not support but thought to help out when as I can.

Use the following in your Theme Settings, Custom Css section or wherever you apply your custom css values.

For the “Add to shopping bag” button.
Replace the color values with your hex value color desired.

.woocommerce ul.products li.product figure figcaption .shop-actions > a, 
.woocommerce ul.products li.product figure figcaption .shop-actions > a:hover {
    background: #000;
    color: #fff;
}

For your shopping page buttons (not single product pages).

For the Add to wishlist STAR icon (before added to a wishlist).
Replace the color values with your hex value color desired.

.yith-wcwl-add-button > a i,
.yith-wcwl-add-button > a i:hover{
    color: #cc0000;
}

For the Add to wishlist CHECK icon (after added to a wishlist).
Replace the color values with your hex value color desired.

.yith-wcwl-wishlistexistsbrowse a, 
.yith-wcwl-wishlistexistsbrowse a:hover {
    background: #000 !important;
    color: #fff;
}

For your single product page buttons. Starting with your PLUS & MINUS buttons.

.woocommerce .quantity .plus, 
.woocommerce .quantity .plus:hover {
    background: #000;
    color: #fff;
}
.woocommerce .quantity .minus, 
.woocommerce .quantity .minus:hover {
    background: #000;
    color: #fff;
}

For your Add to shopping bag button.

.woocommerce form.cart button.single_add_to_cart_button,
.woocommerce form.cart button.single_add_to_cart_button:hover{
    background: #000 !important;
    color: #fff;
}

For your Add to wishlist button before added to the the wishlist.

.woocommerce form.cart .yith-wcwl-add-to-wishlist a, 
.woocommerce form.cart .yith-wcwl-add-to-wishlist a:hover {
    background: #000;
}

For your Add to wishlist after item has been added to a wishlist.

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

So, all together your Custom Css would look like this for example.

.woocommerce ul.products li.product figure figcaption .shop-actions > a, 
.woocommerce ul.products li.product figure figcaption .shop-actions > a:hover {
    background: #YourHexColorHere;
    color: #YourHexColorHere;
}
.yith-wcwl-add-button > a i,
.yith-wcwl-add-button > a i:hover{
    color: #YourHexColorHere;
}
.yith-wcwl-wishlistexistsbrowse a, 
.yith-wcwl-wishlistexistsbrowse a:hover {
    background: #YourHexColorHere !important;
    color: #YourHexColorHere;
}
.woocommerce .quantity .plus, 
.woocommerce .quantity .plus:hover {
    background: #000;
    color: #fff;
}
.woocommerce .quantity .minus, 
.woocommerce .quantity .minus:hover {
    background: #000;
    color: #fff;
}
.woocommerce form.cart button.single_add_to_cart_button,
.woocommerce form.cart button.single_add_to_cart_button:hover{
    background: #000 !important;
    color: #fff;
}
.woocommerce form.cart .yith-wcwl-add-to-wishlist a, 
.woocommerce form.cart .yith-wcwl-add-to-wishlist a:hover {
    background: #000;
}

See this quick screencast for example and results.
Screencast

[MHC]

Thank you but your code can only work for 1 button in my case since I have disabled shop actions & wishlist functions on my shop page.

Please see below a list of buttons that I would like to (1) change background color (2) change text color and weight:

1. Cart page: Remove this item (the x button)
2. Cart page: Update Shopping Cart
3. Cart page: Proceed to Checkout
4. Checkout page: Place order
5. Contact form: Send

[Swift Ideas – Ed]

Thanks for the assistance Noah.

@MHC – hopefully this works for you.

1. Cart page: Remove this item (the x button):

.woocommerce table.shop_table tr td.product-remove .remove {
background: #222!important;
color: #fff!important;
}

2. Cart page: Update Shopping Cart:

.woocommerce .button.update-cart-button {
background: #222!important;
color: #fff!important;
}

3. Cart page: Proceed to Checkout:

.woocommerce .button.checkout-button {
background: #222!important;
color: #fff!important;
}

4. Checkout page: Place order:

#order_review #payment #place_order {
background: #222!important;
color: #fff!important;
}

5. Contact form: Send:

.wpcf7 input.wpcf7-submit[type="submit"] {
background: #222!important;
color: #fff!important;
}

– Ed

[MHC]

Thanks so much! They look great now 🙂

[Kyle – SUPPORT]

Great! Thanks Ed 🙂

– Kyle

[MHC]

Hi,

Below please see three more buttons that I would like to change background colors:

1. My Account: Login
2. My Account: Register
3. Lost Password: Reset Password

Image attached. Thanks again for your patience 🙂

[Swift Ideas – Ed]

1. My Account: Login

.my-account-login-wrap .login-wrap form.login p.form-row input[type="submit"], .woocommerce .my-account-login-wrap form input[type="submit"] {
background: #222!important;
color: #fff!important;
}

2. My Account: Register

.woocommerce .col-2 form.register input[type="submit"] {
background: #222!important;
color: #fff!important;
}

3. Lost Password: Reset Password

.lost_reset_password p.form-row input[type="submit"] {
background: #222!important;
color: #fff!important;
}

– Ed

[MHC]

Thank you, the codes work great!
Just found a few more as I go. Hope there is no more…

1. My Account – address book – billing address – edit address – save address
2. My Account – address book – shipping address – edit address – save address
3. My Account – change password – save changes
4. Single product page – successfully added to cart message box – view cart text color & weight

[Rui Guerreiro – SUPPORT]

save address

.woocommerce .my-account-right .save_address{
background: #222!important;
color: #fff!important;
}

Save changes

.woocommerce .save_account_details{
background: #222!important;
color: #fff!important;
}

View cart

.woocommerce-message .button wc-forward{
color: #fff!important;
height: 20px !important;
}

Let us know it it works

Best Regards,
Rui

[MHC]

Thank you Rui. The codes don’t seem to affect the buttons?

[Swift Ideas – Ed]

Sorry MHC, should be:

.woocommerce input.button[name="save_address"] {
background: #222!important;
color: #fff!important;
}

.woocommerce input[name="save_account_details"] {
background: #222!important;
color: #fff!important;
}

.woocommerce .woocommerce-message a.button {
color: #fff!important;
font-weight: normal!important;
}

– Ed

[MHC]

Thanks so much! All looks great now 🙂

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved. Thanks Ed :-).

With Best Regards
Swift Ideas