How to change the text on sale badge i handpicked products?

Hi @boppar

Thanks for reaching out!

I understand that you would like to translate the text on the sale badge in the handpicked products block from Rea to Kampanj.

You could use the third-party plugin Loco Translate for customized translations.

Hope this helps!

Hi @xue28

Thanks for your answer. I do my very best to limit my use of plugins and I don’t want to download a plugin just to change one word. That’s why I wonder if it can be done by adding CSS?

Hi there @boppar ??

I don’t want to download a plugin just to change one word. That’s why I wonder if it can be done by adding CSS?

Thanks for reaching out. Happy to help you with this!

Utilizing CSS might not ideal for this. Take a look at the pages linked here and here.

I’d suggest using PHP, instead. Feel free to check out How to replace a word inside a string in PHP and How to Replace Strings in PHP.

I hope that helps, have a wonderful day!

Hello @anastas10s

Thanks for your advice. Unfortunately I can’t get it to work.

Hi @boppar

That badge is a?<span>?containing text, and you can’t just swap out the contents of the span using CSS. Sometimes you can do something tricky by hiding the existing text and adding the new text with the?before?or?after?pseudo elements (like in the example from the article linked here), however it depends on how things are set up.

For the regular Sale badge, I found the following CSS allowed me to add some new text and hide the old text in the handpicked block:

.wc-block-handpicked-products .wc-block-grid__product-onsale span:first-child {
    font-size: 0px;
    position: relative;
}
.wc-block-handpicked-products .wc-block-grid__product-onsale span:first-child:before {
    content: 'Rea';
    font-size: 12px;
    display: inline-block;
    vertical-align: top;
   
}

You can take a look at this screenshot: https://screencast-o-matic.com/i/c012oUVBATJ

If that doesn’t work, please share the exact page URL where you added the Handpicked block, so I can provide you the proper solution on it.

Thanks!

Hi @amiralifarooq

Thanks a lot! It almost works, but there is still an issue.

I added this CSS:

.wc-block-handpicked-products .wc-block-grid__product-onsale span:first-child {
    font-size: 0px;
    position: relative;
}
.wc-block-handpicked-products .wc-block-grid__product-onsale span:first-child:before {
    content: 'Kampanj';
    font-size: 12px;
    display: inline-block;
    vertical-align: top;
}

The badge used to look like this: https://ibb.co/4RWPCmj

Now it looks like: https://ibb.co/dW0QQ7D

The text is changed, but it’s not centered in the badge, see the exclamation mark. Maybe it has to do with CSS I use before:

/* Moving badge to the top of the image */

.wc-block-grid.wp-block-handpicked-products.wc-block-handpicked-products
ul li .wc-block-grid__product-onsale {
   border:none;
   background-color:#e60000;
   color:#fff;
   font-size:1.1em;
   position: absolute;
   top:15px;
   left:15px;
}

/* Exclamation mark after Rea */

.wc-block-grid.wp-block-handpicked-products.wc-block-handpicked-products
ul li .wc-block-grid__product-onsale:after{
 content:"!";
 position:relative;
 left:-2px;
}

Amir, do you know how I center the text “Kampanj” and have it as the same size as the exclamation mark?

The url is the one in my first post in this thread,

• This reply was modified 1 year, 5 months ago by boppar.

Even a noob like me managed to fix the last issue. Change the font size and vertical-align.

.wc-block-handpicked-products .wc-block-grid__product-onsale span:first-child {
    font-size: 0px;
    position: relative;
}
.wc-block-handpicked-products .wc-block-grid__product-onsale span:first-child:before {
    content: 'Kampanj';
    font-size: 14px;
    display: inline-block;
    vertical-align: center;
}

Thanks again @amiralifarooq.

Have a great saturday.

HI @boppar

I’m glad you were able to fix the last issue here and thanks for sharing it with the community too! ??

Meanwhile, if you have a moment to spare, we would love it if you could share your thoughts with us by leaving a review or feedback. Your experience and feedback are important to help us improve and ensure we’re always providing the best possible support.

Thanks!

I’ve already gave a review a long time ago.

Noted, thank you so much @boppar