"Sold Out" Badge on Shop Images
Adds a "Sold out" label over the image of out-of-stock products in shop and category listings so shoppers can tell at a glance.
Opens WPIDE on
Code
add_action( 'woocommerce_before_shop_loop_item_title', function () {
global $product;
if ( ! $product instanceof WC_Product || $product->is_in_stock() ) {
return;
}
echo '<span class="wpide-sold-out" style="position:absolute;top:10px;left:10px;z-index:9;padding:4px 10px;border-radius:3px;background:#1e1e1e;color:#fff;font-size:12px;font-weight:600;text-transform:uppercase;">' . esc_html( 'Sold out' ) . '</span>';
}, 9 );
add_action( 'wp_head', function () {
echo '<style>.woocommerce ul.products li.product{position:relative;}</style>' . "\n";
} );Notes
Adjust the colors in the inline style or override the .wpide-sold-out class in your theme CSS.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.