Style sold out label without writing custom CSS

Hi,

how can we style the sold out label without writing custom css like

.out-of-stock {
    background: orange!important;
    color: #fff!IMPORTANT;
}

1. I don’t want to use !important statements
2. If there is a configuration I would prefer that with a paid theme.

Hi,

There are no any options in WooCommerce to style its label. You can write a CSS without important statements also like this

body .out-of-stock {
    background: orange;
    color: #fff;
}

Regards

Thank you.

Wouldn’t it make sense to make is customizable like the other labels (Hot, New)?

http://prntscr.com/j9evt5

btw, this is the code which would work for category view and detail view:

body .out-of-stock,
body .product-image-summary .out-of-stock,
body .product-labels .out-of-stock {
    background: orange;
    color: #fff;
    padding:5px;
    font-weight: normal;
}

Sorry, what customization do you mean?

I meant for the background color and the font color like here https://prnt.sc/j9yw1v

Hello,

Please provide the link to the page with sold-out products.

Best Regards

To clarify my question: I’d prefer to have a settings page for the sold out label to define the colors instead of writing CSS. I can CSS but due to the situation with updates and so on I think it’s more save to have this asa setting in theme settings.

Maybe I should post it better to Feature Request.

I don’t know why you need the link, but here you are 🙂

Hello,

For now we do not have such an option. Please add this CSS to Theme Settings > Custom CSS

body .out-of-stock, body .product-image-summary .out-of-stock, body .product-labels .out-of-stock {
    background: orange;
    color: #fff;
    padding: 5px;
    font-weight: 400;
}

Replace the color for that one you need.

Provided activated license you can update your theme automatically and no CSS would be lost.

Best Regards

Thank you, but I don’t understand you. This is what I posted a few posts earlier by myself!?

The topic can be closed.

Sorry for the misunderstanding.

[Author]

Posts