Is there a standard way to change the location and appearance of WooCommerce’s SALE icon in Enfold? As you can see on:
http://theemeraldemporium.co/shop/
mine overlay the details text and the colors are not the best.
Ian
Hey IanWorthington!
Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
#top .onsale { top: -45px; background: orange; color: red; }
Best regards,
Yigit
Hi Yigit
Thanks looks promising but the background-color seems to be overridden by the following in enfold.css:1, maybe because it is more specific? (not sure about css precedence rules):
.main_color .widget_price_filter .price_slider_wrapper .price_slider .ui-slider-handle, #top .main_color a.remove, #top .main_color .onsale {
background-color: #50c878;
}
Ian
Hi Ian,
Try adding !important to Yigits code:
#top .onsale {
top: -45px !important;
background: orange !important;
color: red !important;
}
Regards,
Rikard
Thanks Rikard, that works fine.
Is it ok to use !important like this? I was led to believe using it at all was troublesome?
Ian
Hi,
It is sometimes troublesome when used on a selector that affects many elements. In this case, it should be fine. If you see any issues with it, please let us know!
Best regards,
Yigit
Thanks Yigit.