Home › Forums › WoodMart support forum › Product Label Customization

Product Label Customization

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 28, 2024 at 1:49 pm #617102

    marketing-3503
    Participant

    Hi there, I hope you are doing well. Is there anyway to customize product labels to have different colours? For example DEMO to be black background and “Commercial Grade” to have green background? Seems like all additional product labels are set to ONE colour.

    When I try use SVG to add custom label for my own colours, the SVG is too small.

    Thank you.

    November 28, 2024 at 2:06 pm #617113

    marketing-3503
    Participant

    Sorry, maybe whats best is can you help me move the SVG label to the bottom left of the image. i think this is the selector to edit –

    .product-labels .label-with-img {
    padding: 0;
    max-width: 80px;
    }

    Then It will look better. Please ensure CSS works with responsive devices too. Thank you!

    November 29, 2024 at 11:45 am #617546

    Hung Pham
    Keymaster

    Hi marketing-3503,

    Thanks for reaching to us and appreciate your patience.

    Please provide URL of the mentioned page, so I can take a closer look.

    Regards,

    November 29, 2024 at 11:55 am #617562

    marketing-3503
    Participant

    Thank you.

    The product is private so you need to login to view it at this link – https://gymstore.co.za/product-category/strength-equipment/plate-loaded-strength/ifp-plate-loaded/ifp-back-shoulders/

    It is the product circled in the screenshot. There is an SVG icon.

    Attachments:
    You must be logged in to view attached files.
    December 1, 2024 at 5:36 pm #618181

    Hung Pham
    Keymaster

    Hi marketing-3503,

    Thanks for your patience.

    The provided link does not have products that mentioned your custom labels. Please let me know if you need further helps.

    Regards,

    December 2, 2024 at 9:36 am #618242

    marketing-3503
    Participant

    Hi there, yes the product is “PRIVATE” so you need to be logged in using the admin link I sent and then click on this link to view it – https://gymstore.co.za/product-category/strength-equipment/plate-loaded-strength/ifp-plate-loaded/ifp-back-shoulders/

    December 2, 2024 at 6:33 pm #618659

    Hung Pham
    Keymaster

    Hi marketing-3503,

    Thanks for your patience.

    You are using image for custom label, I kindly recommend you preparing images you want before uploading them to your media library using the graphic editor (Photoshop or any other) to have a nice-looking grid.

    Regards,

    December 2, 2024 at 7:01 pm #618676

    marketing-3503
    Participant

    I am using a good SVG file to do this. I need help with CSS for the following – Help me move the SVG label to the bottom left of the image. i think this is the selector to edit –

    .product-labels .label-with-img {
    padding: 0;
    max-width: 80px;
    }

    Then It will look better. Please ensure CSS works with responsive devices too. Thank you!

    December 3, 2024 at 3:11 pm #618966

    Hung Pham
    Keymaster

    Hi marketing-3503,

    Please add the Custom CSS code below to Theme Settings > Custom CSS > Global custom CSS:

    div.product-element-top {
    overflow: visible;
}

div.product-labels{
	top: 0;
	height: 100%;
}

span.label-term-club-grade{
	position: absolute;
	bottom: 0;
}

    Regards,

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)