Round Offer Labels

oval:

#main-content span.onsale {  
  border-radius: 19px !important;
}

or round:

#main-content span.onsale {  
  padding: 36px 10px 20px 10px !important;
  height: 100px;
  border-radius: 50px !important;
}

Great!!!
It worked wonders!
Thank you very much!!

Hi @lorro!
How can I add an image designed by me for the label?

#main-content span.onsale {  
  background-image: url("paper.gif");
}

Replace paper.gif with the full url to your image. Your image can go in the media library.

It has not worked. Keep showing the previous image generated using CSS

I added the following code:
#main-content span.onsale {background-image: url(“https://vegan-tattoo.com/wp-content/uploads/black-price-etiqueta.png”);}

We’re fighting what the theme wants to do. Try this css:

#main-content span.onsale {
  background-image: url("https://vegan-tattoo.com/wp-content/uploads/black-price-etiqueta.png") !important;
  background-color: transparent !important;	
}

Then you’ll need to get rid of the current “offerta!” text. Try this snippet:

add_filter( 'woocommerce_sale_flash', 'wc_custom_replace_sale_text' );
function wc_custom_replace_sale_text() {
  return "";
}

You can use the “My Custom Functions” plugin for code snippets.

• This reply was modified 7 years ago by Majeed Raza.

We are making progress. I added the first code and it seems that the image coexists with the text created by CSS. When I add the second code, everything disappears. Both the image and the text. I have deleted the second code so you can check

Try: return " ";

Remove the entire label, leave the code so you can check it

I can’t check it if its not there.

What happens when you use this snippet:

add_filter( 'woocommerce_sale_flash', 'wc_custom_replace_sale_text' );
function wc_custom_replace_sale_text() {
  return " ";
}

If that doesn’t work, remove the snippet and I’ll see if I can make the ‘offert!” text transparent.

By adding the code the tags disappear.
I delete the code so you can check.

OK, forget the code snippet, we can make the offerta! text color transparent:

#main-content span.onsale {
  width: 59px;
  height: 59px !important;
  color: transparent !important;	
}

Fantastic job!!!
Now it worked! A great help!
thank you very much

They looked good but I do not know what happened that now looks strange

Sorry, sorry, my mistake. I created the image too small. With a size of 60 x 60 px it works perfectly.
Thank you very much for all the great help