WooCommerce Buttons – swiftideas

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 36 replies, 7 voices, and was last updated 9 years by Kyle – SUPPORT.

Viewing 15 posts - 1 through 15 (of 37 total)

1 2 3 →

Back to forum

Posted in: Dante
June 22, 2014 at 7:49 pm #84397

MHC
Member

Post count: 247

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.

June 22, 2014 at 7:51 pm #84402

MHC
Member

Post count: 247

This reply has been marked as private.

June 23, 2014 at 1:06 am #84419
Noahj
Member

Post count: 59
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
June 23, 2014 at 3:59 am #84453

MHC
Member

Post count: 247

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

June 24, 2014 at 1:26 am #84899
Swift Ideas – Ed
Keymaster

Post count: 15264
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
June 24, 2014 at 1:00 pm #85159

MHC
Member

Post count: 247

Thanks so much! They look great now 🙂

June 24, 2014 at 1:20 pm #85177

Kyle – SUPPORT
Moderator

Post count: 35880

Great! Thanks Ed 🙂

– Kyle

June 25, 2014 at 6:03 pm #85982

MHC
Member

Post count: 247

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 🙂

June 25, 2014 at 6:10 pm #85989
Swift Ideas – Ed
Keymaster

Post count: 15264
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
June 26, 2014 at 8:25 am #86125

MHC
Member

Post count: 247

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

June 26, 2014 at 10:58 am #86210
Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779
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
June 26, 2014 at 5:51 pm #86411

MHC
Member

Post count: 247

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

June 26, 2014 at 10:35 pm #86430
Swift Ideas – Ed
Keymaster

Post count: 15264
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
June 28, 2014 at 10:34 am #86683

MHC
Member

Post count: 247

Thanks so much! All looks great now 🙂

June 28, 2014 at 10:51 am #86686

Mohammad – SUPPORT
Moderator

Post count: 27441

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

With Best Regards
Swift Ideas
Back to forum

Posted in: Dante