Automatically adds a clean “Out of Stock” badge overlay on WooCommerce product images without modifying templates.
Useful for improving UX and helping users quickly identify unavailable products, especially on stores with large catalogs.
Lightweight, no plugin required, and works with most themes.
add_action( 'wp_footer', function () {
if (! class_exists( 'WooCommerce' ) ) return;
?>
<style>
.out-of-stock-badge {
position: absolute;
top: 10px;
left: 10px;
background: #e53935;
color: #fff;
padding: 5px 10px;
font-size: 12px;
font-weight: bold;
z-index: 9;
border-radius: 5px;
}
.product {
position: relative;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('.product').forEach(function (product) {
if (product.querySelector('.stock.out-of-stock')) {
if (!product.querySelector('.out-of-stock-badge')) {
let badge = document.createElement('div');
badge.className = 'out-of-stock-badge';
badge.innerText = 'Out of Stock';
product.appendChild(badge);
}
}
});
});
</script>
<?php
} );
