La plateforme WooCommerce est un outil incroyable pour quiconque souhaite créer une boutique en ligne sur WordPress. Sa flexibilité et sa modularité ont fait d’elle la solution e-commerce de choix pour des milliers d’entrepreneurs du web.
Cependant, avec la multitude de boutiques en ligne utilisant WooCommerce, comment pouvez-vous faire en sorte que la vôtre se démarque ?
Un élément souvent sous-estimé, mais qui peut avoir un impact significatif sur l’apparence et le ressenti de votre boutique, est l’icône de chargement. Dans cet article détaillé, nous allons non seulement vous montrer comment personnaliser cette icône, mais également souligner son importance dans l’expérience utilisateur globale.
Qu’elles sont les avantages de la personnalisation l'icône de chargement
- Affirmation de Marque : Chaque élément de votre site, aussi minime soit-il, parle de votre marque. Une icône de chargement sur mesure peut renforcer votre image de marque en fournissant une expérience cohérente à vos clients.
- Amélioration de l’Expérience Utilisateur : Une icône unique et attrayante peut rendre l’attente moins pénible pour l’utilisateur, améliorant ainsi sa perception globale de votre site.
- Détails Professionnels : La customisation des éléments infimes comme l’icône de chargement démontre votre souci du détail, renforçant ainsi la confiance des clients.
Le code et son explication
add_action('wp_head', 'custom_ajax_spinner', 1000 );
function custom_ajax_spinner() {
?>
<style>
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
height: 3em;
width: 3em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
content: "";
-webkit-animation: none;
-moz-animation: none;
animation: none;
background-image:var(--wpr-bg-d1239d19-381a-4a24-93c4-c826874909de) . "/img/my_spinner.gif"; ?>') !important;
background-position: center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
}
</style>
<?php
}
Comprendre le code :
- add_action : Cette fonction WordPress ajoute un hook dans la section ‘head’ du site, assurant que le style est bien intégré.
- Sélecteurs CSS : Les sélecteurs visent l’icône de chargement par défaut de WooCommerce.
- Propriétés CSS : Elles définissent le style et la position de l’icône. La clé est la propriété background-image qui sera remplacée par votre propre icône.
- Insertion Dynamique de l’Image : La portion PHP sert à extraire l’URL de votre icône et à l’intégrer au style. Assurez-vous que le fichier image est dans le bon dossier et qu’il a le bon nom.
Conseils pour une icône de chargement cfficace :
- Cohérence : Veillez à ce que l’icône reflète le design global de votre site.
- Taille : L’icône ne doit pas être trop lourde afin de ne pas affecter les temps de chargement.
- Compatibilité : Testez l’icône sur différents navigateurs et appareils pour s’assurer qu’elle s’affiche correctement.
- Simplicité : Une icône simple mais élégante est souvent plus efficace qu’un design complexe.
Vous pouvez changer le lien de votre image ici :
background-image:url('<?php echo get_stylesheet_directory_uri() . "/img/my_spinner.gif"; ?>') !important;
Insérer une image dans vos médias WordPress, ou dans votre FTP et copier/coller l’URL à la place de :
/img/my_spinner.gif
De nombreux sites proposent des images animées, comme icons8.com par exemple.
Résultat .. sympa non ?
Conclusion
Dans le monde ultra-compétitif du e-commerce, même les plus petits détails peuvent avoir un impact sur le succès de votre boutique. La personnalisation de l’icône de chargement de WooCommerce est l’une de ces nuances qui, bien que mineure en apparence, peut grandement améliorer la perception de votre site par les utilisateurs.
En investissant quelques minutes pour intégrer et personnaliser le code ci-dessus, vous pourrez renforcer votre image de marque, améliorer l’expérience utilisateur et montrer à vos clients que vous valorisez chaque aspect de leur visite. Alors n’attendez plus, donnez à votre boutique WooCommerce l’attention qu’elle mérite!