Home › Forums › WoodMart support forum › Custom Label visible on product page

Custom Label visible on product page

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 11, 2021 at 8:10 am #324269

    [email protected]
    Participant

    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.
    October 11, 2021 at 10:21 am #324314

    Aizaz Imtiaz Awan
    Keymaster

    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.

    October 11, 2021 at 10:45 am #324320

    [email protected]
    Participant

    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.
    October 11, 2021 at 11:20 am #324331

    Aizaz Imtiaz Awan
    Keymaster

    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.

    October 11, 2021 at 1:47 pm #324382

    [email protected]
    Participant

    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.
    October 12, 2021 at 6:15 am #324468

    Aizaz Imtiaz Awan
    Keymaster

    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.

    October 12, 2021 at 7:02 am #324478

    [email protected]
    Participant

    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.
    October 12, 2021 at 7:08 am #324481

    [email protected]
    Participant

    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.
    October 12, 2021 at 7:09 am #324483

    Aizaz Imtiaz Awan
    Keymaster

    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.

    October 12, 2021 at 7:13 am #324484

    Aizaz Imtiaz Awan
    Keymaster

    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.

    October 12, 2021 at 1:58 pm #324641

    [email protected]
    Participant

    Thanks!

    October 13, 2021 at 5:55 am #324775

    Aizaz Imtiaz Awan
    Keymaster

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

The topic ‘Custom Label visible on product page’ is closed to new replies.