Help: woocommerce .onsale badge sticker

Can you link me to the site and a product that's on sale so I can take a look at the code?

Thanks!

Hello again,

I apologize but my site is not yet online, I only host it in my computer. But I can give you the code that I use in my style.css file under childtheme for you to test it out. If I remove the "ul.products .onsale," the after style doesn't show up. But usually I only use .onsale on woocommerce and it should work. So I am thinking this has to do with your theme?

ul.products .onsale, .onsale {
position: absolute;
animation: 1s ease 0s normal none infinite pulse;
background-color: #ff3371;
color: #fff;
font-weight: 700;
width: 46px;
height: 46px;
line-height: 46px;
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 99; }
.onsale:after {
background: none repeat scroll 0 0 padding-box #ff3371;
-webkit-border-radius: 5px;
border-radius: 5px;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -4; }

@-webkit-keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }

70% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2); }

to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }

@-moz-keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }

70% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2); }

to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }

@-o-keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }

70% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2); }

to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }

@keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }

70% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2); }

to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }

Hmm, it shouldn't - GP only produces a few lines of CSS for WooCommerce, mainly to make things look as they should. Haven't touched anything like the badges.

If you have an online site where you can reproduce the issue, it would really help. I need to look at the code stack to determine if there's any code overwriting the core code.

Hello again,

Can you take a look at this demo site. I wanted to have the same sticker of onsale effect in your theme. The pseudo-element ::after doesn't seem to work in the single product page but in product collection or category page it works.

Fixed the demo site link.

I went ahead and set up a completely default WooCommerce installation using GeneratePress, and added their importable demo content.

Here's what I see on the shop page:

And here's what I see on the single product page:

The on sale sticky seems to be working as it should with GP.

I would have to see the actual problem on a GP installation in order to figure out what's going on.

Maybe try deactivating some of your plugins to see if the issue is coming from one of them?

Yes I have managed to come out with the same green sale sticker, but I wanted to create an animated one like on the site. I have found the problem in the coding. The pseudo-element is being override by woocommerce span class. As a solution, I just renamed my css class with the same as what woocommerce did in its onsale class. Everything works as I wanted now. Thank you so much for your time, I highly appreciate it.

Good to know! Glad I could help :)

Just for anyone who comes across this looking for a solution (As the above did not work for me). I solved this by using display:none I finally figured it didn't really matter if it displayed on the single pages.

span.onsale{
display:none;
}

If I could just figure out how to change the font colour from green...

You can change the color of the badge like this:

.woocommerce span.onsale {
    background-color: #77a464;
    color: #FFFFFF;
}

Just adjust the values :)

Hy,

And the shape, is possible change it?

Now only appears a rectangular shape and it was perfect change it to circular...

Thanks...

RMR

Try this:

body.woocommerce ul.products li.product .onsale {
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    min-height: initial;
    border-radius: 50%;
}

Thanks Tom,

It works but only at related products !

For exemple, here.
https://staging13.productosdepeluqueria.info/producto/spray-straightening-250ml/

But no in the other places as here:
https://staging13.productosdepeluqueria.info/

Any suggestion?

Thanks again!

RMR

Can you try this:

body.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    min-height: initial;
    border-radius: 50%;
}