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 '<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;
}
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 !
Wow, fantastic weblog layout! How long have you ever
been blogging for? you make blogging glance easy.
The overall glance of your website is wonderful, let alone the content!
You can see similar here dobry sklep