Vous êtes ici : Accueil | Snippets WordPress | WooCommerce | WooCommerce : Ajouter un badge « Rupture de stock » sur les produits indisponibles

WooCommerce : Ajouter un badge « Rupture de stock » sur les produits indisponibles

woocommerce snippet

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

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de ces 7 professionnels.

Commencer maintenant

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

    Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



    Pourquoi vous devez travailler avec un thème enfantVoir la vidéo
    + +
    05bb22b06913c8175f4d6b5b81318f13________________
    Partagez
    Tweetez
    Partagez