Remove Sold Out bubble on products

I have been trying to hide the sold out bubble with no luck. I have tried a few different CSS snippets I have found in other posts and my own but no luck some reason.

Current have
.product-label.out-of-stock {
display: none;
}

But still they persist.

Attachments:

You must be logged in to view attached files.

Hello,

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

.labels-rounded .out-of-stock {
display:none !important;
}

Best Regards

[shawnz28]

Thank you that worked!

Alternatively I am trying to figure out how to add instock and out of stock to show on the catalog pages like I do on my current site. If I cannot get this done I was curious is there a way to change the shape and size of the round bubble that the Sold Out displays in? On mobile at times Sold Out does not fit properly and the line break will be in wrong spot. But when I change the text to my preferred “Out of Stock’ it does not display correct. Was hoping to get a rounded box instead of the circle so that it would show as
Out of
Stock
or
Out
of
Stock

Basically so the words would not be cut incorrectly

• This reply was modified 6 months, 1 week ago by shawnz28.

Attachments:

You must be logged in to view attached files.

Hello,

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

body .labels-rounded .product-label.out-of-stock {
    min-width: 100px !important;
   border-radius: 10px !important;
}
body .labels-rounded .product-label.out-of-stock {
	font-size: 12px;
}

Best Regards

[Author]

Posts