WooCommerce uitverkocht label productcategorie

Als je een WooCommerce webshop hebt dan wil je het liefst niet dat klanten eerst klikken vanuit de productcategorie naar een product en er daar achterkomen dat het product niet leverbaar is.

Uitverkochte producten in shop

Je kunt dit voorkomen door uitverkochte producten in jouw webshop te verbergen. Een andere optie is het tonen van een ‘uitverkocht’ label op de overzichtspagina. Sommige WordPress thema’s voegen dit automatisch toe. Mocht jouw thema dit niet ondersteunen dan zou je deze code kunnen gebruiken. Voeg deze toe in je functions.php van je thema of gebruik een plugin als Code Snippets.

add_action( ‘woocommerce_before_shop_loop_item_title’, ‘bbloomer_display_sold_out_loop_woocommerce’ );

function bbloomer_display_sold_out_loop_woocommerce() {
global $product;
if ( ! $product->is_in_stock() ) {
echo ‘<span class=”soldout”>Tijdelijk niet leverbaar</span>’;
}
}

Uitverkocht badge stylen

Uiteraard kun je de melding ook stylen. Gebruik hiervoor de volgende CSS in je stylesheet of in de customizer.

.soldout {
    padding: 3px 8px;
    text-align: center;
    background: #222;
    color: white;
    font-weight: bold;
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 12px;
}