Si vous gérez une boutique en ligne WooCommerce, vous savez probablement à quel point les images des produits sont importantes. Elles aident les clients à se faire une idée du produit et peuvent influencer leur décision d'achat. Cependant, certaines fonctionnalités comme le zoom sur l'image peuvent parfois être gênantes et ralentir le chargement de votre site. Dans cet article, nous allons vous montrer comment désactiver le zoom image des produits WooCommerce en utilisant un code simple.

Désactiver le zoom image avec le code WordPress

Le zoom sur l'image est une fonctionnalité par défaut de WooCommerce qui permet aux clients de zoomer sur les images des produits pour voir les détails. Cependant, certains propriétaires de boutiques en ligne peuvent préférer désactiver cette fonctionnalité pour des raisons de performance ou de convivialité.

Heureusement, il est facile de désactiver le zoom image avec un code simple. Voici les étapes à suivre :

1. Accédez à votre site WordPress et connectez-vous en tant qu'administrateur.
2. Accédez à l'éditeur de code de votre thème. Pour ce faire, cliquez sur Apparence > Éditeur dans le menu de gauche.
3. Ouvrez le fichier functions.php de votre thème. Si vous utilisez un thème enfant, ouvrez le fichier functions.php de votre thème enfant.
4. Ajoutez le code suivant à la fin du fichier functions.php :

// Désactiver le zoom image WooCommerce
function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

Ce code supprime la prise en charge du zoom image WooCommerce de votre site.

5. Enregistrez les modifications et vérifiez que le zoom image a été désactivé sur votre site.

Supprimer le clic qui agrandi les images

Si vous souhaitez également supprimer la fonction de clic qui agrandit les images lorsque vous cliquez dessus, vous pouvez ajouter un code supplémentaire dans votre panneau de style personnalisé.

1. Accédez à votre site WordPress et connectez-vous en tant qu'administrateur.
2. Accédez à l'éditeur de code de votre thème. Pour ce faire, cliquez sur Apparence > Personnaliser dans le menu de gauche.
3. Ouvrez le panneau de style personnalisé.
4. Ajoutez le code CSS suivant :

/* Supprimer le zoom et clic sur image des produits WooCommerce */
.woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__wrapper a img {
  pointer-events: none !important;
}

Ce code utilise la propriété CSS pointer-events pour désactiver les événements de clic et de zoom sur les images des produits WooCommerce.

5. Enregistrez les modifications et vérifiez que le clic qui agrandit les images a été supprimé de votre site.

Conclusion

Désactiver le zoom image des produits WooCommerce peut aider à améliorer les performances de votre site et à améliorer l'expérience utilisateur. En utilisant le code simple que nous avons fourni dans cet article, vous pouvez facilement désactiver le zoom image de votre site.

N'oubliez pas de tester soigneusement votre site après avoir effectué ces modifications pour vous assurer que tout fonctionne correctement.

Vous utilisez OXYGEN ?

Voici comment désactiver le zoom des images produits WooCommerce en utilisant le plugin "Mes fonctions PHP".

Le plugin "Mes fonctions PHP" est un excellent moyen de gérer le code PHP sur votre site Oxygen sans avoir à modifier les fichiers de votre thème via HTTP. Ce plugin vous permet d'ajouter du code personnalisé en utilisant l'éditeur de fichiers d'extensions WordPress.

Pour télécharger le plugin, rendez-vous sur cette page.

Une fois le Plugin téléchargé, la procédure est très simple.

1. Accédez à l'éditeur de fichiers des extensions en cliquant sur "Outils" dans le menu de gauche, puis sur "Éditeur de fichiers des extensions".
2. Cliquez sur "Mes fonctions PHP" à droite et sélectionner.
3. Ajoutez le même code, que ci-dessus, pour désactiver le zoom image WooCommerce.

Pour le code "CSS" qui permet de ne pas cliquer sur les images des produits WooCommerce, il peut être placé dans une "template" utilisée par Oxygen, ainsi le code fonctionnera pour toutes les pages produits de votre boutique.

En ajoutant le code CSS à la "template" utilisée par Oxygen, vous éviterez d'avoir à ajouter le code à chaque page produit individuellement. Cela vous permettra également de maintenir une cohérence sur toutes les pages produits de votre boutique.

En suivant ces étapes simples, vous pourrez désactiver le zoom image des produits WooCommerce et supprimer la fonction de clic qui agrandit les images pour toutes les pages produits de votre boutique WooCommerce.