Affichage conditionnel (Créer un compte)

  • WordPress :5.3
  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #2305022
    Silkhands
    Participant
    Initié WordPress
    8 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.4.2
    • Thème utilisé : Veera by LA Studio
    • Extensions en place : WooCommerce
    • Nom de l’hébergeur : Amen
    • Adresse du site : https://bottle-on-net.fr

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

    Bonjour,

    Je développe un site internet via wordpress en utilisant WooCommerce et j’aimerai pouvoir afficher un élément à certaines conditions.

    Je vends du vin, les vins sont organisés par catégorie (rouge/blanc/etc…) et ils possèdent tous des attributs. Certains possèdent l’attribut “biologique”, j’aimerai pouvoir afficher sur l’étiquette produit, un label spécifique à cet attribut et uniquement aux produits possédant cet attribut.

    Y’a t’il une façon de poser une condition dans le html du site ? Je ne connais pas suffisamment HTML pour savoir s’il existe une solution simple mais pour faire un algorithme simple ça serait juste :

    if (product_has_attribute(“biologique”)) then display label bio else display nothing endif

    Je pose deux captures d’écran en PJ, l’une avec ce que j’ai actuellement et une autre avec le résultat.

    Merci à vous !

    Oscar

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2305075
    ferman
    Participant
    Maître WordPress
    2097 contributions

    Bonjour,

    Dans votre page boutique (site en maintenance) vous affichez certainement les catégories et les produits. Pourquoi ne pas simplement ajouter une catégorie “biologique” aux produits correspondants. Avec un peu de CSS, on peut même faire apparaître le titre de cette catégorie en vert (ou autre couleur).

    Toujours dans la page boutique ou catégorie, pour avoir le label “biologique sous les produits correspondants, on peut modifier une fonction native de woocommerce (lignes 1094-1102). Cela donne  le code ci-dessous, à mettre dans le fichier functions.php d’un thème enfant ou bien en utilisant une extension telle que “my custom functions“. Regardez les FAQ’s sur la page de l’extension pour voir ce qu’il faut faire au cas ou votre site se retrouverait bloqué (ne devrait pas arriver mais on ne sait jamais). Il y a une classe (class=”biologique”) pour pouvoir modifier le texte ajouté.

    Testé.  Chez moi ça fonctionne.

    function woocommerce_template_loop_product_title() {
    	
    	$title='<h3 class="normal"' .esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title()  . '</h3>';
    	
    	if (has_term('biologique', 'product_cat')){
    		echo $title;
    		echo '<h3 class="biologique">' .'BIOLOGIQUE'. '</h3>'; 
    	}
    	else{
    		echo $title;
    	}
    }

    Par contre, je ne sais pas si ça correspond exactement à ce que vous souhaitez mais je crois que ça s’en approche.

    • Cette réponse a été modifiée le il y a 1 semaine par ferman.
    • Cette réponse a été modifiée le il y a 1 semaine par ferman.
    #2308359
    Silkhands
    Participant
    Initié WordPress
    8 contributions

    Bonjour,

    Tout d’abord merci de ta réponse et je m’excuse du temps que j’ai mit à y répondre.

    Effectivement le site est en maintenance pour le moment, je travaille dessus et je ne peux l’ouvrir tant que certaines choses ne sont pas réglées.

    J’ai essayé d’implémenter le code en modifiant ce qui avait besoin de l’être mais je n’ai aucun résultat.

    J’ai un peu trifouillé et je suis arrivé à ce code (visible ci-après), mais je n’arrive pas à afficher “biologique”. En gros, j’ai essayé de faire en sorte d’afficher ce mot uniquement si le nom du produit contenait ‘graillot’ mais quand je regarde sur le produit si c’est affiché, je vois le résultat visible en PJ…

    <div class="produit_bio">
    			<?php
    				$title=$product->get_name();
    			
    				if ( has_term( 'aillot', $title ) ){
    					echo '<h3 class="biologique">','BIOLOGIQUE','</h3>'; 
    				}
    				else{
    					echo 'raté';
    				}
    			?>
    		</div>
    Fonction produit bio

     

    Pour faire simple, ‘graillot’ produit du vin bio, j’aimerai donc afficher sur tous les produits ayant ‘graillot’ dans le titre, la mention “biologique” sous le prix du produit.

    Lorsque je remplace le terme ‘raté’ par ‘$title’ ça me renvoi bien le nom du produit, je ne comprends par pourquoi est ce que la fonction has_term ne détecte donc pas le mot à trouvé. Faudrait-il que je décompose la phrase en plusieurs mots et que je test les mots un par un ?

    Merci de votre temps !

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2317367
    ferman
    Participant
    Maître WordPress
    2097 contributions

    Bonjour,l

    Votre fonction “fonctionne” à condition de la modifier.

    1. Il manque la définition de $product (donc ajouter en tête “global $produc”)
    2. if ( has_term( ‘aillot’, $title ) ) remplacer $title par ‘product_cat’.
    3. Il s’agit d’une fonction native de woocommerce qui ne nécessite pas de filtre. Il ne faut donc pas changer le nom de cette fonction ou alors il faut ajouter le filtre adéquat. Ceci explique peut-être le fait que la fonction que je vous ai donnée ne marche pas  (je viens de revérifier: pas de problème).

    Donc je vous repasse votre code rectifié  et qui fonctionne bien en affichant biologique là où il faut et raté ailleurs. Tenez-moi au courant.

    function produit_bio() {
    	global $product;
    	$title=$product->get_name();?>
    	<div class="produit_bio"><?php		
    				if ( has_term( 'aillot', 'product_cat' ) ){
    					echo '<h3 class="biologique">','BIOLOGIQUE','</h3>'; 
    				}
    				else{
    					echo 'raté';
    		}?></div><?php
    }
    add_filter ('woocommerce_after_shop_loop_item_title', 'produit_bio');

     

     

     

     

    • Cette réponse a été modifiée le il y a 4 jours et 13 heures par ferman.
    #2335222
    Silkhands
    Participant
    Initié WordPress
    8 contributions

    Re/bonjour,

    Encore une fois merci !

    J’ai ajouté la fonction telle que vous me l’avez conseillé et j’ai ajouté quelque produits dans la catégorie ‘biologique’ et ça marche nickel, après un peu de css j’obtient le résultat visible en PJ.

    Merci beaucoup !

    Bonne journée

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2335333
    Silkhands
    Participant
    Initié WordPress
    8 contributions

    Bonjour,

    J’aurais une dernière requête si possible ; ça s’agit plus du css, pour faire simple j’aimerai que cet élément aille automatiquement se placer à la toute fin de la carte produit, actuellement il est juste après le prix. J’ai fais en sorte qu’il soit séparé de la barre d’info du produit ce qui fait que la carte produit est désormais composée de (1) l’image, (2) titre + prix et enfin (3) sigle biologique (voir en PJ).

    Seulement si l’on observe la PJ, on peut voir que suivant la hauteur du titre du produit, le sigle bio est plus ou moins haut. J’aimerai faire en sorte qu’il aille se glisser tout en bas de la carte, que le bord du bas soit mitoyen avec le bord de la carte..

    J’ai essayé plusieurs choses déjà, je suis passé en flexbox en définissant la carte (le parent) comme flex et ensuite en utilisant “flex: 1;” dans la classe du sigle bio mais ça ne bouge pas.. Je peux bidouiller un peu pour faire en sorte que cette classe ait une margin-bottom négative qui vienne embrasser le bas de ma carte mais ça ne marche pas pour tous..

    J’ai également essayé de désigner sa position comme ‘absolute’ mais à ce moment la, et quelque soit les valeurs définies, la largeur devient statique et ne change pas. Cependant, c’est ce qui se rapproche le plus de ce que je recherche en terme de position vis à vis de la carte produit. Je laisse une capture en PJ.

    Auriez vous une idée pour palier au problème ?

    Merci !

    • Cette réponse a été modifiée le il y a 3 jours et 13 heures par Silkhands. Raison: Pièces jointe non téléversées
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2335385
    ferman
    Participant
    Maître WordPress
    2097 contributions

    Bonjour,

    Essayez d’ajouter à la position “absolute:

    .produit_bio{width:90%;
    	margin-top:0px!important;}

    Et remettre les radius comme il faut. Essayez d’abord en enlevant le !important. Pas mal comme effet le vert sur les produits bio.

    #2335402
    Silkhands
    Participant
    Initié WordPress
    8 contributions

    Re/bonjour,

    Merci du retour !!

    Je viens d’essayer ce que vous m’avez conseillé de faire cependant ça n’a pas marché comme prévu ; le soucis étant que si je défini la position de la classe produit_bio comme étant absolute, la largeur que j’indique se réfère alors à la page entière et non à la classe parent. On peut voir le résultat en PJ.

    C’est étonnant car j’ai pour habitude de référer width: 100% puisque cet élément appartient au parent (la carte du produit) mais la quand j’indique absolute c’est comme si la classe ‘produit_bio’ ne se référait plus à la classe parente… étrange !

    Pour le moment la classe est définit comme suit :

    
    .produit_bio{
    	position: absolute;
    	bottom: 23px;
    	background-color: #689f38;
    	border-radius: 0px 20px 0px 20px;
    	padding: 0px 0px 0px 0px;
    	
    }
    Classe produit_bio

    En saisissant ‘bottom: 23px’ le sigle vient se caler sur le bas de la carte produit, cependant si j’indique ‘left: 10%’ par exemple, tous les éléments ‘biologique’ de toutes les cartes viennent se stacker à 10% de la largeur de l’écran… c’est visible en PJ.

     

    • Cette réponse a été modifiée le il y a 3 jours et 7 heures par Silkhands.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2335423
    ferman
    Participant
    Maître WordPress
    2097 contributions

    Bonjour,

    Je n’avais pas vérifié sur toutes les options (12, 15, 30) ça marchait bien sur 12, mais pas sur 15 (on a une barre continue) et sur 30 la barre verte disparaît même derrière les produits.

    Ce sont les % qui sont en cause et je sais pas pourquoi mais tout s’arrange quand on passe en pixels et qu’on met un z-index de 10 (ça suffit). Il faut alors ajouter une petite @media rule.

    Essayez avec ça:

    .produit_bio{width:251px;
    	position:absolute;
    	margin-top:0px!important;
      border-radius:0px 0px 10px 10px!important;
      z-index:10;}
    
    @media only screen and (max-width: 1050px) {
    .produit_bio{width:162px;
    	}
    }

    Et vérifiez les !important; ils ne le sont peut-être pas autant qu’ils le prétendent dans  l’éditeur firefox.

    • Cette réponse a été modifiée le il y a 3 jours et 5 heures par ferman.
    #2335446
    ferman
    Participant
    Maître WordPress
    2097 contributions

    Bonjour,

    Agaçant comme problème. Je ne sais pas si vous avez réussi à le résoudre mais je pense qu’il n’est pas possible d’éviter ce que vous montrez plus haut (réponse#2335333). La div info n’est pas de longueur fixe, donc celle qui suit (produit_bio) qui lui est accolée est forcée de descendre. Une solution serait de placer produit_bio entre info et image. Cette zone est invariable. Pour cela , dans la fonction il est possible de remplacer le hook  par celui ci.

    woocommerce_shop_loop_item_title

    Vous pourriez avoir quelque chose comme ce qui est en pj.

    • Cette réponse a été modifiée le il y a 2 jours et 15 heures par ferman.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2335462
    Silkhands
    Participant
    Initié WordPress
    8 contributions

    Bonjour,

    Merci de vos réponses. J’ai essayé pendant une bonne partie de ma soirée hier mais sans succès… J’ai du coup opté pour la solution que vous venez de me proposer et ça marche très bien, je vais rester la dessus je pense ! Cependant j’ai juste un petit problème : j’ai créé un filtre pour l’appel à la fonction qui s’intitule ‘add_filter (‘woocommerce_shop_produit_bio’, ‘produit_bio’);’  du coup dans le thème parent j’ai ajouté à l’endroit voulu (entre l’image et le titre du produit) l’appel à la fonction avec ‘do_action(‘woocommerce_shop_produit_bio’);‘ mais je sais par expérience que les modifications apportées dans le thème parent disparaissent lors des MAJ. Ma question est la suivante, pour que la modification reste intacte après MAJ du thème parent, où puis-je placer l’appel à la fonction ? Dans le function.php ?

    <div class="product_item--info-inner">
            <?php
            /**
             * woocommerce_shop_loop_item_title hook.
             *
             */
    		  do_action('woocommerce_shop_produit_bio');
            do_action( 'woocommerce_shop_loop_item_title' );
    
            /**
             * woocommerce_after_shop_loop_item_title hook.
             *
             * @hooked woocommerce_show_product_loop_sale_flash - 2
             * @hooked woocommerce_template_loop_rating - 5
             * @hooked Veera_WooCommerce::add_count_up_timer_in_product_listing - 7
             * @hooked woocommerce_template_loop_price - 10
             * @hooked Veera_WooCommerce::render_attribute_in_list - 10
             * @hooked Veera_WooCommerce::shop_loop_item_excerpt - 15
             */
            do_action( 'woocommerce_after_shop_loop_item_title' );
            ?>
          </div>
    Appel de la fonction dans le thème parent

    
    function produit_bio() {
    	global $product;
    	$title=$product->get_name();?>
    	<div class="produit_bio"><?php		
    				if ( has_term( 'biologique', 'product_cat' ) ){
    					echo '<h3 class="biologique">','BIOLOGIQUE','</h3>'; 
    				}
    				else{
    					echo '';
    		}?></div><?php
    }
    add_filter ('woocommerce_shop_produit_bio', 'produit_bio');

    Je laisse les codes que j’ai à l’heure actuelle.

    Du coup avec les modifications apportées ça me donne quelque chose comme ce qui est en PJ, je trouve que ça fait bien l’affaire !

     

     

     

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2335482
    ferman
    Participant
    Maître WordPress
    2097 contributions

    je trouve que ça fait bien l’affaire !

    Je trouve que c’est même  mieux: c’est plus logique d’avoir l’attribut sous l’image. Pour votre hook personnalisé comme vous le savez, il disparaîtra lors des mises à jour de woocommerce, pas du thème. Pour l’éviter il faudrait peut être dupliquer votre page produit dans un dossier woocommerce dans le thème enfant mais en fait, vous ne devriez pas en avoir besoin. Essayez avec le hook “woocommerce_shop_loop_title” qui aura le même effet et ne disparaîtra pas lors des mise à jour.

    #2335565
    Silkhands
    Participant
    Initié WordPress
    8 contributions

    J’ai essayé de remplacer le hook par celui que vous m’avez indiqué, pour une raison obscure l’attribut se place au dessus de l’image et impossible de le placer en dessous.. C’est d’ailleurs pour ça que j’avais créé le hook personnalisé. Dans l’absolu ce n’est pas bien grave, je vais chercher un peu plus et si ça ne marche pas je ferai la manip manuellement.

    Encore merci !

    #2335567
    ferman
    Participant
    Maître WordPress
    2097 contributions

    pour une raison obscure l’attribut se place au dessus de l’image

    Oui c’est curieux: je teste toujours avant de donner une info et chez moi ça se positionne  comme il faut. Le mieux est  le hook “before_shop_loop_item_title”.

    Si vous trouvez la solution miracle, ce sera bien de la donner sur le forum. Bon courage

    #2335583
    ferman
    Participant
    Maître WordPress
    2097 contributions

    Et une dernière chose qui me vient à l’esprit: on peut régler la positionexacte du hook en jouant sur la priorité. Par exemple avec le hook “before_shop_loop_item_title” et une priorité 0 ou positive,  le titre est sous l’image avec une valeur négative (-10) il est au-dessus.

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