[Résolu] Empêcher le soulignement des titres de produits et des titres de catégories (Créer un compte)

  • WordPress :5.8
  • Statut : résolu
9 sujets de 1 à 9 (sur un total de 9)
  • Auteur
    Messages
  • #2387692
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Bonjour,
    <div id= »fwf_content »>Ma configuration WP actuelle :

    • – Version de WordPress : 5.8.1
    • – Version de PHP/MySQL : 7.3.31 / 5.6.50
    • – Thème utilisé : Neve Enfant
    • – Thème URI : https://adeline-martin.com
    • – Extensions en place : Akismet Anti-Spam (4.2.1), Classic Editor (1.6.2), Contact Form 7 (5.5.1), Forum_wordpress_fr (4.2), MailPoet 3 (New) (3.71.3), MetaSlider (3.23.0), Nobs • Share Buttons (2.1.2), Page Links To (3.3.5), Particle Background (1.0.1), Polylang (3.1.2), ReCaptcha v2 for Contact Form 7 (1.3.5), Simple Custom CSS and JS (3.37), Table Rate Shipping for WooCommerce (2.21), UpdraftPlus – Backup/Restore (1.16.62), WooCommerce (5.8.0), WooCommerce Stripe Gateway (5.7.0), WP Post Popup (3.6.3), YITH WooCommerce Quick View (1.8.0), Yoast SEO (17.4)
    • – Adresse du site : https://adeline-martin.com
    • – Nom de l’hébergeur : Apache

    </div>
     

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

    Bonjour,

    Je souhaiterais empêcher le soulignement des titres des produits de ma boutique, au moment du survol de leur miniature.
    J’ai le même soucis avec les titres des catégories de produit.

    Comme vous le verrez, sur ce lien : https://adeline-martin.com/categorie-produit/tirages/, j’ai réussi à modifier le survol des titres, lorsqu’on passe la souris vraiment sur le texte, ils changent juste de couleur et ne sont plus soulignés.
    Voici le code utilisé pour cet effet :

    h2.woocommerce-loop-product__title:hover 
    {color:grey !important;
    text-decoration:none !important;}

    Je souhaiterais avoir le même effet lorsque je survole l’image des produits mais impossible de trouver comment faire.
    J’ai testé d’utiliser ce même code sur plein de div mais rien ne fonctionne.

    Comme expliqué plus haut, j’ai exactement le même soucis avec ma page de catégories ici : https://adeline-martin.com/boutique/

    L’idéal serait peut-être de trouver le morceau de code qui me permettrait de gérer tous les liens de woocommerce à la fois.

    Merci par avance de votre aide 🙂

    #2387697
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Bonjour,

    Essayez ce code dans functions.php de votre thème enfant.

    function enlever_soulignement(){?>

    <script type="text/javascript">

    $=jQuery;

    $('.nv-product-image').mouseover(function(){$('.woocommerce-loop-product__title').css({"text-decoration":"none"})})
    $('li.product-category').mouseover(function(){$('.woocommerce-loop-category__title').css({"text-decoration":"none"})})

    </script>

    <?php
    }
    add_filter( 'wp_footer', 'enlever_soulignement');

    Vous pouvez aussi essayer les CSS pures mais il faudra bien vérifier qu’il n’y a pas de problème sur le site (ce sont des CSS pas ciblées au contraire du code précédent)

    [class*="product"],[class*="category"] {text-decoration:none!important;}

    • Cette réponse a été modifiée le il y a 2 années et 8 mois par ferman.
    #2387703
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Ou même, encore plus simple:

    h2[class*="woocommerce-loop"]{text-decoration:none!important;}

    Et d’autres possibilités dérivées de votre propre code (il n’y a pas besoin du « hover »)

    .woocommerce-loop-product__title, .woocommerce-loop-category__title{text-decoration:none!important;}

    • Cette réponse a été modifiée le il y a 2 années et 8 mois par ferman.
    #2387725
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Bonsoir,

    Un grand merci pour votre réponse !
    Les solutions CSS que vous avez proposé n’ont pas fonctionné mais la modification du fichier functions.php oui !
    Le texte n’est plus souligné, merci beaucoup ! Je souhaitais également qu’il s’affiche en gris au survol, savez vous comment ajouter ce paramètre ?
    Je suis moins à l’aise pour retoucher le php par rapport au css ^_^

    #2387735
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Le code ci-dessous devrait fonctionner. Remplacez le code précédent par celui ci et essayez.. En principe, vous devriez même pouvoir aussi supprimer le code CSS que vous aviez mis; je pense que les deux font double emploi mais je n’ai pas vérifié. Cela met aussi le prix en gris au survol mais si vous souhaitez conserver le blanc, c’est juste un peu de CSS (avec !important).

    function enlever_soulignement(){?>

    <script type="text/javascript">

    $=jQuery;

    var A = '.woocommerce-LoopProduct-link';
    var B = '.woocommerce-loop-product__title';

    $(A).each(function(){$(this).mouseover(function(){$(this).children($(B)).css({"text-decoration":"none","color":"grey"})})});
    $(A).each(function(){$(this).mouseout(function(){$(this).children($(B)).css({"text-decoration":"none","color":"white"})})});

    </script>

    <?php
    }
    add_filter( 'wp_footer', 'enlever_soulignement');

    • Cette réponse a été modifiée le il y a 2 années et 8 mois par ferman.
    #2387764
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Merci beaucoup, ça fonctionne ! 🙂

    #2387771
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Excusez moi juste une petite question, pour ajouter la même fonction aux catégories, est-ce que je reprends le premier code que vous proposiez ? Merci (désolée je suis nulle en php !)

    • Cette réponse a été modifiée le il y a 2 années et 8 mois par AdelineMartin.
    #2387775
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Excusez moi juste une petite question, pour ajouter la même fonction aux catégories, est-ce que je reprends le premier code que vous proposiez ?

    Aucun problème, inutile de vous excuser. Je venais juste en revérifiant de me rendre compte que j’avais oublié les catégories. Donc voila le code complet incluant les catégories.

    $=jQuery;

    var A = '.woocommerce-LoopProduct-link';
    var B = '.woocommerce-loop-product__title';
    var C = 'li.product-category a';
    var D = '.woocommerce-loop-category__title';

    $(A).each(function(){$(this).mouseover(function(){$(this).children($(B)).css({"text-decoration":"none","color":"grey"})})});
    $(A).each(function(){$(this).mouseout(function(){$(this).children($(B)).css({"text-decoration":"none","color":"white"})})});
    $(C).each(function(){$(this).mouseover(function(){$(this).children($(D)).css({"text-decoration":"none","color":"grey"})})});
    $(C).each(function(){$(this).mouseout(function(){$(this).children($(D)).css({"text-decoration":"none","color":"white"})})});

     

    #2387778
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Super, merci beaucoup !

9 sujets de 1 à 9 (sur un total de 9)
  • Vous devez être connecté pour répondre à ce sujet.