[Résolu] Image différente en page boutique et page produit d’un même produit (Créer un compte)

Chez vous le code ne marchera pas car les urls ne différent pas par des chiffres mais par des lettres (A,B,C,D…). Il semblerait d’ailleurs que dans votre cas l’image de la galerie retenue pour la catégorie soit toujours -A-. Par exemple, pour « neige subsaharienne », c’est « https://www.notabane-parfums.com/wp-content/uploads/neige-A-100×100.jpg ». Il y a aussi neige-B, neige-C- et neige-D-. Quatre images en tout.

Pour les trois premiers produits, (« force tranquille », « lyon alpha », « neige subsaharienne ») si vous voulez respectivement les images B,C,D, vous utiliserez le code suivant:

$=jQuery;
var a = $('.woocommerce-LoopProduct-link.no-lightbox .woo-entry-image-main'); 
var d = /[-][A-Z][-]/g;


a.each(function () {
    var b = $(this).attr("srcset").toString(); 
   
    for (i = 0; i <a.length; i++) {
            if ($(this).attr("srcset").indexOf("neige") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-B-"));
             }
     else if ($(this).attr("srcset").indexOf("lion-alpha") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-C-"));
             }
 else if ($(this).attr("srcset").indexOf("force") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-D-"));
             }

    else {return
        }
    }
   });

Notez le mot-clé qui est tiré de l’url des images.

Il y a deux produits qui échappent à la règle: « nuit dakaroise » et « oudacieux » (pour oudacieux, c’est comme chez moi): pas de lettres mais des chiffres. Pour le prendre en compte, il suffit de remplacer var d = /[-][A-Z][-]/g;  par var d = /[-][A-Z0-9][-]/g;  Pour »nuit dakaroise », c’est encore différent. Il faudra le traiter à part si vous le souhaitez.

Vous voyez pourquoi il est important d’avoir accès au site .

Si vous êtes satisfait du résultat dans l’inspecteur, je vous indiquerai comment pérenniser le code.

Après avoir activé l’extension, cliquez sur « extraits de code » -> « ajouter un extrait » -> »ajoutez votre code personnalisé ». Sur l’écran qui apparaît, donnez un titre à votre extrait, dans la liste déroulante à droite, sélectionnez « extrait php » et copiez/collez le code ci-dessous:

function changimage(){?>
	
	<script>

	$=jQuery;
		var a = $('.woocommerce-LoopProduct-link.no-lightbox .woo-entry-image-main');
		var d = /[-][A-Z0-9][-]/g;

	a.each(function () {
		
		for (i = 0; i <a.length; i++) {
            if ($(this).attr("srcset").indexOf("neige") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-B-"));
             }
			else if ($(this).attr("srcset").indexOf("lion-alpha") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-C-"));
             }
			else if ($(this).attr("srcset").indexOf("force") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-D-"));
             }
			else if ($(this).attr("srcset").indexOf("oudacieux") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-2-"));
             }
			/*else if ($(this).attr("srcset").indexOf("mot-clé") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"valeur souhaitée"));
             }
			else if ($(this).attr("srcset").indexOf("mot-clé") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"valeur souhaitée"));
             }
			else if ($(this).attr("srcset").indexOf("mot-clé") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"valeur souhaitée"));
             } */
			 		 
			else {return
			 }
			}
		});
		
	</script>
	
	<?php
}		
add_filter('wp_footer', 'changimage',100 );

Enregistrez, activez. Si je n’ai pas fait d’erreur en recopiant, cela devrait être bon. Par contre pour « nuits », ça ne fonctionne pas. Très certainement parce que l’image actuelle n’est pas au même format que les autres (png et jpg). Essayez de modifier ces images: tout en jpg ou png et au lieu de Nuits et nuitA, B, C faire nuit-A-, (B, C…etc) ou nuit-1- (2,3…etc) de la même manière que pour les autres produits.

Bonjour,

Le code ne fonctionne plus chez moi non plus et c’est normal car vous avez opéré quelques changements qui l’empêchent de fonctionner. Je vous expliquerai en détail demain car c’est assez long. Pour faire simple, avec le code actuel, il faut que les urls des images de la galerie produit aient des structures identiques. Par exemple, pour neige, c’est:

https://www.notabane-parfums.com/wp-content/uploads/neige-B (ou une autre lettre ou un chiffre)-100x100 (le 100x100 est attribué automatiquement par wordpress).jpg

Avec « neige » en minuscule. Si vous choisissez quelque chose de différent (par exemple Neige avec une majuscule et sans lettre après) il n’y aura pas d’erreur mais pas de remplacement. Neige en majuscule et avec une lettre après conduira à la disparition de l’image. C’est le même problème pour tous les produits avec en plus d’autres différences que je préciserai demain.

Pour le moment, je vous conseillerais de ne pas sélectionner les nouvelles images de la galerie  au niveau de la page produit (hier, à part « nuit dakaroise » pour laquelle le problème existait déjà, en principe tout fonctionnait). Essayez ensuite pour voir si ça fonctionne mieux (je pense que oui)  et demain nous pourrons voir comment introduire correctement de nouvelles images.

• Cette réponse a été modifiée le il y a 6 mois et 3 semaines par ferman.
• Cette réponse a été modifiée le il y a 6 mois et 3 semaines par ferman.

Bonjour,

Voulez vous que je modifie tous les titres, par exemple, en « neige-1 », « neige-2 », « ige-3 » , « neige-4 » et « neige-5 » ?

