Replacing the Woocommerce "Sale" badge with an icon

Support
#1

Folks, I’m trying to replace the Woocommerce sale badge with an icon. Specifically this icon:
https://csf.coastalmyst.com/wp-content/uploads/2016/11/sale-ribbon-thin.png

So far nothing I do will put it in the background and replace the existing default sale badge. You can see the site here:

https://csf.coastalmyst.com/

What am I missing?

Regards,
Jonathan

#2

Hi Jonathan,

Thanks for writing in. To achieve that, try adding this custom css.

.x-site .woocommerce span.onsale {
    background: url(https://csf.coastalmyst.com/wp-content/uploads/2016/11/sale-ribbon-thin.png) no-repeat;
    transform: none;
    top: 0;
    left: 0;
    height: 173px;
    font-size: 0;
}

Hope it works.

#3

That works great for the sale items on the home page and under the “On Sale” menu entry. But I have the sale badge enabled on individual products also, and the badge still shows as the old one. And because there is no border on those pages, it looks messed up. What do I need to add to the CSS to tell it to alter the badge on single product pages?

Thank you so much for your efforts on this; it’s hugely appreciated.

#4

Hey Jonathan,

We’ll just make a slight modification to the code provided earlier. Just remove the .x-site part of the code. So here’s the updated code:

.woocommerce span.onsale {
    background: url(https://csf.coastalmyst.com/wp-content/uploads/2016/11/sale-ribbon-thin.png) no-repeat;
    transform: none;
    top: 0;
    left: 0;
    height: 173px;
    font-size: 0;
}

That should work for both the Sale on the homepage and the individual product pages. Now, there will be an issue on the product page as a result of the “sale” tag. Here’s a screenshot to show you what I mean:

The magnifying glass icon will be covering the SALE tag. I’m sure you’ve already anticipated this but in case you’ll need help on the CSS for that, I’ll suggest two things to do to handle that.

  1. First, we can move the magnifying glass icon to the right
  2. Add a border to the image

Here’s how it would look:

And here’s the code to do that:

a.woocommerce-product-gallery__trigger {
    right: 0;
    left: auto;
}

.woocommerce div.product .images {
    border: 2px solid #e5e5e5;
}

Do note that this code is optional should you want to make achieve that look. All the best.

#5

Thank you so much! That is awesome. That fixes several issues all in one go. :smile:

Jonathan

#6

Awesome! Glad to help.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.