Change the color of the sold-out or disabled add to cart button

When using darker background color combinations, you might find the disabled (sold-out) button is difficult to read:

Example:

You can modify the code to improve the button appearance especially for these dark combinations.

Option 1 - Code to change text to white

Example:

Code to use:

/* -- code to change the sold-out button text -- */
.add-to-cart__wrapper .disabled {
    color:#ffffff;
}
/* - end - */

Option 2 - Code to change background color and text

Example:

Code to use:

/* -- code to change sold-out button background color and text -- */
.add-to-cart__wrapper .disabled {
    background-color: #dddddd;
    border: 1px solid #dddddd;
    color:#111111;
}
/* - end - */

Apply any valid hex color code to help with your shop:

http://www.colorhexa.com/web-safe-colors

Change the hover background color

Use this code in addition to the above options:

/* -- code a modify hover background color and text for sold-out button -- */
.add-to-cart__wrapper .disabled:hover {
    background-color: #dddddd !important;
    border: 1px solid #dddddd !important;
    color: #111111 !important;
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code