[Support request] WooCommerce Buttons

Home Forums Support [Support request] WooCommerce Buttons

Home Forums Support WooCommerce Buttons

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #882694
    yury

    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)

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #883037
    David
    Staff
    Customer Support

    Hi there,

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

    #883052
    yury

    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

    #883095
    David
    Staff
    Customer Support

    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.

    #885001
    yury

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

    Thank you

    #885273
    David
    Staff
    Customer Support

    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;
    }
    #885429
    yury

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

    #885432
    David
    Staff
    Customer Support

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

    #885437
    yury

    Just tried that – same thing

    #885439
    David
    Staff
    Customer Support

    Looks good to me – try clearing your browser cache.

    #885454
    yury

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

    #885626
    David
    Staff
    Customer Support

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

    #886049
    yury

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

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

    #886230
    David
    Staff
    Customer Support

    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.

    #886306
    yury

    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.