Custom Label visible on product page

Hi!
I would like to align the product custom label to left on product page as it is on shop page and style it a bit, i.e. change background color, border style and radius with css. Screenshot of how I would like the label to be is attached. Could you please help?

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.single-product .product-images .labels-rounded .product-label {
    right: auto;
    left: 25%;
}

.single-product .product-images .product-label.attribute-label:not(.label-with-img) {
    background-color: silver;
    color: white;
}

Best Regards.

Hi,
Thanks! The label was still on the right side on product single page.

I would like the label to have transparent background and just a solid border with 5 px border radius in both shop and single product pages. An example is attached.
Thank you so much in advance!

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the previous Custom CSS with the following then check back.

.single-product .product-images .product-label.attribute-label:not(.label-with-img) {
    background-color: transparent;
    color: black;
    border: 2px solid;
    border-radius: 5px;
}

.product-images .labels-rounded {
    right: auto;
    left: 25%;
}

Best Regards.

Thanks! The css worked! Just two more questions regarding this:

1. Can I change the padding of the border, as the top and bottom margins are larger, then the ones on left and right (Image 1)

2. The css didn’t effect the label on shop or home page (Image 2). I need it to work on shop page as well.

Thanks in advance!

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

1) Please try adding the following Custom CSS for that.

.product-images .labels-rounded .product-label {
    min-height: 30px;
}

2) Please try adding the following Custom CSS for that.

.product-label.attribute-label:not(.label-with-img) {
    background-color: transparent;
    border: 2px solid;
    border-radius: 5px;
    min-height: 30px;
}

Regards.
Xtemos Studios.

Thanks, it worked perfect for desktop. I guess I need some css for mobile as well, as the position of label is a bit incorrect. Screenshot is attached!

Attachments:

You must be logged in to view attached files.

Another question:
When you hover on a product, which is out of stock, instead of ADD TO CARD button we have READ MORE button. Is the text of READ MORE button editable, so I can change the text?

Thanks!

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-images .labels-rounded {
    left: 0;
}

Regards.
Xtemos Studios.

Hello,

You need to install and use the loco translate plugin and choose the correct path to translate the string.

You can also watch the video in our detailed documentation in the following link: https://www.youtube.com/watch?v=D3NsDdMzsls

Best Regards.

Thanks!

Hello,

Well, @hello@risqueteam.com. It’s been great chatting with you.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Kind Regards.

[Author]

Posts