Change Custom Label Position on Shop Grid and Product Page

hi there,

I add a new attribute (recycled) and I’d like the label to be displayed at the low right corner (for both: shop/grid and product page). I’ve attached some pics for reference.

At this moment the label is not displaying on the website as I prefer to fix the position first. On the website you can see the “same label/icon” on the desired position but this icon has been added on the photo.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please, first of all, show this custom label on any one product and send us a URL then we will create custom CSS code for you.

Kind Regards

Hi Luke.

Find the URL below:
https://www.mude-sports.com/shop/3d-mask-japanese-garden-black/

Position for shop grid and product page should be right-bottom corner (like previous message screenshots)

Tks

Hello,

You can change the position of the recycled label using the following custom CSS code in Theme Settings -> Custom CSS -> enter the code to the “Global Custom CSS” field.

.single-product .product-images .labels-rounded {
    bottom: 0;
}

.single-product .attribute-label {
    position: absolute;
    bottom: 156px;
}

.product-grid-item .attribute-label {
    position: absolute;
    bottom: 0;
    right: 0;
}

.product-grid-item .product-labels {
    right: 7px;
    bottom: 7px;
    max-width: 100%;
    pointer-events: none;
}

Kind Regards

Hi Luke,

How I can show 2 attribute images on the same product?
Doing some test I see both attribute images work well but both are in the same position stated on the CSS code.
Is there any way to show the 2 attribute images on different positions – like 1 attribute on left top corner, 1 attribute on right below corner (see image below)?

PS- Today we only display the “recycled” attribute label – right bottom corner. Now we want to show the one on the left top corner.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please, replace the old code with this one. So after that, the “recycled” attribute label will be on the right bottom corner and others on the left top corner.

.single-product .product-images .labels-rounded {
    bottom: 0;
}

.single-product .label-term-recycled {
    position: absolute;
    bottom: 156px;
}

.product-grid-item .label-term-recycled {
    position: absolute;
    bottom: 0;
    right: 0;
}

.product-grid-item .product-labels {
    right: 7px;
    bottom: 7px;
    max-width: 100%;
    pointer-events: none;
}

I hope this helps!

Kind Regards

Hey Luke,

Thanks heaps!! It works like charm!

A good day ahead!
XL

Hello,

Glad that everything is sorted out!

Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards

[Author]

Posts