Okay
  Public Ticket #2758654
Product badge colors
Closed

Comments

  • Regularehf started the conversation
    April 23, 2021 at 10:12am

    I have searched your documentation and previous support tickets, and tried a few different CSS approaches, but I haven't found the solution to this exact subject.

    The thing is I want the product badges that come built into Kalium (featured, out of stock and sale) to each have different colors - for example out of stock to be red, featured to be blue and sale to be green. How can I do this?

    Based on other support tickets I have figured out how to change the color of all the badges at the same time (to make them all red for example) with:
    .woocommerce .product .onsale
    background: red;

    But like I say I want the different kind of badges to have different colors.

    Can you please direct me with what CSS code I can do this?

    {"wp":{"use":false,"adminUrl":"https://www.regular.is/wp-admin","username":"","password":""},"ftp":{"use":false,"url":"","port":"","user":"","password":"","path":""}}
  •  1,558
    Laborator replied
    April 26, 2021 at 8:37am

    Hi there,

    Use this CSS below to change the badge colors:

    /* Sale Badge */
.woocommerce .product .onsale {
    background: green;
}
/* Out of stock Badge */
.woocommerce .product .onsale.oos {
    background: blue;
}
/* Featured Badge */
.woocommerce .product .onsale.featured {
    background: green;
}

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  • Regularehf replied
    April 26, 2021 at 10:51am

    Beautiful, thank you :-)

  •  1,558
    Laborator replied
    April 27, 2021 at 7:21am

    Hi Regularehf,

    Happy to hear thatsmile.png

    Have a nice day!

    P.S: If you like the theme, it would help us a lot if you could give us a five-star rating on Themeforest from your Downloads tab.

    A huge thank you from me and Laborator in advance.

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group