Sales Badge

Support
#1

Hey I would like to change the sales badge to a custom icon I made. How can I do that?

#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Sorry. Here it is.
http://vps28450.inmotionhosting.com/~outdoordogsupply

#4

Hey @odsadmin,

Hope you are doing great :slight_smile:
Please give a try to this following CSS code.

.isb_sale_badge.isb_style_pop.isb_orange.isb_left {
    background: url(http://www.free-icons-download.net/images/itune-store-icon-69061.png) !important;
    background-size: 100% !important;
}

.isb_style_pop svg {
    fill-opacity: 0;
}

Replace background URL with your own image URL.

Let me know how it goes.

Regards

#5

That worked when I had a plugin activated but it put font over the top. Could you tell me how to do it without that plugging. I just deactivated it.

I tried this

.onsale {
background: url(http://vps28450.inmotionhosting.com/~outdoordogsupply/wp-content/uploads/2017/08/Sale-Icon.png) !important;
background-size: 100% !important;
}

.isb_style_pop svg {
fill-opacity: 0;
}

But as you can see it has the word sale over the top and it is in the corner and not showing the starburst/Full image.

Your can see it on this page. http://vps28450.inmotionhosting.com/~outdoordogsupply/garmin-alpha-100/

and this page

http://vps28450.inmotionhosting.com/~outdoordogsupply/product/garmin-alpha-100-with-drivetrack-70/

#6

Hi There,

Try this CSS:

.onsale {
background: url(http://vps28450.inmotionhosting.com/~outdoordogsupply/wp-content/uploads/2017/08/Sale-Icon.png) !important;
background-size: contain !important;
color: transparent !important;
height: 150px !important;
top: -26px !important;
left: -24px !important;
width: 150px !important;
}

Feel free to adjust the values accordingly.

1 Like
#7

Ok. I added the code and you can see what it did. Is there a way to make it smaller and fit in the corner?

#8

Hey,

Replace the code by this:

.onsale {
  background: url(http://vps28450.inmotionhosting.com/~outdoordogsupply/wp-content/uploads/2017/08/Sale-Icon.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    height: 95px !important;
 top: -3px !important;
left: -4px !important;
width: 95px !important;
}

I just added the background-repeat rule and change the top, left, height and width values. If you have CSS skills, you can adjust the position and size changing the rules above.

#9

That worked great!! :slight_smile: But when you go to the product you can still see the words very little in white over the top of the icon. Can we remove that?

Here is a link so you can see it. http://vps28450.inmotionhosting.com/~outdoordogsupply/product/garmin-alpha-ultimate-hound-bundle-with-the-drivetrack-70/

#10

Hi there,

Please try this code:

.woocommerce-product-gallery__trigger {
    opacity: 0;
}

Hope this helps.

#11

You are amazing!! Thank you. I have one more question Is there a way to make all the items on sale show up on a certain page? I swear I have seen that some were but can seam to find it again.

#12

I just found this [sale_products per_page=“12”]

#13

Glad to hear you got it sorted.

Cheers!

#14

Something happened and now the sale image only shows when you are looking at the categorize it dose not show when you click on the product. Here is an example http://vps28450.inmotionhosting.com/~outdoordogsupply/product/garmin-alpha-100-drivetrack-70-gps-tablet-combo/

#15

Hello There,

The OnSale does not display because you are using a modified single product page layout. You may have remove it in the template or the hook were removed in the template which is why it is no longer displaying. Do you have any modifications in your child theme? Because right now, all I see is x-content-band containers and not the default product image and product summary container.

Could you please send us the content code of content-product-single.php file?

#16

I added the plugin WooThumbs - Awesome Product Imagery (Premium) I’m pretty sure this is what messed it up do you have any ideas on how to fix it.

#17

Hi there @odsadmin,

Thanks for writing back!

Unfortunately debugging a third party WooCommerce plugin would be outside of the scope of support we can provide. I’d recommend removing the “WooThumbs” plugin and contacting the plugin author to get to the root of the cause.

Thanks for your understanding.