Change button colours

This topic has 22 replies, 3 voices, and was last updated 7 years, 8 months ago by Artem Temos.

Viewing 23 posts - 1 through 23 (of 23 total)

Author

Posts
April 25, 2017 at 12:55 pm #12739

wrfr
Participant

Hi,

May I have the snippet to change the colours of the green button shown in the attached screenshot? I have managed to change the box outline color, but I would like to change both the hover color and the non-hover color of the button.

April 25, 2017 at 1:23 pm #12744

Artem Temos
Keymaster

Hello,

You can change all buttons colors in Theme Settings -> Styles & Colors.

Regards

April 25, 2017 at 1:29 pm #12746

wrfr
Participant

Hi,
this does not work. If you can see the screenshot I have attached it is the cart message button after you add an item to the cart.

Attachments:
You must be logged in to view attached files.

April 25, 2017 at 1:34 pm #12748
Artem Temos
Keymaster
Try to use this code snippet.
```
.woocommerce-message .button {
    background-color: #ffa9ce;
    border-color: #ffa9ce;
}
```
Regards
April 25, 2017 at 3:00 pm #12749

wrfr
Participant

Hi,
this works, but once I hover my mouse over the view cart button it becomes green. Any solutions?

April 25, 2017 at 3:04 pm #12750
Artem Temos
Keymaster
Add this also
```
.woocommerce-message .button:hover {
    background-color: #ffa9ce;
    border-color: #ffa9ce;
}
```
Regards
April 25, 2017 at 3:19 pm #12751

wrfr
Participant

This works! Thank you!

April 25, 2017 at 3:27 pm #12754

Artem Temos
Keymaster

You are welcome!

April 25, 2017 at 4:16 pm #12756

wrfr
Participant

Hi, can I check how to change these buttons in black in the screenshots attached?

1. hidden sidebar SHOPPING CART
2. woocommerce account login page (before login)
3. woocommerce account (after login)

Attachments:
You must be logged in to view attached files.

April 25, 2017 at 6:18 pm #12765
Bogdan Donovan
Keymaster
Try to add the following code snippet to the Custom CSS area.
```
.cart-widget-side .widget_shopping_cart_content .buttons .button.wc-forward,
.basel-registration-page .form-row .woocommerce-Button,
.woocommerce-account .yith-wcmap .myaccount-menu li a {
	background-color: #000000;
  	border-color: #000000;
  	color: white;
}

.cart-widget-side .widget_shopping_cart_content .buttons .button.wc-forward:hover,
.basel-registration-page .form-row .woocommerce-Button:hover,
.woocommerce-account .yith-wcmap .myaccount-menu li a:hover {
	background-color: #333;
  	border-color: #333;
}

.woocommerce-account .yith-wcmap .myaccount-menu li.active a {
	background-color: #333;
  	border-color: #333;
}
```
Regards
April 26, 2017 at 5:01 pm #12802

wrfr
Participant

Hi,

there are some problems with the code snippets.
for the first 2, refer to the screenshot.
the last code snippet returns the error message in the next screenshot.

Attachments:
You must be logged in to view attached files.

April 26, 2017 at 5:19 pm #12806

wrfr
Participant

Hi,

Please ignore the above message.
I think its better for me to be more precise, so please refer to attached screenshots below.

Attachments:
You must be logged in to view attached files.

April 26, 2017 at 7:04 pm #12839
Bogdan Donovan
Keymaster
Hello,

Try to use this code snippets described below:

1. Hidden sidebar buttons and sidebar heading.
```
.cart-widget-side div.widget-heading {
	background-color: #FFA7CE;
}

.cart-widget-side .widget_shopping_cart_content .buttons .button.wc-forward {
	background-color: #FFA7CE;
  	border-color: #FFA7CE;
  	color: white;
}

.cart-widget-side .widget_shopping_cart_content .buttons .button.wc-forward:hover {
	background-color: #F47F93;
  	border-color: #F47F93;
}
```
2. Logout button on My Account page.
```
.woocommerce-account #my-account-menu-tab .logout a {
	padding: 5px 10px;
  	background-color: #FFA7CE;
}

.woocommerce-account #my-account-menu-tab .logout a:hover {
  	background-color: #F47F93;
  	text-decoration: none;
  	color: white;
}
```
3. Buttons on registration/login page.
```
.basel-registration-page .form-row .woocommerce-Button,
.basel-registration-page .btn.btn-color-black.basel-switch-to-register {
	background-color: #FFA7CE;
  	border-color: #FFA7CE;
  	color: white;
}

.basel-registration-page .form-row .woocommerce-Button:hover,
.basel-registration-page .btn.btn-color-black.basel-switch-to-register:hover {
	background-color: #F47F93;
  	border-color: #F47F93;
}
```
4. Title background on My Account page.
```
.woocommerce-account #my-account-content .woocommerce-MyAccount-title {
	background-color: #FFA7CE;
}
```
Regards
April 30, 2017 at 2:31 pm #12992

wrfr
Participant

Hi,

All your solutions work except these:
3. Buttons on registration/login page.

.basel-registration-page .form-row .woocommerce-Button,
.basel-registration-page .btn.btn-color-black.basel-switch-to-register {
background-color: #FFA7CE;
border-color: #FFA7CE;
color: white;
}

.basel-registration-page .form-row .woocommerce-Button:hover,
.basel-registration-page .btn.btn-color-black.basel-switch-to-register:hover {
background-color: #F47F93;
border-color: #F47F93;
}

Any solutions?

April 30, 2017 at 3:21 pm #12999
Artem Temos
Keymaster
Hi,

Try to replace with this one
```
.basel-registration-page .form-row .woocommerce-Button,
.basel-registration-page .btn.btn-color-black.basel-switch-to-register {
background-color: #FFA7CE!important;
border-color: #FFA7CE!important;
color: white!important;
}

.basel-registration-page .form-row .woocommerce-Button:hover,
.basel-registration-page .btn.btn-color-black.basel-switch-to-register:hover {
background-color: #F47F93!important;
border-color: #F47F93!important;
}
```
Regards
April 30, 2017 at 4:39 pm #13003

wrfr
Participant

Hi,

No joy, it still does not work. Can you confirm if your code above is for the change I want to make in this latest attached screenshot? The screenshot is taken after pasting your code in custom CSS area, but the buttons and the hover is still black.

Attachments:
You must be logged in to view attached files.

April 30, 2017 at 4:57 pm #13007

Artem Temos
Keymaster

Hi,

Sorry, but we don’t see the code added in the Custom CSS.

Regards

May 1, 2017 at 8:31 am #13029

wrfr
Participant

Hi,

The code is in. The buttons still look the same.

May 1, 2017 at 8:43 am #13032

Artem Temos
Keymaster

Strange but we don’t see the code in your page source https://gyazo.com/e50779690f3005aa117e7f9c90eaa510

May 1, 2017 at 9:20 am #13033

wrfr
Participant

Refer to screenshot

Attachments:
You must be logged in to view attached files.

May 1, 2017 at 9:49 am #13035

Artem Temos
Keymaster

Do you have any caching plugins?

May 1, 2017 at 11:43 am #13036

wrfr
Participant

I updated the theme, it works now. Apologies for the inconvenience and thanks guys!

May 1, 2017 at 6:33 pm #13044

Artem Temos
Keymaster

Great, you are welcome!
Author

Posts