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 !