Changer l’image du produit au passage de la souris dans l’archive WooCommerce

Pour un client, je souhaitais afficher une autre image au passage de la souris sur un produit WooCommerce.
Le but était d’avoir le produit brut et au passage de la souris avoir le produit en situation et sans extension.

Prérequis : thème utilisé Hello Elementor

1. L'impact visuel :

2. Étapes détaillées pour la mise en place

Pour commencer, il vous faut aller dans Apparence -> Thème -> Thème enfant ->et aller dans la function.php

Insérer ce code en bas de votre function.php
				
					// Ajoutez ce code à functions.php
afficher_premiere_image_galerie_sous_archive() {
    global $product;
    // Vérifiez si le produit est un produit WooCommerce
    if ($product && is_a($product, 'WC_Product')) {
        // Récupérez l'ID du produit
        $product_id = $product->get_id();
        // Récupérez la galerie d'images du produit
        $product_gallery = get_post_meta($product_id, '_product_image_gallery', true);
        // Vérifiez s'il y a des images dans la galerie
        if ($product_gallery) {
            // Convertissez la liste d'images en un tableau
            $product_gallery_ids = explode(',', $product_gallery);
            // Récupérez l'ID de la première image de la galerie
            $first_image_id = $product_gallery_ids[0];
            // Récupérez l'URL de l'image
            $first_image_url = wp_get_attachment_url($first_image_id);
            // Affichez l'image sous l'image principale
            echo '<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="First Gallery Image" class="first-gallery-image" title="Changer l&#039;image du produit au passage de la souris dans l&#039;archive WooCommerce 2" data-lazy-src="&#039; . esc_url($first_image_url) . &#039;"><noscript><img decoding="async" src="&#039; . esc_url($first_image_url) . &#039;" alt="First Gallery Image" class="first-gallery-image" title="Changer l&#039;image du produit au passage de la souris dans l&#039;archive WooCommerce 2"></noscript>';
        } else {
            // Affichez l'image principale du produit si la galerie est vide
            echo $product->get_image();
        }
    }
}
add_action('woocommerce_before_shop_loop_item_title', 'afficher_premiere_image_galerie_sous_archive', 15);
				
			
Ce code permettra l’affichage d’une seconde image en dessous de la première. La seconde image sera extraite de la galerie d’images associée au produit. Il est crucial d’avoir une image principale du produit, et également d’assurer la présence d’une image dans la galerie. Sans cela, le code affichera deux fois la même image.
Une fois que les images et le code ont été insérés, il est nécessaire de procéder à l’animation, laquelle sera réalisée dans le CSS.
				
					.woocommerce ul.products li.product a img:nth-of-type(2) {
    display: none;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(2) {
    display: block;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
    display: none;
}
				
			
  1. Le premier sélecteur cible la deuxième image (img:nth-of-type(2)) à l’intérieur d’un lien (a) situé dans un élément li.product de la liste de produits. Il spécifie que, par défaut, la deuxième image doit être masquée (display: none;).

  2. Le deuxième sélecteur s’applique lorsque l’utilisateur survole le lien (a) à l’intérieur d’un élément li.product de la liste de produits. Dans cette situation, il spécifie que la deuxième image doit être affichée (display: block;). Cela se traduit par le fait que lorsque l’utilisateur survole le produit, la deuxième image devient visible.

  3. Le troisième sélecteur cible la première image (img:nth-of-type(1)) à l’intérieur du même contexte que le deuxième sélecteur. Il spécifie que lorsque l’utilisateur survole le lien (a), la première image doit être masquée (display: none;), créant ainsi l’effet de bascule entre la première et la deuxième image.

3. Conclusion

Une fois les étapes suivies, votre animation est prête. Il vous reste à personnaliser le reste selon vos préférences. Veuillez noter que certains thèmes par défaut peuvent avoir des longueurs différentes, et cette personnalisation n’a pas été testée sur tous les thèmes. Soyez attentif aux ajustements nécessaires en fonction de votre thème spécifique.

Articles recent