Product Label Customization

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.

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!

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,

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.

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,

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/

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,

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!

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