I had a problem where customers could not see or not wanted to see “SOLD OUT” by scrolling down on mobile and instead calling or messaging for product availability or in stock. So I wanted to show the “SOLD OUT” or “STOCK OUT” or sale badge in mobile with CSS so visitors don’t get confused and see stock out when visiting a single product woocommerce page.
Why choose CSS to make or add changes for woocommerce product badge?
I chose CSS rather than Javascript because CSS is easier to apply and does not interfere too much and for me, CSS is easy to apply and less hassle. You can use javascript but too much javascript is not good as per my experience. CSS does not break a website or create critical errors like javascript if applied by mistake.
How to choose which class to take for applying CSS?
Check my screenshots you need to find out the CSS container where you need to put the “SOLD OUT” text and you can put text using :before or :after with content: " "
.product and .outofstock are default classes by WooCommerce that are auto-generated so I took those as references and applied the CSS. As per your given theme’s structure, your CSS class will have different configurations and child classes so it is better to play around with classes.
If you found the perfect CSS class just copy and paste the code below by replacing your CSS class and you will have a badge with your text, for me it’s SOLD OUT.
.product.outofstock .apus-images:before {
content: "SOLD OUT";
background: red;
position: absolute;
top: 60px;
font-size: 25px;
z-index: 99999;
color: white;
font-weight: 700;
padding: 2px;
}Conclusion
If CSS doesn’t work for you in critical situations you have to use javascript because javascript is more powerful but complex.
Hope this helps, please share this and link this article if you find it useful.
