Comment ajouter une page de paiement d'icônes de paiement WooCommerce personnalisées

Publié: 2021-03-01

Ajouter des icônes de paiement à la page de paiement Souhaitez-vous ajouter une icône personnalisée de passerelle de paiement WooCommerce pour la page de paiement ? Dans cet article, je vais vous montrer comment ajouter rapidement les icônes de paiement personnalisées à la page de paiement WooCommerce. Cet article contient une description détaillée des étapes pour ajouter rapidement des icônes de passerelle de paiement WooCommerce à la page de paiement.

La modification de vos fichiers de thème n'est pas toujours le moyen sûr de personnaliser WooCommerce - Je vous ai soulagé de l'ajout d'icônes de paiement n'importe où sur votre site en créant un plugin WooCommerce Payment Icons que vous pouvez trouver ici.

Ce plugin est livré avec un moyen simple d'ajouter des icônes SVG avec plus de 65 boutons de méthodes de paiement ! Vous pouvez également télécharger la bannière de paiement si vous n'aimez pas le SVG et vous pouvez également utiliser un shortcode pour afficher les paiements acceptés n'importe où sur votre boutique WooCommerce. Découvrez-le ici actuellement à un prix réduit.

Si vous exploitez une boutique WooCommerce, vous connaissez probablement l'ensemble d'icônes de carte de crédit par défaut. Pour certains, elles peuvent sembler correctes, mais si vous les ouvrez sur un écran haute résolution, elles peuvent apparaître un peu floues. De plus, ils ont l'air un peu dépassés.

Si vous recherchez une conception claire et personnalisée que vous pouvez mettre en œuvre, cet article vous guidera. Idéalement, la meilleure conception d'icône serait d'ajouter des formes de boutons incurvées personnalisées qui ont de fausses ombres portées.

Icônes personnalisées de la passerelle de paiement WooCommerce

Dans la plupart des cas, vous souhaitez ajouter des icônes haute résolution qui s'adaptent bien aux appareils mobiles et qui ont fière allure. Il existe une variété de sources où vous pouvez obtenir ces icônes de paiement - par exemple, les marchés de conception créative offrent une variété d'icônes de méthodes de paiement gratuites et premium comme ces icônes de méthodes de paiement définies sur Pixeden que vous pouvez télécharger et utiliser dans votre boutique WooCommerce.

Pour ce tutoriel simple, nous allons utiliser des icônes au look moderne. La meilleure solution serait d'utiliser des icônes SVG pour une résolution parfaite sur n'importe quel écran. icônes de paiement pour WordPress Si vous effectuez une recherche rapide sur Internet, vous trouverez une pléthore d'icônes de carte de crédit que vous pouvez implémenter sur la page de paiement et même le pied de page de votre boutique WooCommerce. Cependant, ceux qui se sont démarqués pour moi sont disponibles dans Dribble.

De plus, ils ont un design agréable que les utilisateurs vont adorer. Ces icônes ajoutent un sentiment de confiance à votre page de paiement, car les gens deviennent plus prudents lorsqu'il s'agit d'effectuer des achats en ligne. Voici les icônes que nous allons utiliser :

icônes de passerelle de paiement woocommerce personnalisées

De plus, celles disponibles sur Dribble sont des images de méthodes de paiement qu'un utilisateur connaît, par exemple, VISA, MasterCard, PayPal et AMEX.

Cela aidera à établir une présentation plus fiable et digne de confiance, attirant l'attention des visiteurs pour la première fois. Cependant, vous pouvez également vérifier si votre passerelle de paiement comprend différentes sociétés.

Pour être honnête, seuls quelques articles sur Internet tentent de vous montrer comment ajouter des icônes personnalisées de passerelles de paiement WooCommerce à l'aide de crochets et de filtres. Cet article essaie de vous aider à ajouter l'icône de chacune des passerelles de paiement WooCommerce par défaut à tout ce que vous souhaitez.

Pour cette raison, certains magasins WooCommerce n'acceptent que les paiements Visa et MasterCard et ils ne veulent pas afficher d'icônes pour d'autres passerelles de paiement WooCommerce comme American Express, afin de ne pas confondre le client.

Ajout d'icônes de méthodes de paiement Page de paiement WooCommerce

Vous pouvez utiliser le même code que nous avons partagé ci-dessous pour toutes les icônes de la passerelle de paiement WooCommerce, mais il vous suffit de trouver les icônes spécifiques aux cartes de crédit que vous utilisez pour accepter les paiements dans votre boutique en ligne.

Pour ajouter les icônes personnalisées de passerelle de paiement WooCommerce, nous devons filtrer la fonction woocommerce_gateway_icon , qui est très probablement disponible dans chaque extension de passerelle. Vous devez ajouter le code suivant dans le fichier functions.php :

 // Ajouter des icônes de carte de crédit personnalisées à la page de paiement WooCommerce 

add_filter ('woocommerce_gateway_icon', 'njengah_custom_woocommerce_icons');

function njengah_custom_woocommerce_icons() {

    $icon = '<img src="icons-url" alt="stripe" />' ;

     retourner $icon ;

}

Cependant, vous devez remplacer l'URL de l'image en fonction de l'emplacement de l'image des icônes de paiement sur votre site.

Vous pouvez télécharger les icônes dans le dossier média de WordPress puis remplacer l' icons-url dans le code par le chemin d'image respectif comme indiqué sur l'image ci-dessous :
ajouter des icônes de méthode de paiement woocommerce

Conclusion

Vous pouvez rapidement ajouter les icônes de paiement sur la page de paiement de votre boutique WooCommerce en utilisant le filtre dans l'extrait de code ci-dessus et en téléchargeant l'icône dans votre galerie multimédia. Si vous ne voulez pas jouer avec le code ou si vous êtes un développeur de thème WooCommerce qui souhaite étendre ce filtre et donner aux utilisateurs plus d'options, je vous ai couvert dans mon excellente solution.

J'ai construit le meilleur plugin d'icônes de paiement qui est livré avec une fonction de shortcode et permet aux utilisateurs d'ajouter des icônes sur la page de paiement de la passerelle de paiement, sur le widget de pied de page et partout ailleurs en utilisant un simple shortcode. – Découvrez-le ici . Ce plugin prend en charge l'utilisation de SVG qui est une excellente solution pour personnaliser les icônes de paiement en fonction de votre thème ou de la palette de couleurs de votre site. Avec le plugin WC PayIcons, vous pouvez télécharger l'icône directement depuis la page de la passerelle de paiement respective, comme indiqué ci-dessous :

Comment ajouter une page de paiement d'icônes de paiement WooCommerce personnalisées

Icônes personnalisées de la passerelle de paiement WooCommerce

Ajout d'icônes de méthodes de paiement Page de paiement WooCommerce

Conclusion

Articles similaires