Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 4, 2016 at 4:57 pm #656654
    IanWorthington

    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

    July 4, 2016 at 8:02 pm #656712
    Yigit

    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

    July 4, 2016 at 9:53 pm #656763
    IanWorthington

    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

    July 5, 2016 at 9:32 am #656910
    Rikard

    Hi Ian,

    Try adding !important to Yigits code: 

    #top .onsale { 
top: -45px !important; 
background: orange !important; 
color: red !important; 
}

    Regards,
    Rikard

    July 5, 2016 at 10:51 am #656935
    IanWorthington

    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

    July 5, 2016 at 3:12 pm #657084
    Yigit

    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

    July 5, 2016 at 5:12 pm #657162
    IanWorthington

    Thanks Yigit.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘WooCommerce Sale icon’ is closed to new replies.