[Resolved] Woocommerce Sale Badge

[_blank]

Hi There

How do I change the shape of the Woocommerce sale badge?
Also it’s pushing the image down which is odd.
I’m using Beaver Themer but don’t think i customised it in there1

Thanks
Scott

[Leo]

Hi there,

Can you guide me to a page with the sales badge?

This is what the default should look like: http://demo.generatepress.com/shop/

Let me know 🙂

[_blank]

Hi Leo

Here’s an example

http://mackiedev1.belowthenoise.co.uk/salvesengraham/product-category/lighting/

It’s viewing just above the image rather on top off.

Thanks
Scott

[David]

Hi Scott, this will keep it’s centered position overlayed on the image:

.woocommerce span.onsale {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

Do you still need help changing the shape of it? If so how?

[_blank]

Hi David

Thanks thats really helpful.
If I wanted to adjust the alignment to be either left aligned or right aligned what would i need to change?

Thanks
Scott

[David]

Hi Scott for left its just a simple case of absolute position:

.woocommerce span.onsale {
    position: absolute;
}

For right aligned we add Right position to zero:

.woocommerce span.onsale {
    position: absolute;
    right: 0;
}

If you wanted it extend the full width then:

.woocommerce span.onsale {
    position: absolute;
    left: 0;
    right: 0;
}

[_blank]

Thanks David

Thats really helpful. I’ve saved those for future use.

Scott

[David]

Your welcome Scott

[Julio Merodio]

Hello! I can’t see how can i display these badges…Where can i activate it?

Appearance/Customize… something there?

Many thanks in advance!

[David]

Hi there,

make sure you have the Woocommerce module activated in Dashboard > Appearance > GeneratePress.
Then in Customizer > Layout > Woocommerce you will see a list of options:

https://docs.generatepress.com/article/woocommerce-overview/

Under Shop and Product Tab – enable the one labelled: Display sale flash

[Julio Merodio]

Ok great, many thanks David!

And to translate labels, i should do via pomo files?

Thanks again

[David]

The Sales badge is output by Woocommerce plugin, most Translation plugins will handle it correctly.
But if you want to manually change the text for a single language install then you can use this PHP Snippet:

add_filter( 'woocommerce_sale_flash', function() {
    return '<span class="onsale">YOUR TEXT HERE</span>';
} );

[Author]

Posts