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

Bonjour,

Merci pour votre question. Il est tout à fait possible d’afficher une image différente pour les vignettes de produits sur la page boutique par rapport aux images des produits sur la page produit. Voici comment vous pouvez le faire avec WordPress et WooCommerce, en utilisant le thème OceanWP et des plugins.
<h3>Étapes pour Afficher des Images Différentes :</h3>
<h4>1. Utiliser un Plugin comme « WooThumbs »</h4>
« WooThumbs » est un plugin premium qui permet de gérer les galeries d’images de produits de manière avancée. Vous pouvez définir des images différentes pour les vignettes de la boutique et les pages de produits.

• Installation et configuration :
  1. Achetez et téléchargez le plugin « WooThumbs » depuis WooCommerce.
  2. Installez et activez le plugin.
  3. Allez dans les paramètres du plugin et configurez les images de vignettes pour la boutique et les images de produits séparément.

<h4>2. Utiliser des Fonctions PHP Personnalisées</h4>
Si vous préférez une solution sans plugin, vous pouvez ajouter du code personnalisé à votre thème pour changer l’image de la vignette de produit sur la page boutique.

• Code à ajouter dans le fichier functions.php de votre thème enfant :

<div class= »dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium »>
<div class= »flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md »>

// Changer l'image de la vignette du produit sur la page boutique
add_filter('woocommerce_product_get_image', 'custom_product_thumbnail', 10, 5);

function custom_product_thumbnail($image, $product, $size, $attr, $placeholder) {
    if (is_shop() || is_product_category() || is_product_tag()) {
        // ID de l'image spécifique pour la vignette
        $thumbnail_id = get_post_meta($product->get_id(), '_thumbnail_id_shop', true);
        if ($thumbnail_id) {
            $image = wp_get_attachment_image($thumbnail_id, $size, false, $attr);
        }
    }
    return $image;
}

// Ajouter un champ personnalisé pour l'image de la vignette de la boutique
add_action('add_meta_boxes', 'add_custom_meta_box');
function add_custom_meta_box() {
    add_meta_box('custom_meta_box', 'Image de la Vignette Boutique', 'custom_meta_box_callback', 'product', 'side', 'low');
}

function custom_meta_box_callback($post) {
    $thumbnail_id = get_post_meta($post->ID, '_thumbnail_id_shop', true);
    echo '<input type="hidden" id="thumbnail_id_shop" name="thumbnail_id_shop" value="' . esc_attr($thumbnail_id) . '">';
    echo '<img id="thumbnail_id_shop_preview" src="' . wp_get_attachment_url($thumbnail_id) . '" style="max-width:100%;"><br>';
    echo '<a href="#" id="set_thumbnail_id_shop">Définir l’image de la vignette boutique</a> | <a href="#" id="remove_thumbnail_id_shop">Supprimer</a>';
}

add_action('save_post', 'save_custom_meta_box');
function save_custom_meta_box($post_id) {
    if (isset($_POST['thumbnail_id_shop'])) {
        update_post_meta($post_id, '_thumbnail_id_shop', sanitize_text_field($_POST['thumbnail_id_shop']));
    }
}

add_action('admin_enqueue_scripts', 'enqueue_custom_admin_scripts');
function enqueue_custom_admin_scripts() {
    wp_enqueue_media();
    wp_enqueue_script('custom-admin-script', get_stylesheet_directory_uri() . '/custom-admin-script.js', array('jquery'), null, true);
}

</div>
</div>
Code JavaScript à ajouter dans un fichier custom-admin-script.js dans le répertoire de votre thème enfant :

jQuery(document).ready(function($) {
    $('#set_thumbnail_id_shop').click(function(e) {
        e.preventDefault();
        var frame = wp.media({
            title: 'Sélectionner l’image de la vignette boutique',
            button: {
                text: 'Utiliser cette image'
            },
            multiple: false
        });

        frame.on('select', function() {
            var attachment = frame.state().get('selection').first().toJSON();
            $('#thumbnail_id_shop').val(attachment.id);
            $('#thumbnail_id_shop_preview').attr('src', attachment.url);
        });

        frame.open();
    });

    $('#remove_thumbnail_id_shop').click(function(e) {
        e.preventDefault();
        $('#thumbnail_id_shop').val('');
        $('#thumbnail_id_shop_preview').attr('src', '');
    });
});

<div class= »flex flex-grow flex-col max-w-full »>
<div class= »min-h-[20px] text-message flex flex-col items-start whitespace-pre-wrap break-words [.text-message+&]:mt-5 juice:w-full juice:items-end overflow-x-auto gap-2″ dir= »auto » data-message-author-role= »assistant » data-message-id= »5bd7ab76-2741-4abe-82ab-ff255d08b82e »>
<div class= »flex w-full flex-col gap-1 juice:empty:hidden juice:first:pt-[3px] »>
<div class= »markdown prose w-full break-words dark:prose-invert light »>
<h3>Conclusion</h3>
Ces méthodes vous permettront d’afficher des images différentes pour les vignettes de produits sur la page boutique et les pages de produits. La première méthode utilise un plugin premium pour une gestion facile, tandis que la deuxième méthode nécessite l’ajout de code personnalisé pour une solution plus technique.

