ThemeLocal - Des conseils de blog qui fonctionnent comme par magieThemeLocal - Des conseils de blog qui fonctionnent comme par magieThemeLocal - Des conseils de blog qui fonctionnent comme par magie
  • Blogging
  • WordPress
  • Email Marketing
  • SEO
  • Réseaux sociaux
  • More
    • Tutoriels
    • Shopify
    • Avis
    • Conseils
    • Sécurité
    • Logiciels et services
    • Génération de trafic
    • Guide du débutant
    • Showcase
Search
  • Conditions d’utilisation
  • Politique de confidentialité
  • Politique de cookies
  • Contactez nous
© 2022 Themelocal. Tous les droits sont réservés.
En lisant: Comment changer une image de produit WooCommerce sur Hover
Partager
Notification Montre plus
Aa
ThemeLocal - Des conseils de blog qui fonctionnent comme par magieThemeLocal - Des conseils de blog qui fonctionnent comme par magie
Aa
  • Blogging
  • WordPress
  • Email Marketing
  • SEO
  • Réseaux sociaux
  • More
Search
  • Blogging
  • WordPress
  • Email Marketing
  • SEO
  • Réseaux sociaux
  • More
    • Tutoriels
    • Shopify
    • Avis
    • Conseils
    • Sécurité
    • Logiciels et services
    • Génération de trafic
    • Guide du débutant
    • Showcase
Suivez-nous
  • Conditions d’utilisation
  • Politique de confidentialité
  • Politique de cookies
  • Contactez nous
© 2022 Themelocal. Tous les droits sont réservés.
ThemeLocal - Des conseils de blog qui fonctionnent comme par magie > Blog > Tutoriels > Comment changer une image de produit WooCommerce sur Hover
Tutoriels

Comment changer une image de produit WooCommerce sur Hover

Dernière mise à jour: novembre 24, 2022 9:00
ThemeLocal il y a 1 an 9 minutes lecture minimale
Partager
9 minutes lecture minimale
Partager

Ajouter un effet de survol subtil aux images de vos produits est l’une des meilleures choses que vous puissiez faire pour votre site WooCommerce.

Contents
Qu’est-ce qu’un effet de survol d’image ?1. Trouver un thème WooCommerce approprié2. Installez le thème Botiga3. Installez le plug-in Botiga Pro 4. Importer un site de démarrage5. Ouvrez le menu du catalogue de produits dans le personnalisateur6. Activer l’effet d’échange d’image du produit7. Ajoutez vos propres produitsConclusion

Cela rendra votre magasin plus interactif, améliorera votre temps de séjourfaites bonne impression auprès de vos visiteurs et contribuez à les convertir en clients.

Dans ce tutoriel, je vais montrer comment vous pouvez ajouter un effet d’échange d’image à vos produits dans votre boutique WooCommerce.

Qu’est-ce qu’un effet de survol d’image ?

Un effet de survol d’image est une animation qui se déclenche lorsque le curseur survole une image.

Cela peut impliquer des effets tels que l’agrandissement, la réduction, la rotation, le retournement ou l’échange d’une image ; changer ses couleurs; ou en y ajoutant des boutons d’appel à l’action.

Échange de produits activé à l'aide de Botiga

Un effet de survol d’image bien choisi, tel qu’une animation d’échange d’image de produit élégante, présente de nombreux avantages. Par exemple, il :

  • fait une bonne première impression
  • renforce la confiance
  • attire immédiatement l’attention sur les produits
  • permet aux visiteurs de savoir que les images sont cliquables
  • aide les clients à prendre des décisions d’achat plus rapidement
  • améliore les temps d’attente et les classements des moteurs de recherche
  • peut remplacer les vidéos de produits
  • …et plus

Voyons maintenant comment vous pouvez ajouter un effet d’échange d’image à vos produits WooCommerce.

1. Trouver un thème WooCommerce approprié

Le moyen le plus simple d’ajouter un effet de survol aux images de vos produits consiste à installer un thème WooCommerce qui fournit cette fonctionnalité prête à l’emploi.

Dans ce tutoriel, j’utiliserai notre thème Botiga qui vous permet d’apporter des personnalisations avancées à votre boutique WooCommerce sans écrire une seule ligne de code. Cependant, vous pouvez utiliser n’importe quel autre thème WooCommerce qui inclut cette fonctionnalité.

Thème Botiga WooCommerce, site de démarrage gratuit

2. Installez le thème Botiga

Tout d’abord, téléchargez le thème Botiga gratuit sur notre site Web.

Ensuite, ouvrez votre tableau de bord WordPress et accédez à Apparence > Thèmes > Ajouter un nouveau > Télécharger un thème.