Ce n’est pas nécessaire. Ce qui est important c’est que, après « neige- », vous ayez une lettre majuscule ou un chiffre de 0 à 9 . Pareil pour les autres images.

j’ai regardé dans votre profil pour vous contacter mais il n’y a rien.

tout le monde « qui-matte-mais-qui-disent-qu’ils-mattent-pas »….

C’est le principe d’un forum: tout est public à disposition des participants du forum et il n’y a pas de communication privée (sauf avec les modérateurs , par exemple pour faire supprimer un lien ).  Bon, ça empêche de vous faire parvenir un cheveu pour le marabout mais de toute façon, je suis comme vous, méfiant: et si le marabout se réveille de mauvaise humeur?  Au lieu d’une intervention bienveillante il est capable de lancer un maléfice; donc, pas de cheveu 🙂

Je n’avais jamais eu à utiliser le genre d’extension dont je parle dans la pièce jointe mais ce n’est pas compliqué. Pour des infos sur le plugin, voir ICI.  Vous pourrez si vous voulez désactiver/supprimer l’extension quand vous aurez terminé. Si vous avez des questions (probablement) n’hésitez pas à demander.

• Cette réponse a été modifiée le il y a 6 mois et 3 semaines par ferman.

J’ai vidé les caches, je n’ai pas régénéré les images (dois je le faire)

Non, j’ai vérifié: tout semble bon. Voici le code correspondant pour les 8 parfums. Je n’ai pas accès à votre admin donc je ne peux pas vérifier chez vous la partie php mais elle fonctionne parfaitement sur mon site d’essai donc cela doit être pareil pour votre site. Si ce n’est pas le cas on avisera.

function changimage(){?>
	
	<script>

	$=jQuery;
        var a = $('.woocommerce-LoopProduct-link.no-lightbox .woo-entry-image-main');
        var d = /[-][0-9][-]/g;

    a.each(function () {
        
        for (i = 0; i <a.length; i++) {
            if ($(this).attr("srcset").indexOf("neige") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
             }
            else if ($(this).attr("srcset").indexOf("lion") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
             }
            else if ($(this).attr("srcset").indexOf("force") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
             }
            else if ($(this).attr("srcset").indexOf("oudacieux") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
             }
            else if ($(this).attr("srcset").indexOf("nuit") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
			} 
       		else if ($(this).attr("srcset").indexOf("rouge") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
			} 
			else if ($(this).attr("srcset").indexOf("santal") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
			} 
			else if ($(this).attr("srcset").indexOf("signare") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
			} 
            else {return
             }
            }
        });

	</script>
	
	<?php
}		
add_filter('wp_footer', 'changimage',100 );

Le code ci-dessus est nécessaire si vous voulez changer pour des images différentes pour chaque produit (par ex neige-… pour neige-2 mais lion-… pour lion-3 etc.), ou si vous ne voulez appliquer le code qu’à certains produits. Par contre, si vous voulez changer toujours pour la même image et pour tous les produits(par ex neige-… pour neige-2;   lion-… pour lion-2; oudacieux-… pour oudacieux-2 etc.), le code est plus simple:

function changimage(){?>
	
	<script>

$=jQuery;
        var a = $('.woocommerce-LoopProduct-link.no-lightbox .woo-entry-image-main');
        var d = /[-][0-9][-]/g;

    a.each(function () {
        
        for (i = 0; i <a.length; i++) {          
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-3-"));
             }
      });

	</script>
	
	<?php
}		
add_filter('wp_footer', 'changimage',100 );

Comme vous n’utilisez que des chiffres, j’ai simplifié la variable « d » en excluant la possibilité de mettre des lettres majuscules (plus de neige-A!. Si un jour vous changez d’avis vous n’aurez qu’à reprendre la valeur donnée précédemment.

…mais il est normal que je vous fasse un petit cadeau…

Ne craignez rien pour votre karma, le cadeau est déjà fait:  c’était un plaisir de chercher un code pour résoudre un problème intéressant et d’avoir l’occasion d’essayer un excellent plugin que je ne connaissais pas.  Je n’utilise pas « discord » ni « face de-bouc » ni « skype » ni leurs semblables  🙁  mais c’est gentil d’y avoir pensé. Dans vos parfums, je ne vois pas « frangipanier ». L’odeur des frangipaniers fait partie des très bons souvenir de mes années lointaines en Côte d’Ivoire.

Une petite remarque: sur la page « points de vente » vous avez un point de vente au Sénégal avec une adresse à Dakar. C’est normal mais vous avez un « point de vente en France » avec la même adresse. Ça fait bizarre.

Tenez moi au courant  quand out fonctionnera, n’oubliez pas de passer le sujet en « Résolu ».

• Cette réponse a été modifiée le il y a 6 mois et 3 semaines par ferman.

Bonjour,

Je dois rentrer le code dans le fichier « functions.php » c’est ca ?

Par exemple, mais à condition d’avoir un thème enfant (c’est mieux de toute façon ), sinon toutes les personnalisations que vous ferez (à part les CSS personnalisés) seront effacées à chaque mise à jour du thème.

Le mieux est d’utiliser le plugin wpcode.

Par WP code je peux entrer les codes ? ok ok

Attention c’est l’un ou l’autre code, pas les deux à la fois. Vous le saviez sûrement mais ça ne coûte rien de prévenir.