N’hésitez pas à me contacter si vous avez des questions supplémentaires ou des difficultés.

Cordialement,

</div>
</div>
</div>
</div>

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

Je vois aussi tout correctement; c’était très certainement un problème de cache. C’est la bonne nouvelle.

Autrement, je ne sais pas si je pourrai tout expliquer mais actuellement l’image principale sur votre page produit est toujours neige-1 et non neige-2 comme vous le souhaitiez. L’image du produit sur la page shop est automatiquement la même (neige-1). Le dernier code que je vous ai passé convertit n’importe quelle image neige (2,3,4,5 ) en neige-1 sur la page boutique. Mais là vous avez déjà neige-1 donc, si vous avez utilisé le code sans modification,  il ne peut y avoir aucune modification.

Pour l’erreur dans wp-fonctions du thème parent ça ne correspond à rien de ma connaissance. Un mécanisme de sécurité interdisant la modification des fichiers du site depuis l’admin? mais ça ne devrait pas se présenter comme ça et ça devrait interdire les modifications dans tous les thèmes. Je n’ai pas d’idée.

En plus du thème enfant, vous pourriez réessayer  le code en utilisant l’extension que je vous avais indiquée au début de notre (déjà long) échange.

A tout hasard essayez aussi ce code.

function changimage(){?>
	
	<script>

	jQuery(document).ready(function($) {
        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 {return
             }
            }
        })
	});
	</script>
	
	<?php
}		
add_filter('wp_footer', 'changimage' );

Il rend l’application du code « plus simple ». C’est le début du code fourni par  le dernier intervenant et c’est effectivement une amélioration.

Il y aura aussi une autre chose à tenter, presque le même code mais purement js (sans php). Elle fonctionne aussi très bien chez moi. Cela vaudra la peine d’essayer.

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

Désolé, oui, on a un peu de mal à se comprendre. On reste avec le produit neige subsaharienne Si vous voulez l’image 2 c’est à dire si j’ai bien compris:

comme image principale pour la page produit il faut la sélectionner dans votre page produit (côté admin). Ensuite, vous ajoutez les images que vous voulez à votre galerie. Si vous ne voulez pas de 1 dans cette galerie, vous ne l’ajoutez pas. Voir la pièce jointe.

Si vous allez voir la boutique à ce stade , vous verrez que l’image du produit est la 2 comme sur la page produit. C’est normal. Le code ci-dessous (il n’y a rien à changer) remplacera l’image 2 par l’image 1 dans la boutique (mais pas dans la page produit).

function changimage(){?>
	
	<script>

	jQuery(document).ready(function($) {
        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,"-1-"));
             }
            else {return
             }
            }
        })
	});
	</script>
	
	<?php
}		
add_filter('wp_footer', 'changimage' );

Si ça fonctionne, on fera la même chose pour tous les parfums (si c’est ce que vous voulez)

Bonjour,

Voici le pour tous les produits actuels.

Si vous avez d’autres produits dans le futur, c’est le même principe. Vous rajoutez des modules else if à la suite. L’intérêt de ce code par rapport à d’autres plus simples est qu’il permet de sélectionner des images différentes par produit. Par exemple, vous pourriez avoir -1- pour le premier, -3- pour le deuxième…etc. Et au sujet des images, n’oubliez pas les conditions à respecter pour que le code fonctionne.

function changimage(){?>
	
	<script>

	jQuery(document).ready(function($) {
        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,"-1-"));
             }
            else if ($(this).attr("srcset").indexOf("lion") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-1-"));
             }
            else if ($(this).attr("srcset").indexOf("force") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-1-"));
             }
            else if ($(this).attr("srcset").indexOf("oudacieux") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-1-"));
             }
            else if ($(this).attr("srcset").indexOf("nuit") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-1-"));
			} 
       		else if ($(this).attr("srcset").indexOf("rouge") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-1-"));
			} 
			else if ($(this).attr("srcset").indexOf("santal") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-1-"));
			} 
			else if ($(this).attr("srcset").indexOf("signare") != -1 ) {
             $(this).attr("srcset",$(this).attr("srcset").replaceAll(d,"-1-"));
			} 
            else {return
             }
           }
        })
	});
	</script>
	
	<?php
}		
add_filter('wp_footer', 'changimage');

Comme le code n’est valable que pour le thème oceanWP (il faudrait le modifier pour d’autres thèmes), le mieux est de le mettre dans functions.php du  thème enfant. En passant, il est bon que vous ne puissiez pas le mettre dans functions.php du thème parent: c’est une mauvaise manière de procéder.

Voila: j’espère que tout se passera bien maintenant. Si vous avez des questions revenez les poser ici. Quand vous estimerez que le sujet est clos, pourrez-vous le marquer comme [RESOLU]? Merci.

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