Previously we have learned how to show sold out badge on WooCommerce store and archive pages. But that method does not work on search results. We have used woocommerce_before_shop_loop_item_title
action hook for store page and category/archive pages. But this hook is not available on search result page. So we will use post_thumbnail_html
filter hook, which filters the post thumbnail HTML.
This may have some complexity or conflict with your theme, as your theme may already filter post_thumbnail_html
. So we will use a higher priority to try to make sure that our filter gets applied at the very last.
function careless_display_woocommerce_sold_out_badge_on_search_result( $html ) {
global $product;
if ( $product && ! $product->is_in_stock() ) {
return '<span class="soldout">Sold Out</span>' . $html;
}
return $html;
}
add_filter( 'post_thumbnail_html', 'careless_display_woocommerce_sold_out_badge_on_search_result' , 9999 );
This will show the “Sold Out” text right below the product image. We will place it on top of the product image with the help of some css.
.entry-content {
position: relative;
}
.soldout {
padding: 10px 20px 10px 20px!important;
text-align: center;
background: #000000;
color: white;
position: absolute;
top: 10px;
font-size: 20px;
font-weight: 500;
}
Code goes in the functions.php
file of your active theme. And css goes in your style.css
file or in your theme options (if it has an option add css).
Note: Depending on your theme, you may need to adjust css.