How to Remove WooCommerce Out of stock badge(3 steps)

If a product of WooCommerce is set with Our of Stock, the Sold Out(or similar) words will be displayed on the thumbnail at shop page. It is possible to remove WooCommerce Out of stock badge by 2 ways.

Edit Product Stock Status

If you want to remove WooCommerce Out of stock badge, the easy way is that config this product’s stock status. Edit this product, you will find the Product data panel, activate Inventory tab, pickup option “In stock” from the selector Stock status. Click update to save it, then the Sold out word should not display anymore.

Remove WooCommerce Out of stock badge by CSS

Sometime you may do not want to edit the products. There is another way. If you use our WordPress themes(like ART, Air, Arnold, and SEA), You can paste custom CSS codes into “Appearance > Customize: Additional CSS”. The Sold Out word will not display.

.sold-out { 
    display: none;
}

If you use another WordPress theme, the above CSS would not work. Please find the correct sold-out class name by the Developer Tools builtin Chrome browser(there are the same tools on Safari and Firefox, strongly suggest Chrome, it is best).

1) Open the shop page on Chrome, move the mouse cursor to the “Sold Out” words, click right button of mouse, click Inspect:

2) The Developer Tools will show at the bottom of Chrome , you will see the HTML codes of the webpage, find the class of the Sold out word, class="sold-out":

It means that the class name is“sold-out”, and the CSS codes should be:

.sold-out { 
    display: none;
}