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.
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 '' . __( 'Rupture de stock', 'woocommerce' ) . '';
}
}
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;
}
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 !
Add a Comment