Label Position

Please watch the video and screenshot in the private section

Thank you

Hello,

I saw the screenshots you attached.

Please provide the URL of the website and the URL of the product to check it myself and help you out accordingly.

Regards.
Xtemos Studios

Logins in private section and its the only product in the shop

Thank you

Hello,

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

.product-label.label-term-bio.label-attribute-pa_bio {
    margin-top: 226px;
}

Regards.
Xtemos Studios

Thank you so much this has worked great for the product grid but not on the product page

Please check the screenshots I send you for reference and the video also

Hello,

You are Most Welcome.

For the single product page please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.single-product .product-label.label-term-bio.label-attribute-pa_bio {
    margin-top: 500px;
    margin-right: 529px;
}

Regards.
Xtemos Studios.

Hi There!

Thank you so much! i have set the position I want for both product grid and also product page!

However this only works for desktop and I want the position to be fixed for all screensizes! mobile and tablet

how can I do that?

Thank you

Hello,

You are Most Welcome.

You need to adjust the CSS I provided you according to your requirements as you want to display on mobile and tablet and then add the CSS to the Custom CSS for Mobile and Custom CSS for Tablet respectively.

Best Regards

Thank you for your answer!

if i knew how to do it i wouldn’t even write in the first place!
it would be good if you let me know how to do that

thank you

and strange things happen when the product is on the sale! the position of the label changes completely! you can check it in the shop

as well as in-shop page and also cross and up-selling grids! please check the whole and get back to me

Thank you so much!

Hello,

I have visited your website and the issues occur when you increase the margin-top values. Please replace all the previous Custom CSS with the following in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.product-label.label-term-bio.label-attribute-pa_bio {
    margin-top: 230px;
    margin-left: 4px;
}

.single-product .product-images-inner .product-label.label-term-bio.label-attribute-pa_bio {
    margin-top: 530px;
    margin-right: 529px;
}

Note: Actually when the label sale is also enabled then the margin value we add will work according to it. So we need to reduce the margin value then it will be displayed inside the image.

And there is no other way that we can display it of the same position when the sale label is enabled. It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

unfortunately, this doesn’t work at all, and it’s all over the place and on mobile or tablet, it doesn’t work at all

Hello,

I have logged into your website and added the CSS back and it’s working.

Sorry but this is how it works and you cannot make it to display at the same position when there are other labels as well.

It requires customizations and this is beyond our limitations and support policy.

Best Regards

no, it doesn’t! working means when it works site-wide and for all products

Thanks anyway

Hello,

Sorry but the CSS works Globally for all the products and you could not restrict it to specific products.

It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

That still a wrong statement!

I’m not trying to restrict it to specific products! its about position of the label which must be unified site-wide just like the normal labels, sale for example and so on

Hello,

I have logged into your website and added a bunch of CSS codes in the Custom CSS for Desktop, Mobile and Tablet respectively.

Please clear cache and check back. If the position of the label is according to what you require.

Regards.
Xtemos Studios

[Author]

Posts