How can I split custom label text ?

Hello, I’ve a custom label called bestseller, but when it appears on the product image it seems way too big and I need to make the border radius to be circular so I need to split the word into 2 lines how can I do this ? because I tried to put <br> on the name of the attribute but it doesn’t has any effects.

Hi tarek,

Thanks for reaching to us and appreciate your patience.

Please provide URL of the mentioned page, so I can take a closer look.

Best Regards,
Hung PD

Hello Hung,

I’ve added the website URL as your request.

Hi tarek,

If you want to break words, it looks like this and not good https://ibb.co/sp87SSYC

Do you want to increase width or reduce the border radius?

Best Regards,
Hung PD

I need it to be “best” in the first line and “seller” in the next line then I’ll see what it looks like then I’ll see what can I do with width or border radius.

Hi tarek,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

span.product-label.attribute-label:not(.label-with-img){
    font-size: 0;
    display: block;
    position: relative;
}

span.attribute-label::before,
span.attribute-label::after{
    font-size: 12px;
    display: block;
    color: var(--color-gray-900);
}

.attribute-label::after{
    content: "Seller";
}

span.attribute-label::before {
    content: "Best";
}

Regards,
Hung PD

Seems to be ok, thank you very much.

Hi tarek,

Glad to hear your issue has been resolved. And hope you can share you feedbacks here https://tally.so/r/w4l54k

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,
Hung PD

[Author]

Posts