Badge Style
-
I have successfully changed the text of the “out of stock” badge for Woolentor product elements (used with Elementor Pro). However, I can’t seem to target it with CSS to style it a little. I just want to add a background so that it is always legible. Using Chrome’s inspector toolkit, I can add a white box with 5px padding around the text so that it’s bigger than the text, but this doesn’t work when adding it to additional CSS. Is there any way to add a background or something to the badge?
Thanks!EDIT: I was able to fix this, but I can’t really understand why. In any case, the trick was to add a blank edit for the following selector, followed by the edit I had in there originally for what I thought was the right selector. Here is the full CSS I’m using that works:
.ht-stockout ht-product-label ht-product-label-right { } .ht-products .ht-product .ht-product-inner .ht-product-image-wrap .ht-product-label.ht-stockout { padding: 5px; background-size: cover; background: white; }
- This topic was modified 4 years, 1 month ago by .
- This topic was modified 4 years, 1 month ago by .
- This topic was modified 4 years, 1 month ago by .
The page I need help with: [log in to see the link]
- The topic ‘Badge Style’ is closed to new replies.