How can I modify the color of the 'Out of Stock' badge in Sense theme?

Store Design
1

How to change out of stock badge changes

Dresses-–-House-of-Araish.png
Dresses-–-House-of-Araish.png1366×635 351 KB

Cindy-Short-Dress-–-House-of-Araish.png
Cindy-Short-Dress-–-House-of-Araish.png1366×635 262 KB

https://houseofaraish.com/products/cindy-short-dress

How to change these colours?

1 Like
2

Hello @incognitomode

open your base.css available inside assets and on bottom please put this code

/* for sold-out text on product page */
.badge.price__badge-sold-out{
color: #271ed7 !important;
}

/* for sold-out on products grid */
span.badge.badge–bottom-left.color-inverse {
color: #fff !important;
background: #271ed7 !important;
}

3

@incognitomode

.button:disabled, .button[aria-disabled=true], .button.disabled, .customer button:disabled, .customer button[aria-disabled=true], .customer button.disabled {
    cursor: not-allowed;
    color: red !important;
    opacity: .5;
}

Add this code in the bottom of the base.css file.

  1. Navigate to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste Above code at the bottom of the file.
  3. Save it.
4

https://houseofaraish.com/products/cindy-short-dress

Product page still the same

No change even after adding the code

5

Hello @incognitomode
/* for sold-out text on product page */

.badge.price__badge-sold-out{
color: #271ed7 !important;
}

please add this one

6

Hi @incognitomode ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-main-product.css->paste below code at the bottom of the file:
.product .price--sold-out .price__badge-sold-out {
    color: #fff!important;
    background: #787878!important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

Perfect