Change button colours

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.

Hello,

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

Regards

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.

Try to use this code snippet.

.woocommerce-message .button {
    background-color: #ffa9ce;
    border-color: #ffa9ce;
}

Regards

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

Add this also

.woocommerce-message .button:hover {
    background-color: #ffa9ce;
    border-color: #ffa9ce;
}

Regards

This works! Thank you!

You are welcome!

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.

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

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.

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.

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

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?

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

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.

Hi,

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

Regards

Hi,

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

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

Refer to screenshot

Attachments:

You must be logged in to view attached files.

Do you have any caching plugins?

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

Great, you are welcome!

[Author]

Posts