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

17 commentaires Ajoutez le vôtre

  1. merci bcp .

    Répondre
  2. Bonjour,

    Bizarrement chez moi ce code n’a strictement aucun effet 🙁
    Avec un stock à zéro ma boutique affiche pour chacun des produits concernés : « Disponible sur commande ». Hum…

    Répondre
    • Salut. je viens de réessayer et ça marche très bien. Tu as activé la gestion du stock dans le back office et mis la quantité à 0 et l’état du stock à rupture de stock?

  3. Salut,

    Merci pour ta réponse. J’ai ceci :

    Inventaire :
    Gestion du stock -> Activer la gestion du stock (coché)
    Seuil de stock faible : 5
    Seuil de rupture de stock : 0

    Marche po ! 🙁

    Répondre
  4. Ok ça fonctionne en fait… petite erreur de placement de ma part… désolé et encore merci 😉

    Répondre
    • Bonjour, pourrais tu me dire la correction que tu as faite car j ai le meme probleme. merci

  5. Bonjour, pourrais tu me dire la correction que tu as faite car j ai le meme probleme. merci

    Répondre
  6. Je viens de mettre le script dans dans le fichier functions.php cela ne fonctionne pas ainsi que le script dans CSS idem. 🙁
    Help

    Répondre
    • Salut. Le script fonctionne très bien. Tu es sur de l’avoir bien placé ?

  7. Heu !non je ne suis pas sur.
    ci joint la copie de mon fichier pouvez vous me dire ou bien le placé, merci
    —————————————–
    <?php
    /**
    * Main functions file
    *
    * @package WordPress
    * @subpackage Shop Isle
    */

    /**
    * Initialize all the things.
    */
    require get_template_directory() . '/inc/init.php';
    /**
    * Note: Do not add any custom code here. Please use a child theme so that your customizations aren't lost during updates.
    * http://codex.wordpress.org/Child_Themes
    */
    —————————————————–

    Répondre
    • Il te faut créer un theme enfant avant tout sinon toutes tes modifications seront perdus à la prochaine mise à jour

  8. je viens de mettre le script dans la page functions.php
    j ai deux fois la ligne : rupture de stock
    http://www.miel-andorre.fr/produit/miel-de-sispony-1600m/

    Répondre
  9. ok merci je vais voir comment faire cela.
    MERCI

    Répondre
  10. Bonjour,
    merci pour le code, mais je n’arrive pas à le faire fonctionner;
    je suis avec un thème DIVI.
    je ne vois pas où placer le code dans le fichier fonction.php et idem pour le css
    merci

    Répondre
    • Salut. Tu peux copier-coller le code à la fin de ton fichier functions.php. Pour le code CSS tu peux le copier-coller soit dans le fichier style.css de ton thème enfant soit dans apparences->css personnalisé.

  11. Bonjour, le script fonctionne, j ai encore un petit probleme:
    il fonctionne uniquement sur un seul produit ?
    j ai plusieurs produits en rupture et uniquement 1 affiche avec RUPTURE DE STOCK 🙁

    Répondre
    • Bonjour, il fonctionne avec tous les produits en rupture de stock. Tous tes produits sont-ils paramétrés de la même manière?

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 :



69974287c9ff97b79a3725c52d28b1afkkkkkk
36 Partages
Partagez22
Tweetez6
Partagez8