[Résolu] Modifier le tag “en rupture de stock” sur les produits concernés (Créer un compte)

  • WordPress :5.4
  • Statut : résolu
7 sujets de 1 à 7 (sur un total de 7)
  • Auteur
    Messages
  • #2349595
    Julie1402
    Participant
    Padawan WordPress
    71 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL :
    • Thème utilisé : Astra
    • Extensions en place : Elementor, WP super cache, Secupress, FooBox, FooGalery, GT Translate, Imagify, Email encoder, Elementor footer & blocks, ElementsKit Lite, Essential Addons for Elementor, IThemes Security, Social icons, Themegrill demo importer, Updraft Plus, Woocomerce, WP Forms, Yoast
    • Nom de l’hébergeur : OVH
    • Adresse du site (lien d’une page concernée) : https://simonbcreation.fr/categorie-produit/acrylique/

    Problème(s) rencontré(s) :

    Bonjour,

    J’aimerais remplacer le tag “en rupture de stock” par “vendu” sur les produits concernés.

    J’ai testé plusieurs codes, installé loco translate pour traduire le fameux tag mais rien n’y fait…

    Pouvez-vous m’aider svp ?

    Merci par avance 🙂

    #2349598
    ferman
    Participant
    Maître WordPress
    3214 contributions

    Bonjour,

    C’est la même question que pour ce sujet sauf que vous n’utilisez pas de bouton woocommerce natif.

    Essayez avec le code CSS suivant à placer dans vos CSS additionnelles ou le fichier style.css d’un thème enfant si vous en avez un (ce serait mieux).

    .ast-shop-product-out-of-stock{
        visibility: hidden;
    }
    
    .ast-shop-product-out-of-stock::after{
        content: "Epuisé"; 
    	margin-top:-20px;
        visibility: visible !important; 
        background-color: white;
    	opacity:0.7;
        padding:5%; 
        position: absolute; 
        left: 0; 
        right: 0; 
    }

    Il y aura peut-être un peu de CSS à ajuster selon votre goût.

    • Cette réponse a été modifiée le il y a 3 mois et 3 semaines par ferman.
    • Cette réponse a été modifiée le il y a 3 mois et 3 semaines par ferman.
    #2349605
    Julie1402
    Participant
    Padawan WordPress
    71 contributions

    Super, je vous remercie beaucoup pour votre aide. Cela fonctionne sur la page principale de chaque catégorie mais par contre, sur la page de chaque produit concerné, “rupture de stock” apparaît toujours : https://simonbcreation.fr/produit/adieu-bushinengue/

    J’imagine qu’il faut que j’adapte le code… mais comment ?

    #2349636
    ferman
    Participant
    Maître WordPress
    3214 contributions

    Oui, il faut adapter mais ce n’est pas grand-chose et il n’y a aucune mise en forme à faire.

    Mettez ce code:

    p.out-of-stock{
        visibility: hidden;
    }
    p.out-of-stock::after{
    	visibility: visible !important; 
      content: "Epuisé";
    }

    Vous pouvez changer after en before . Cela modifie la place du texte. A vous de voir ce que vous préférez.

    #2349652
    Julie1402
    Participant
    Padawan WordPress
    71 contributions

    Génial, c’est parfait ! Merci beaucoup 🙂

     

    #2359958
    Fips
    Participant
    Initié WordPress
    1 contributions

    Bonjour et merci ferman,

    J’ai pu faire des modifications grâce à tes codes.

    Deux précisions pour Woocommerce 4.7.0.

    1. Dans le premier code la classe a changé de nom.
    .out-stock-label{
        visibility: hidden;
    }
    
    .out-stock-label::after{
        content: "VENDU"; 
    	margin-top: -10px;
        visibility: visible !important;
    	background-color: white;
    	opacity:0.7;
      padding:5%;
    	position: absolute; 
      left: 0; 
      right: 0;
    	font-family: "Open Sans";
    	font-weight: normal;
    	color: #993333
    }

    J’ai ajouté la typo dans le code, mais vous pouvez enlever ou modifier ces 3 lignes.

    2. Dans le deuxième à la place after il faut mettre before, sinon le texte de remplacement se positionne à 2 cm à droite de l’image, car le texte d’origine “En rupture de stock” invisible garde sa place.

    p.out-of-stock{
        visibility: hidden;
    }
    p.out-of-stock::before{
    	
    	visibility: visible !important;
    	color: #993333;
      content: "Vendu";
    }

    Étrange que Woocommerce n’intègre pas cette option et que les premiers plugins qui le permettaient sur la page de produit aient été abandonnés par leurs développeurs.

    J’ai testé YITH WooCommerce Badge Management Premium version 1.4.6 (actuelle), mais il ajoute un badge sur l’image avec le panneau “Produit épuisé” sans l’enlever.

    Deux choses bizarres (incohérentes) dans Woocommerce lié au panneau “Produit épuisé”, c’est l’absence sur l’image si dans une page on crée un bloc Gutenberg de Woocommerce avec des produits “À la une” et perte de CSS générale de la page dans ce bloc (les noms  des produits ont une autre typo et la couleur).

    #2360081
    ferman
    Participant
    Maître WordPress
    3214 contributions

    Bonjour,

    Merci pour le retour et l’actualisation . Woocommerce n’arrête pas de changer en ce moment. Un peu trop à mon avis. Ce n’était pas le cas auparavant.

    …si dans une page on crée un bloc Gutenberg de Woocommerce

    A ma grande honte j’avoue ne pas m’être encore converti au système des blocs ni pour wordpress ni pour woocommerce.

    …Dans le deuxième à la place after il faut mettre before, sinon le texte de remplacement se positionne à 2 cm à droite de l’image

    Oui, parce que contrairement à “display:none” , “hidden” cache, mais en préservant l’espace occupé par l’élément. Quand c’est gênant on peut  utiliser “before” au lieu de” after” et si c’est coincé des deux côtés il y a une autre astuce qui est de mettre la taille des caractères à 0px. Ainsi l’élément n’occupe aucun espace et l’autre (:after) prend sa place. Il reste à régler la taille des caractères dans :after.

    • Cette réponse a été modifiée le il y a 1 jour et 20 heures par ferman.
    • Cette réponse a été modifiée le il y a 1 jour et 20 heures par ferman.
7 sujets de 1 à 7 (sur un total de 7)
  • Vous devez être connecté pour répondre à ce sujet.