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

  • WordPress :6.4
  • Statut : résolu
9 sujets de 46 à 54 (sur un total de 54)
  • Auteur
    Messages
  • #2475886
    ferman
    Participant
    Maître WordPress
    7063 contributions

    Après avoir cherché un peu, je pense qu’il y a un problème de cache (fastest cache). Pouvez-vous le vider?

    #2475920
    AnuragSaxena
    Bloqué
    Initié WordPress
    7 contributions

    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 1 semaine et 4 jours par Joss47.
    #2476048
    Guillaume Homespot
    Participant
    Initié WordPress
    48 contributions

    @AnuragSaxena

    j’achète rien du tout. Sauf 1 ou 2 filles de temps en temps pour un après midi piscine. 3 quand j’ai la forme. C’est + de la location pour être précis. Comme précise Edgar Yves, je suis la case fraîcheur du quartier (https://www.youtube.com/watch?v=awlj_cYGIF8)

    Votre code me fait peur, et, je vois que vous êtes bloqué. Désolé, j’ai pas confiance. Merci quand même.

     


    @Ferman

    Le site est en ligne, communication lancée, et, aucun souci d’affichage. Je ne comprends pas. Je vide systématiquement les caches après chaque manipulation, que cela soit install/desinstall de module ou de modification de code (php ou CSS).

    On a quelque chose de bizarre, c’est que, vous pouvez mettre le code dans les 2 (darron et mouflet), et moi, ca passe que dans le thème mouflet. Le darron ca me fait un code erreur.

    Je vais ressayer le code, dans le thème mouflet, puis vider les caches et voir ce que cela donne.

     

    #2476060
    ferman
    Participant
    Maître WordPress
    7063 contributions

    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 1 semaine et 3 jours par ferman.
    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par ferman.
    #2476087
    Guillaume Homespot
    Participant
    Initié WordPress
    48 contributions

    J’essaie de vous suivre, mais, je ne comprends pas….

    J’aimerai que les images « 1 » n’apparaissent pas dans les pages produits…. Juste les « 1 »

    Et que ces images, les « 1 », apparaissent en page boutique.

    Je ne sais pas comment expliquer….

    «  »Mais là vous avez déjà neige-1 donc, si vous avez utilisé le code sans modification,  il ne peut y avoir aucune modification. » »

    Je dois modifier le code ? j’ai juste fait un copier-coller du code que vous m’avez donné…. je ne comprends rien

    Est ce que, c’est possible svp, d’avoir un code sans que j’ai de modification ou autre à faire dedans ?

    #2476091
    ferman
    Participant
    Maître WordPress
    7063 contributions

    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)

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2476096
    Guillaume Homespot
    Participant
    Initié WordPress
    48 contributions

    Eureka !

    Ca fonctionne… enfin on dirait…..

    Et donc, pour les autres produits, il me suffit juste de remplacer le « neige » en ligne 12 par le nom du produit concerné ?

    Bon j’avais pas prévu le truc avec le cas-roux-sel en page d’accueil, du coup, normal, il met la vignette principale. Je vais voir avec le client.

    Par contre, il faut que j’enregistre ce code quelque part en cas d’éventuel autre WordPress….

    Ferman, grand grand merci. Sincèrement. Vous êtes un Sage. Excusez moi encore de vous avoir fait galérer ainsi. Il faut vraiment que je trouve moyen de vous remercier.

    #2476142
    ferman
    Participant
    Maître WordPress
    7063 contributions

    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 1 semaine et 3 jours par ferman.
    #2476245
    Guillaume Homespot
    Participant
    Initié WordPress
    48 contributions

    Ca marche….

    Vraiment, grand merci.

    Résolu !

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