Home › Forums › WoodMart support forum › Change Custom Label Position on Shop Grid and Product Page

Change Custom Label Position on Shop Grid and Product Page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 25, 2021 at 10:03 am #334443

    mudesports
    Participant

    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.
    November 25, 2021 at 11:00 am #334470

    Luke Nielsen
    Keymaster

    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

    November 26, 2021 at 4:48 am #334700

    mudesports
    Participant

    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

    November 26, 2021 at 2:39 pm #334926

    Luke Nielsen
    Keymaster

    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

    April 26, 2022 at 10:43 am #370999

    mudesports
    Participant

    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.
    April 28, 2022 at 11:28 am #371619

    Luke Nielsen
    Keymaster

    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

    April 28, 2022 at 12:01 pm #371630

    mudesports
    Participant

    Hey Luke,

    Thanks heaps!! It works like charm!

    A good day ahead!
    XL

    April 28, 2022 at 2:19 pm #371677

    Luke Nielsen
    Keymaster

    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
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Change Custom Label Position on Shop Grid and Product Page’ is closed to new replies.