- This topic has 15 replies, 2 voices, and was last updated 5 years ago by
.
-
Posts
-
I’m not sure if there is a conflict between this theme and woocommerce but some of my woocommerce buttons are a different background making the text on it impossible to see.
Example:
https://www.onbiz.com/cart/?add-to-cart=16922 (the Update Total button as an example)Customer Support
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/zPH7vRHSorry 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 thebackground-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
- You must be logged in to reply to this topic.