Woocommerce sales badge

Please post the url to a relevant page.

Iorro,

Here is an example url that I am referring to:
https://www.plexusloseweight.org/shop/

I can’t find any recent changes to Storefront or WooCommerce that could have done this change. Maybe a plugin you tried?

Anyway, you can do what you want with some custom css:

.products li .onsale {
  display:block;
  position:absolute;
  top:20px;
  right:20px;
  background-color:#ff6060;
  border-radius:20px
}

You can use a plugin like this one to enter custom css:
https://www.ads-software.com/plugins/simple-custom-css/

Lorro is right, the rounded badge you’re described isn’t part of Storefront, but I believe it is the case when using WooCommerce with a theme that doesn’t have any specific styles for WooCommerce (e.g. Twenty Sixteen).

Iorro and Riaan, thanks for your response. Riaan, I am using woocommerce storefront by itself as its own theme. My first day I was using Twenty Fifteen with woocommerce, but noticed it wasn’t very compatible. woocommerce recommended their storefront theme so I switched to it. The circle sales badge was working fine for about two weeks, and then switched about 3 days ago.

Iorro, I am brand new to wordpress. So, I am very apprehensive about making changes to css. By using the recommended css plugin I should be fine? Not sure how to use it. I added the woocommerce light box plugin, but the circle sales badge was working for awhile after that?

Changing the css is not risky. If the css doesn’t work, leave it in and post back here. In the worst case you can just delete the css in the plugin settings.

Iorro, worked well, thanks! Here is how it turned out:
https://www.plexusloseweight.org/shop/

Question, I will probably leave the button colors how they are but is there a way to change the button and font color or does that require additional css coding.

Also, look at this page please: https://www.plexusloseweight.org/shop/biocleanse/
It shows the old button. I think I am ok with it this way but should the css code adjusted this one as well or does it require another css code? Just looks different, not as eye catching.
Thanks! Dave

If we want a different look we will need different styles.

Take out the previous styles and try this:

/* both pages */
.onsale {
  display:block;
  position:absolute;
  top:20px;
  color:#ffffff;
  background-color:#ff6060;
  border-radius:20px;
}
/* single product page */
.single-product .onsale {
  left:150px;
}
/* catalog page */
.products .product .onsale {
  right:20px;
}

“color” is the font colour and “background-color” is, well, the background colour.
You can use your choice of hex colour code from here:
https://www.w3schools.com/colors/colors_picker.asp

If it doesn’t work, leave in the new styles and post back.

More about css here:
https://www.w3schools.com/css/

Iorro,
That is fantastic, worked perfectly!!! Thanks again for all of your assistance!
Dave