WooCommerce Sold Out badge

Een klant met een WooCommerce webshop vroeg me of er een uitverkochte badge toegevoegd kon worden aan de uitverkochte producten op de categorie en winkelpagina. In dit voorbeeld wordt er gebruik gemaakt van een Genesis Framework child thema maar in principe is de code te gebruiken voor elk WordPress thema.

WooCommerce sold out badge code snippet

Om dit te bewerkstelligen heb ik de volgende code snippet geschreven. Als je wilt dat de sold out badge vóór elk uitverkocht product wordt geplaatst, voegt dan het volgende fragment toe aan de functions.php van je WordPress thema.

<?php
//* Do NOT include the opening php tag

//* Add sold out badge on archive pages
add_action( 'woocommerce_before_shop_loop_item_title', function() {
    global $product;

    if ( !$product->is_in_stock() ) {
        echo '<span class="soldout">Sold out</span>';
    }

});

Het resultaat:

Als je de badge ook op de afzonderlijke productpagina wilt weergeven, voegt dan dit fragment ook toe aan je WordPress thema functions.php. De badge is zichtbaar voor het productoverzicht.

<?php
//* Do NOT include the opening php tag

//* Add sold out badge on single product pages
add_action( 'woocommerce_before_single_product_summary', function() {
	global $product;

	if ( !$product->is_in_stock() ) {
	echo '<span class="soldout">Sold out</span>';
	}

});

Het resultaat:

WooCommerce sold out badge styling

In beide code snippets kan je de html van het echo-statement naar wens aanpassen. De vormgeving van de badge hangt af van smaak, maar ook van het thema en de look-and-feel van de sale badges. Voeg de volgende css toe aan de stylesheet van je WordPress thema voor wat basisstyling.

.soldout {
	background: #c7ad7b;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 6px 12px;
	position: absolute;
	right: 0;
	top: 0;
}