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 :

pas de rupture woocommerce snippets wpmarmite

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 :

rupture page produit woocommerce

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 :

badge rupture page boutique woocommerce

et sur la page du produit :

badge rupture page produit woocommerce

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