Télécharger le thème, et appuyez sur le Installer maintenant et Activer boutons pour installer et activer le thème sur votre site Web.

Téléchargez le thème Botiga dans WordPress

3. Installez le plug-in Botiga Pro

Botiga Pro est un plugin premium qui étend le thème gratuit avec des fonctionnalités avancées et des sites de démarrage supplémentaires. Pour ajouter un effet de survol aux images de vos produits WooCommerce, vous avez besoin à la fois du thème et du plugin.

Après avoir acheté la licence, téléchargez Botiga Pro depuis votre compte Themelocal, puis rendez-vous sur Plugins> Ajouter un nouveau> Télécharger le plugin.

Télécharger le plugin, et appuyez sur le Installer maintenant bouton.

Téléchargement du plugin Botiga Pro dans wordpress

Ensuite, activez votre licence en allant sur Plugins > Licence Botiga Pro et entrez votre clé de licence. Vous pouvez obtenir votre clé depuis votre compte Themelocal.

Fait? Passons à l’étape suivante.

4. Importer un site de démarrage

Les sites de démarrage Botiga (ou démos) sont des magasins WooCommerce prêts à l’emploi avec des exemples de produits que vous pouvez importer en quelques clics. Une fois Botiga activé sur votre site, vous verrez une bannière dans votre Tableau de bord thématique vous invitant à consulter les sites de démarrage.

Vous pouvez accéder à la bibliothèque du site de démarrage en cliquant soit sur le Sites de démarrage bouton dans le bandeau ou le Apparence > Sites de démarrage menu dans la barre latérale gauche.

La bibliothèque se compose actuellement de cinq sites de démarrage : Beauté, Vêtements, Meubles, Bijoux et Produit unique.

Avant d’en choisir un, vous pouvez cliquer sur le Aperçu de la démo bouton pour vérifier à quoi ressemblerait votre site. Ensuite, appuyez sur le Importer de votre site de démarrage préféré et attendez la fin du processus d’importation.

Importer un site de démarrage Botiga

5. Ouvrez le menu du catalogue de produits dans le personnalisateur

Il est maintenant temps d’ajouter l’effet de survol à vos images de produits WooCommerce. Voici ce que vous devez faire :

Aller à Apparence > Personnaliser pour ouvrir le Customizer.

Accéder au Customizer dans WordPress

Dans l’outil de personnalisation, accédez au WooCommerce > Catalogue de produits menu, et développez le Fiche produit option.

C’est ici que vous pouvez appliquer l’effet de survol de l’image.

Accéder à l'option fiche produit dans Botiga Pro

6. Activer l’effet d’échange d’image du produit

Une fois la Fiche produit l’onglet est développé, vous devriez voir un Échange d’image de produit option.

Activez-le, puis appuyez sur le Publier bouton pour enregistrer vos modifications.

Option d'échange d'image de produit dans Botiga Pro

Désormais, chaque fois que le curseur survole une image de produit sur une page d’archive, il sera remplacé par une autre image de la page de produit. Cela signifie que vous devrez avoir au moins deux images pour chaque produit.

Ouvrez l’une de vos pages d’archives, par exemple vos pages de boutique ou de catégorie, et vérifiez comment fonctionne l’échange d’images sur votre site.

Par exemple, voici à quoi ressemblait la page Boutique sur mon site de démonstration auparavant :

Images de produits lorsque l'échange d'images n'est pas activé

Et voici comment cela fonctionne après avoir activé le Échange d’image de produit caractéristique:

Échange de produits activé à l'aide de Botiga

7. Ajoutez vos propres produits

À présent, vous avez un site WooCommerce fonctionnel et vous avez ajouté un effet de survol aux images de vos produits.

Cependant, le site de démarrage que vous avez importé de Botiga contient des produits factices. Voyons donc rapidement comment remplir votre boutique avec vos propres produits dans WooCommerce.

Vous pouvez télécharger vos produits à partir du Produits > Ajouter nouveau menu dans votre zone d’administration WordPress.

Sur le Ajouter un nouveau produit page, il y a un éditeur où vous pouvez entrer les détails de votre produit, comme le titre et la description.

Ajouter un titre et une description à un nouveau produit dans WooCommerce

Une fois qu’ils sont remplis, faites défiler jusqu’à la Données du produit section, choisissez un type de produit et remplissez tous les champs pertinents, tels que l’inventaire, l’expédition, les produits liés et autres.

Pour plus de détails sur les options de données produit, vous pouvez consulter cette page de documentation WooCommerce.

Paramétrage des données produit dans WooCommerce

