Woocommerce Sale Badge

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 :)

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

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?

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

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;
}

Thanks David

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

Scott

Your welcome Scott

Hello! I can't see how can i display these badges...Where can i activate it?

Appearance/Customize... something there?

Many thanks in advance!

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

Ok great, many thanks David!

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

Thanks again

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>';
} );