WooCommerce : Ajouter un badge “Rupture de stock” sur les produits indisponibles

Lorsque vous utilisez la gestion de stock de WooCommerce et qu’un de vos produits est en rupture de stock, rien mis à part une petite ligne en rouge sur la page du produit ne le précise.

Voici par exemple la page de votre boutique :

Notre produit en rupture de stock est ici le T-Shirt “Happy Ninja”. Rien n’est affiché ici, donc. Ce n’est pas très précis pour notre client qui risque d’être déçu s’il souhaite acquérir ce produit…

Voyons maintenant la page produit :

Seule une petite ligne discrète en rouge “Rupture de stock” est affichée. Pas forcément très clair pour notre client donc.

Nous allons plutôt afficher une badge “Rupture de stock” en rouge et gros sur l’image au niveau de la boutique et à coté du titre sur notre page produit. Cela améliorera grandement l’expérience client.

Voici comment procéder : copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

/* Indiquer la rupture de stock */

add_action( 'woocommerce_before_shop_loop_item_title', 'wpm_display_sold_out_loop_woocommerce' );// On l'affiche sur la page boutique
add_action( 'woocommerce_single_product_summary', 'wpm_display_sold_out_loop_woocommerce' );// On l'affiche sur la page du produit seul

 
function wpm_display_sold_out_loop_woocommerce() {
    global $product;
 	//Si le produit est en rupture de stock, on affiche :
    if ( !$product->is_in_stock() ) {
        echo '<span class="soldout">' . __( 'Rupture de stock', 'woocommerce' ) . '</span>';
    }
} 

Vous pouvez utiliser le CSS suivant pour modifier l’apparence du badge :

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

Voici le résultat sur la page boutique :

et sur la page du produit :

Bien sûr, n’hésitez pas à modifier l’apparence via le CSS pour coller au maximum au design de votre site et de votre boutique WooCommerce !

Et vous, comment gérez-vous l’affichage des ruptures de stock sur votre boutique ? Dites-nous tout en commentaire 🙂

Source: Business Bloomer