How to nicely display custom product labels outside of product thumb?
-
The product labels are great, but currently they overlap with the product picture, making the product thumb partly hidden.
We would like to make products labels display like this popular store:
https://www.coolblue.nl/en/mobile-phones/smartphones/android
See the product label ‘Coolblue’s Choice’
The product label is positioned more to the left not over the product image and there is a line break between the words. This way the label does not block view of the product image.
Is this possible to do on Woodmart?
How can we do this?
We also would like to use multiple custom labels through attribute with different background colors. We can do this by css. Is there a better way to do so?
Hello,
By default, product labels are positioned over the product image. If you want them to sit more to the side try to add the following custom css code in Theme Settings > Custom CSS.
/* Move labels slightly outside the image */
.product-labels {
top: 50px !important;
left: -10px !important;
max-width: 140px !important;
}
/* Better text wrapping like Coolblue */
.product-label {
text-transform: none !important;
white-space: normal !important;
word-break: break-word !important;
text-align: left !important;
line-height: 1.3 !important;
}
Best Regards,
.
