Home › Forums › WoodMart support forum › Style sold out label without writing custom CSS

Style sold out label without writing custom CSS

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 23, 2018 at 10:43 pm #54182

    getimo
    Participant

    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.

    April 24, 2018 at 6:11 am #54211

    Artem Temos
    Keymaster

    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

    April 24, 2018 at 10:55 am #54288

    getimo
    Participant

    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;
}
    April 24, 2018 at 11:57 am #54299

    Artem Temos
    Keymaster

    Sorry, what customization do you mean?

    April 25, 2018 at 2:05 pm #54525

    getimo
    Participant

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

    April 25, 2018 at 2:47 pm #54549

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    April 25, 2018 at 2:49 pm #54552

    getimo
    Participant

    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 🙂

    April 25, 2018 at 3:40 pm #54576

    Elise Noromit
    Member

    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

    April 25, 2018 at 3:59 pm #54589

    getimo
    Participant

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

    The topic can be closed.

    April 25, 2018 at 4:30 pm #54601

    Artem Temos
    Keymaster

    Sorry for the misunderstanding.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Style sold out label without writing custom CSS’ is closed to new replies.