WooCommerce Buttons

Hi there,

the Update Cart Button is greyed out as a unclickable element until a change is made to the cart.

Yes I figured that but thought it was sort of a bad user experience when the user doesn't even know what that button is because he can't see the text on it right away

The styling comes from the standard Woocommerce style sheet, the theme doesn't interfere with how it behaves. This is the CSS rule it uses and those selectors can be used to overwrite it:

.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
    color: inherit;
    cursor: not-allowed;
    opacity: .5;
    padding: .618em 1em;
}

Is there a particular style you would want? We can assist with changing it. Let me know.

Yes. Do you know how I can change the background color to the same color gray when you hover over it?

Thank you

For the disabled button? You would need to use this CSS:

.woocommerce #respond input#submit.disabled:hover,
.woocommerce #respond input#submit:disabled:hover,
.woocommerce #respond input#submit:disabled[disabled]:hover,
.woocommerce a.button.disabled:hover,
.woocommerce a.button:disabled:hover,
.woocommerce a.button:disabled[disabled]:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce input.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button:disabled[disabled]:hover {
    background-color: #2f4468;
    opacity: 0.5;
}

I put that code in additional css but it didn't do anything

Can you remove the CSS and add it at the very top of the Additional CSS

Just tried that - same thing

Looks good to me - try clearing your browser cache.

I'll try a different computer - don't see any color difference on my desktop or phone after clearing cache

Ok, let us know - i tested it locally and its working.

Tried on different computers and still see the same color grayed out box.

See here:
https://ibb.co/zPH7vRH

Sorry i thought that you wanted the color to be the same as when it was hovered on.
The two sets of CSS i provided above, you can change the background-color: #xxxxxx; and opacity to whatever you want.

I think there was some miscommunication with what I wanted but I tinkered with your code and made some edits and got it working the way I wanted:
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled[disabled] {
background-color: #D3D3D3;
opacity: 0.5;
}

Thank you for the help