How to change button colours

[mochasarah]

Hi

I succeeded in changing the colour of the ‘Proceed to Checkout’ button on the cart page to green.
But how do I change the text within it from black to white?
Also, is there a way to make the button slightly larger, with rounded edges like this one attached?

In addition, how can I change the colour of the +Add to Shopping Bag button on product pages?

Many thanks!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    border-radius: 10px !important;
    font-size: 16px !important;
    color: #fff !important;
    font-weight: bold !important;
    text-align: center !important;
}

Thanks
Mohammad

[kwlodar]

Hello,
I’d like to have exactly te same button colour and behavior both on checkout page (https://www.sklepojca.pl/zamowienie/) and in the basket (https://www.sklepojca.pl/koszyk/). How to force basket button to be like on checkout – black and on mouse over turning to green?
Thanks in advance for your help!
Chris

[David Martin – Support]

Hi,

You can do so in Color Customizer => Color – Accent => Secondary Accent Color and Accent Color

[kwlodar]

My current configuration is shown on attached screenshots. I have accent colour configured but buttons in the cart and on the checkout still looks different. Pls refer also to urls I’ve sent.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

I’m already seeing it like that. Black in normal state and green on hover.
Try to clear the browser cache.

-Rui

[kwlodar]

I tried 3 different browsers after cleaning cache and nothing changed.
It is like this since I’ve installed Neighborhood. I’d like to have it like you wrote: Black in normal state and green on hover.

[Rui Guerreiro – SUPPORT]

If I’m seeing it fine, it can only be a cache issue.

Not sure if in your network you have any router that can be caching the files, try in a different computer and in a different network.

-Rui

[kwlodar]

Router? No.
I checked on Chrome, Firefox and Egde on Windows after cleaning cache – same situation in all browsers: go to checkout button background in cart is grey, not black, as in checkout. Website cache also deleted. 🙁
Any other ideas?

[Rui Guerreiro – SUPPORT]

That’s strange. In chrome can you try the option “Empty cache and Hard reload”.

You need to open the inspect console, after that press and hold the refresh button and choose the option I told before.

-Rui

[kwlodar]

But, Rui, you are looking at wrong button. The button on the checkout is fine. I’m talking about the button in cart.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Sorry about that. Add this code below to the custom css option in theme options, that will sort it.

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {   
    background-color: #000!important;
    color: #fff!important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {  
    background: #6a9b11!important;
    color: #ffffff!important;
}

-Rui

[kwlodar]

Thank you so much!
The code did the job. 🙂
Regards,
Chris

[David Martin – Support]

Thank Rui – glad that helped you out!

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.