Customize Proceed to checkout button

[[email protected]]

Hi there,

I ve just done an update of all the plugins and theme.

After that I ve noticed that unfortunately in my cart page (powered by woocommerce), now the “Proceed to checkout” button doesn’ t have anymore a different backgrounf color (check attached pic), and as such it’s not intutitive for the user to see it and proceed from cart to checkout

I d like to customize it as it was before (if i remember well, so white text on black background).

When I hover it, it gets white text on light blue background which is fine to me

Thanks in advance

Fabio

Attachments:

You must be logged in to view attached files.

[[email protected]]

Hi there,

I ve noticed a further problem

in the catalog page, prices and category numbers in the left sidebar are displayed in a too small font

Please let me know how to edit it

Regards and thanks in advance

Fabio

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
‘.wc-proceed-to-checkout a.checkout-button {
background: none repeat scroll 0 0 #2e2e36 !important;
color: #ffffff !important;
height: 16px !important;
}
.woocommerce .widget_layered_nav ul li small{
font-size:15px !important;
}’

Thanks
Mohammad

[uform]

I tried the code bellow to change the color of the proceed to check out button on the cart page but it’s not working.
Do you have a solution?

See page here : http://dkolor.com/panier/

See picture attached.

I would like no. 1 button styled the same way as no. 2.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.sf-roll-button.checkout-button{
    background: #e4e4e4 !important;
    color: #555 !important;

}

Thanks
Mohammad

[uform]

The proceed to check out button stays the same?

[Mohammad – SUPPORT]

Hi,
It should work. Please provide login detail to check and resolve the issue.
Thanks
Mohammad

[uform]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.page .wc-proceed-to-checkout a.checkout-button {
  background-color: #111111;
  color: #fff;
}

– Kyle

[uform]

Sorry about that, I want to darken this button ( see picture ) nothing seems to work?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Add this to your custom css:

.checkout-button {
  background-color: #111111!important;
  color: #ffffff!important;
}

– Kyle

[uform]

I used this code and added important! and it work.

.page .wc-proceed-to-checkout a.checkout-button {
background-color: #111111;
color: #fff;
}

I lost the accent color on hover though. Is it possible to bring this feature back?

Thanks so much.

[Kyle – SUPPORT]

You’d have to add:

.page .wc-proceed-to-checkout a.checkout-button:hover {
background-color: #111111;
color: #fff;
}

– Kyle

[uform]

Thanks! working.
I added !important ?

[Kyle – SUPPORT]

Great

No Problem