Comment Ajouter un Badge « Rupture de Stock » Sur Les Produits Indisponibles Dans WooCommerce ?

Le fait d’ajouter un badge « Rupture de stock » sur les produits indisponibles de votre boutique en ligne WooCommerce ferait preuve d’une grande utilité. Dans la gestion de stock de WooCommerce, vous disposez d’une option qui permet d’informer qu’un ou plusieurs produits sont indisponibles.

Hormis une petite inscription en rouge sur la page de description du produit, aucune mention n’indique que le produit n’est plus disponible à la vente. Comme vous le constaterez, cette situation peut s’avérer frustrante pour le client potentiel. Ceci dit, vous pouvez résoudre facilement ce souci à l’aide d’un excellent snippet. Ci-dessous, nous vous en parlons de plus près.

L’Utilité d’Ajouter un Badge « Rupture de Stock » Sur Les Produits Indisponibles Dans WooCommerce

Lorsque vos visiteurs vont sur votre page boutique, ils pourraient penser que tous les produits affichés sont présents dans les stocks. Après avoir cliqué sur un produit en rupture de stock, ces derniers se rendent compte à leur grande surprise qu’ils ne sont pas ne mesure de l’acquérir. En plus de gêner ces prospects, cette circonstance pourrait les dissuader d’acheter vos autres produits disponibles. De ce fait, cet état aurait tendance à impacter négativement sur vos ventes.

Il convient donc de montrer sur l’image du produit un badge « Rupture de stock » en gros et en rouge sur la page boutique ainsi qu’un second badge à côté du titre sur la page produit. Cette solution permettra ainsi d’éviter ce genre de désagrément. Par ailleurs, elle précisera aux acheteurs potentiels dès le début que certains produits sont indisponibles.

Comment Utiliser ce Snippet ?

Pour mettre en pratique cette technique, vous devez copier-coller le snippet 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>';
    }
}

De plus, vous avez la possibilité d’avoir recours au CSS pour personnaliser le style du badge. Vous trouverez un exemple ci-dessous :

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

J’espère que cet article vous aura été utile. Qu’Allah mette la baraka dans vos commerces en ligne, mais hors ligne aussi..