Change Custom Label Position on Shop Grid and Product Page

[mudesportsCustomer]

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

Private Content Hidden

Attachments:

You must be logged in to view attached files.

[Luke NielsenStaff]

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

[mudesportsCustomer]

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

Private Content Hidden

[Luke NielsenStaff]

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

[Author]

Posts