Ensuite, dans la barre latérale droite, vous verrez deux options :

  • Image du produit – c’est l’image en vedette sur la page du produit
  • Galerie de produits – cela inclut toutes les autres images du produit

Comme je l’ai mentionné ci-dessus, vous devrez télécharger au moins deux images (une en tant que Image du produit et un dans le Galerie de produits) pour faire du Botiga Échange d’image de produit travail de fonctionnalité.

Ajouter des images de produits à une boutique WooCommerce

Vous pouvez également ajouter Catégories de produits et Étiquettes de produit de la barre latérale.

Prévisualisez la page du produit en cliquant sur le Aperçu bouton, et lorsque vous êtes prêt, appuyez sur le Publier bouton.

Conclusion

L’ajout d’un effet de survol d’image de produit à votre site WooCommerce est un excellent moyen de le rendre interactif et attrayant.

Bien qu’il existe de nombreuses façons d’implémenter des effets de survol, je recommande d’utiliser des animations subtiles telles que l’échange d’images, car elles ne sont pas trop gênantes et offrent une meilleure expérience de navigation à l’utilisateur, en particulier dans une boutique WooCommerce.

Botiga Pro vous aidera à ajouter facilement un effet d’échange de survol aux images de vos produits sur votre site WooCommerce – tout ce que vous avez à faire est d’accéder au WordPress Customizer pour activer l’effet et ajouter au moins deux images à chacun de vos produits.

J’espère que vous avez trouvé ce tutoriel utile. Si vous avez des questions, laissez-nous un commentaire ci-dessous.

Vous pourriez aussi aimer

Comment créer un diaporama sur iPhone (iOS 17)

Cette offre du Black Friday sur un téléviseur Hisense 55 pouces est à ne pas manquer

Économisez 150 £ supplémentaires sur l’impressionnant téléviseur OLED LG G3

Comment soumettre des commentaires sur la version bêta d’iOS à Apple

Résolu : Pourquoi l’heure sur mon écran de verrouillage est-elle faible ? (iOS17)

MARQUÉ: Changer, Comment, Hover, Image, produit, sur, une, WooCommerce
ThemeLocal novembre 24, 2022 novembre 24, 2022
Partagez cet article
Facebook Twitter Pinterest Whatsapp Whatsapp
Partager
Qu-est-ce que tu penses?
Aimer0
Triste0
Heureux0
Somnolent0
Fâché0
Sans commentaires0
Clin d-œil0
Article précédent Qualcomm annonce une nouvelle puce pour smartphone milieu de gamme Snapdragon 782G
Article suivant https://blog.hootsuite.com/instagram-reels-cover/
Laissez un commentaire

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Poste populaire

Comment arrêter les notifications du clavier Apple TV sur iPhone
Comment
https://blog.hootsuite.com/experiment-ai-social-strategy/
Stratégie
Comment activer Siri simplement en portant votre iPhone à votre oreille
Comment
Echo Show 15 est désormais un téléviseur bon marché avec cette offre Cyber ​​​​Monday
Offres
Comment activer le mode d’économie de batterie sur Quest 3
Comment
Examen du sens JBL Soundgear
Avis techniques

También podría gustarte

Comment

Comment créer un diaporama sur iPhone (iOS 17)

il y a 8 heures 4 minutes lecture minimale
Offres

Cette offre du Black Friday sur un téléviseur Hisense 55 pouces est à ne pas manquer

il y a 15 heures 4 minutes lecture minimale
Offres

Économisez 150 £ supplémentaires sur l’impressionnant téléviseur OLED LG G3

il y a 24 heures 5 minutes lecture minimale
Comment

Comment soumettre des commentaires sur la version bêta d’iOS à Apple

il y a 1 jour 1 minutes lecture minimale
Comment

Résolu : Pourquoi l’heure sur mon écran de verrouillage est-elle faible ? (iOS17)

il y a 1 jour 5 minutes lecture minimale
Comment

Comment activer Siri simplement en portant votre iPhone à votre oreille

il y a 2 jours 2 minutes lecture minimale
Offres

Voici une autre offre incroyable du Cyber ​​​​Monday pour le téléviseur Hisense A6K

il y a 2 jours 4 minutes lecture minimale
Comment

Comment arrêter les notifications du clavier Apple TV sur iPhone

il y a 2 jours 1 minutes lecture minimale
Montre plus
ThemeLocal - Des conseils de blog qui fonctionnent comme par magieThemeLocal - Des conseils de blog qui fonctionnent comme par magie
Suivez-nous
© 2022 Themelocal. Tous les droits sont réservés.
  • Conditions d’utilisation
  • Politique de confidentialité
  • Politique de cookies
  • Contactez nous
Welcome Back!

Sign in to your account

Mot de passe perdu?