Ajouter les icones de carte bancaire à Stripe sur WooCommerce

Woocommerce, c’est le plugin n°1 sur WordPress pour transformer son site en e-commerce.

Et Stripe, c’est la principale solution liée à Woocommerce pour accepter les paiements.

Stripe s’intègre tout seul à votre site internet, et son style est généralement directement géré par le thème que vous utilisez.

Cela dit, je me suis retrouvé dans une situation où j’aurais aimé ajouter des icones de carte bancaire à mon encadré de paiement stripe.

Voici la mise en page avant l’ajout d’icones :

Un peu brut à mon goût…

Les icones, c’est une forme de réassurance pour les clients.

Voici la mise en page après l’ajout d’icones :

Beaucoup mieux non ? 😁

J’ai trouvé un bout de code sur un site américain qui m’a permis de réaliser ce changement.

Voici l’adresse de l’article qui m’a débloqué : https://laurena.blog/woocommerce-stripe-4-0-icons/

Et voici le code que j’ai utilisé pour afficher les icones des cartes bancaires sur le site internet :

/*Ajout icones stripe*/
add_filter( 'woocommerce_gateway_icon', 'gt_change_my_icons', 10, 2);

function gt_change_my_icons( $icon_string, $id ) {
    
    if($id=="stripe"){
        $methods = array(
                'visa'              => '<img src="' . plugins_url()                 . '/woocommerce-gateway-stripe/assets/images/visa.svg" class="stripe-visa-icon stripe-icon" alt="Visa" />',
                'mastercard'        => '<img src="' . plugins_url()                 . '/woocommerce-gateway-stripe/assets/images/mastercard.svg" class="stripe-mastercard-icon stripe-icon" alt="Mastercard" />',
			                'amex'        => '<img src="' . plugins_url()                 . '/woocommerce-gateway-stripe/assets/images/amex.svg" class="stripe-amex-icon stripe-icon" alt="amex" />',

                'discover'          => '<img src="' . plugins_url()                 . '/woocommerce-gateway-stripe/assets/images/discover.svg" class="stripe-discover-icon stripe-icon" alt="Discover" />',
                'diners'            => '<img src="' . plugins_url()                 . '/woocommerce-gateway-stripe/assets/images/diners.svg" class="stripe-diners-icon stripe-icon" alt="Diners" />',
        );

        $icon_string =  implode("", $methods);
    }


    return $icon_string;
    
}

Boucle de code qu’on peut ajouter dans le fichier « functions.php » de wordpress, idéalement sur un thème enfant.

En plus, les icones sont déjà présents dans votre répertoire, donc pas la peine de les télécharger !

Une question ? N’hésitez pas à commenter.

Besoin d’aide pour la création de votre site internet sur Hossegor ? Contactez-moi !

Antoine Broin
Antoine Broin
antoinebroin.fr

De passion en passion, je suis passé de WordPress au SEO pour faire de ce combo mon quotidien. Quand je ne suis pas sur mon ordinateur, vous me trouverez surement en train de surfer 🏄‍♂️ ou en train de faire tourner mes business locaux #localseo.

Related Posts
4 Comments
Adam

Sur quel fichier as-tu ajouter le code ci-dessus ?

Bonjour Adam, dans le fichier « functions.php » de ton thème. Idéalement dans le thème enfant si tu en as un.

charles

Super, merci pour ce code Antoine! juste ce qu’il me fallait

Merci pour votre commentaire !

Leave a Reply

Your email address will not be published.Required fields are marked *