Sales Badge - How to change color of the badge?

estoremalaysia

The badge color is too dark.  I wanna change the badge color from dark brown to others for items on sales.  Yes, only the badge; the rest just stays as it is.

Here is the link: http://coco2u.com/product/coco2u-skincare-starter-kit-4-in-1/

Albert

Hi,

you can change its color with the following css:

.woocommerce span.onsale, .shop_slider .shop_slider_ul li .item_wrapper span.onsale { border-top-color: #E3E3E3 !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

estoremalaysia

Where should i add them in?

I tried adding this into:

woocommerce span.onsale, .shop_slider .shop_slider_ul li .item_wrapper span.onsale { border-top-color: #222222 !important; }

but it doesnt work.  PLease advice .

Albert

Each custom css need to be put under Theme options > Custom CSS & JS > Custom CSS section.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

estoremalaysia

Hi there, thank you.  It works now.

One more question, how about changing the Review rating stars to other color?

Currently the star color is brown.  I wanna change it to red.

http://coco2u.com/product/coco2u-skincare-starter-kit-4-in-1/

Albert

You can change them with the following css:

.woocommerce .star-rating span { color: #000 !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

nicolescheerer

Sorry to hijack this case
I have the problem that I get the same badge as the creator of the SALE - products.
Can someone tell me how to remove the badge?
Maybe I had installed a plugin in the past, which displays this badge (and also the CSS - code "<span class="onsale"><i class="icon-star"></i></span>").

But I can't remember which plugin that was. Or is it a function of BeTheme or Woocommerce?

Thanks a lot...

nicolescheerer

OK, found an solution:

This is because a product has a price and a bid price. Woocommerce then automatically creates this "stupid" badge. With the CSS - Code
.woocommerce span.onsale{
display:none;
}
Can you hide this one. The badge from another plugin will still be displayed.