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;
}
Et voilà!
Source: wpmarmite.com
Bonjour,
Où ce trouve le fichier CSS ?
Bonne Journée
Bonjour,
Le fichier style.css se trouve à l’emplacement suivant: wp-content/themes/votre-theme.
Mais le plus simple est d’utiliser la fonction « CSS personnalisé » que vous trouverez sur votre Tableau de bord sous l’onglet Apparence.
Cordialement
Bonjour,
Merci pour le tuto j’ai pu ajouter ce tag sur la page produit ! 🙂
En revanche, pour la liste des produits, comment appliquer un CSS différent ?
Merci d’avance