Comment masquer paypal sur le checkout de shopify ?

Nous allons masquer l’image paypal du checkout qui peut faire penser au client que seul ce moyen de paiement est disponible

Beaucoup de personnes souhaitent masquer cet élément car ils ont remarqué que leur taux de conversion est meilleur sans. C’est pour cette raison que j’ai fais ce tuto 😉

Je vais vous proposer 2 façons de faire, en Javascript et en Css.

2 solutions pour masquer paypal s’offrent à vous !

Version Javascript

Code à copier/coller dans Préférences – zone google analytics – la zone de script.

ATTENTION: Depuis le 1er février 2019 shopify n’autorise plus la prise en compte des scripts rajoutés dans cette partie.
Il faut donc les contacter et leur demander de réactiver la zone google analytics car vous en avez besoin pour intégrer le code snapchat par exemple 😉

Il semblerait que depuis fin 2019 il n’est plus possible d’utiliser ce tutoriel, du moins les versions Javascript. Vous pouvez tester mais je ne vous promets rien 😉

if(typeof Checkout === "object"){ 
if(typeof Checkout.$ === "function"){ 
Checkout.$(".alt-payment-list").remove(); 
Checkout.$(".dynamic-checkout").remove();
} 
if(typeof Checkout.$ === "function"){ Checkout.$(".alternative-payment-separator").remove(); 
} 
}
document.getElementsByClassName("alt-payment-list__item alt-payment-list__item--paypal")[0].style.display = "none";
document.getElementsByClassName("alternative-payment-separator")[0].style.display = "none";
document.getElementsByClassName("dynamic-checkout")[0].style.display = "none";

Si jamais vous avez un visuel différent, une zone express paypal checkout alors supprimez les codes ci-dessous et testez celui la !

setTimeout(function(){ 
document.getElementsByClassName("dynamic-checkout")[0].style.display = "none";
document.getElementsByClassName("dynamic-checkout__title")[0].style.display = "none";
document.getElementsByClassName("dynamic-checkout__content")[0].style.display = "none";
}, 10);

Version CSS

Il existe une autre solution qui peut fonctionner selon le thème que vous avez

Trouvez dans assets votre timber.scss.liquid ou theme.scss.liquid ou style.scss.liquid ou autre… et collez ce bout de code à la fin du fichier:

.additional-checkout-button, .additional-checkout-buttons { display:none !important; }

Si avec tout cela vous ne parvenez pas à masquer le paypal au niveau du checkout, il faudra demander à shopify directement.

Bon tutos à tous 🙂

Merci de me laisser une petite note 😉
[Note moyenne de: 4.9 sur 7 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 61 commentaires

  1. bernard

    14 Jan 2018 Répondre

    Salut, et merci j’ai déjà suivi ton astuce pour retirer le bouton paypal ;

  2. Charles

    20 Jan 2018 Répondre

    J’avais pas remarqué que ça pouvait induire en erreur, possible d’avoir le code pour enlever le logo apple pay aussi ? Bien que je ne suis pas sûr que celui-ci gène vraiment

    1. dgeo22

      20 Jan 2018 Répondre

      Merci pour le commentaire, l’affichage du Apple pay dépend de votre thème, c’est lui qui défini les icônes à afficher ca se passe en général dans le footer.liquid

      1. fabrice guénal

        23 Mai 2018 Répondre

        Bonjour,
        Y a t’il un endroit précis dans la case « script » pour coller le code, par exemple au début ou a la fin ou cela n’a aucune importance ?
        Merci d’avance..

        1. Dgeo Dev

          24 Mai 2018 Répondre

          Bonsoir, peu importe le tout est de respecter la syntaxe

  3. sken

    20 Jan 2018 Répondre

    j’ai trouvé une solution :

    /*
    JS INECTION CODE
    REMOVE PAYPAL (AND ALL ALT PAYMENT METHOD BUTTONS) FROM CHECKOUT
    */
    if(typeof Checkout === ‘object’){
    if(typeof Checkout.$ === ‘function’){
    Checkout.$(‘.alt-payment-list’).remove();
    }
    }

  4. SAÏD

    24 Jan 2018 Répondre

    Salut Geoffrey dit moi le code c’est bien dans « Additional Google Analytics Javascript » qu’il faut le coller?

    1. dgeo22

      25 Jan 2018 Répondre

      Salut, oui c’est bien cela

      1. Said

        29 Jan 2018 Répondre

        Merci pour ta réponse

  5. patrick

    25 Jan 2018 Répondre

    comment on fait pour retirer un code qu on a mis dans la fenetre google analitycs

    1. dgeo22

      25 Jan 2018 Répondre

      Salut, on retourne à l’emplacement et on repère les lignes ajoutées pour ensuite les supprimer. Vous ne supprimerez pas le google analytics car il est mémorisé et pas réellemnt dans ce champs 😉

  6. patrick

    5 Fév 2018 Répondre

    j ai un problème sur téléphone seulement : sur la page check out quand on choisi le paiement paypal et qu’on valide en cliquant sur le bouton « acheter » rien ne se passe, le lien est mort, ça ne dirige pas vers paypal. Vous connaissez ce problème ? Un peu gênant du coup je perds des clients

    1. anthony

      13 Fév 2019 Répondre

      salut ta resolu ton prob car moi c’est pareil le lien est mort ?

  7. coffin

    20 Fév 2018 Répondre

    Salut !
    Code très utile encore une fois..
    Néanmoins dés que le client rajoute son code promo et qu’il l’actualise le bouton paypal revient..
    Test effectué avec les deux codes docteur 😉
    Une idée ?

  8. Jo

    3 Mar 2018 Répondre

    salut à tous, le code ne fonctionne plus :(, il y a t il une autre solution ? Pour info je suis sur le thème Venture merci à vous

    1. Jo

      3 Mar 2018 Répondre

      c’est bon, ca fonctionnait pas car j ai fait un doublon avec le premier code

  9. Sacha

    7 Mar 2018 Répondre

    Bonjour Geoffrey,
    Je viens de mettre le code à l’endroit que tu as indiqué et je crois que ça marche !…
    Je me demandais si c’est au même endroit qu’il faudrait mettre du code, et quel code, pour faire en sorte que sur la page de collecte des renseignements avant paiement, on ne pourrait pas faire apparaitre le prénom et le nom des personnes en plus de leur mail, qui est le seul élément qui les identifie (avec leur adresse). Je ne trouve pas cela très respectueux, au moment où les personnes vont sortir leur carte bleu, qu’on ne semble s’adresser à leur mail, et pas à leur nom !
    J’utilise le thème gratuit Supply, mais je crois que ce problème est récurrent, même dans des thèmes payants.
    J’ai joint Shopify sur cette question, et leur seule réponse a été de dire qu’il faudrait que je prenne un plan pro, pour avoir accès au checkout.liquid, et de modifier le code (qu’ils ne peuvent pas me donner…). Tout ça pour ça !
    Merci pour ta réponse.

    1. Dgeo GD

      19 Mar 2018 Répondre

      Hello et merci pour le com
      Effectivement seul l’abonnement pro permet d’accéder à cette partie

  10. JLOST

    8 Mar 2018 Répondre

    Bonjour,
    nous avons déjà du code dans la zone « script » de la partie Google Analytics.
    Y’a t-il un moyen d’ajouter le vôtre en plus ?
    Merci pour tous tes précieux tutos, ils nous servent bien 😉

    1. Dgeo GD

      16 Mar 2018 Répondre

      Bonjour,

      Oui si vous le collez correctement et que ceux ci ne rentrent pas en conflit

      Bonne soirée

  11. Ernesto

    17 Mar 2018 Répondre

    Bonjour et merci pour ces astuces très pratiques.
    J’ai bien appliqué celle-ci et elle fonctionne correctement seulement il reste le mot OU en plein milieu du formulaire. Serais-tu comment le masquer lui aussi ?

    Merci d’avance.

    1. Jean-Paul ADOLLE

      19 Mar 2018 Répondre

      Salut,
      Même problème, j’appuie la question d’Ernesto. C’est un peu étrange qu’ il y ait un OU sorti de nulle-part. En attendant, je pense qu’il est mieux de garder le logo Paypal plutôt que d’inquiéter les clients avec cette bizarrerie.
      Bise

      1. Dgeo GD

        19 Mar 2018 Répondre

        Hello, code mis à jour vous pouvez tester celui la pour enlever le OU

        1. Jean-Paul ADOLLE

          1 Avr 2018 Répondre

          Merci, super !

    2. Dgeo GD

      19 Mar 2018 Répondre

      Hello, code mis à jour vous pouvez tester celui la pour enlever le OU

  12. Donia

    18 Mar 2018 Répondre

    Bonjour, merci pour ce partage ça a bien fonctionné !
    Je souhaitais également supprimer le bouton paypal du cart, car celui-ci ne le supprime que du checkout.

    Auriez-vous un autre code pour le cart également ?

    Merci d’avance

    1. Dgeo GD

      18 Mar 2018 Répondre

      Bonjour, oui regardez dans la liste des tutos y en a un 😉

  13. Valentin

    18 Mar 2018 Répondre

    Bonjour,
    Je suis sur le thème VENTURE, et le code ne fonctionne pas.
    Voici se qu’il met écris :
    There is 1 error:
    Analytics snippet does not look valid (UA-xxxx-x)

    1. Dgeo GD

      18 Mar 2018 Répondre

      Bonjour, c’est normal il faut mettre votre google google analytics avant

  14. Eliott

    30 Mar 2018 Répondre

    Salut et merci pour ce code qui me retire une épine du pied !

    Simple petite question : à chaque fois que je refresh la page, le logo Paypal met 1 seconde à s’enlever, est-ce normal ou existe-il un moyen de fixer ça ?

    Merci d’avance, Eliott 🙂

    1. Dgeo GD

      31 Mar 2018 Répondre

      Bonjour et merci pour le message

      Malheureusement non car c’est un hack JS il attend que la page se charge pour agir d’ou ce petit décalage… étant donné que shopify ne laisse pas la main sur cette page au niveau d’un thème on ne peut faire mieux à moins de prendre la abonnement pro et payer un développeur pour coder une page checkout personnalisée

  15. fabrice

    5 Avr 2018 Répondre

    Bonjour Geoffrey,

    J’aimerai savoir à propos du code .
    Je vais dans google Analytics et je colle le code où ? juste au début ou à un endroit précis ?

    Merci, je sais je suis nul….

    1. Dgeo GD

      5 Avr 2018 Répondre

      Bonjour, il faut d’abord mettre le google analytics et ensuite vous aurez une zone vierge, si elle ne l’est pas alors mettez le code en dessous

  16. Devilder Gersende

    4 Juin 2018 Répondre

    Bonjour,
    quand je colle le code dans la zone google analytics , ce message apparait:
    Analytics snippet does not look valid (UA-xxxx-x).
    Que faut il faire? Merci

  17. Stevy

    27 Juil 2018 Répondre

    Bonjour ,
    Pouvez- vous m’aider? Je colle le code dans la zone google analytique mais ça enlève pas paypal.
    Que puis-je faire ? Merci à l’ avance

    1. Dgeo Dev

      11 Août 2018 Répondre

      Bonsoir, essayez de mettre le code ci-dessous dans votre fichier .css ou .scss : .additional-checkout-button { display:none !important; }

  18. Morgan

    8 Sep 2018 Répondre

    Bonjour,
    Merci beaucoup pour cette astuce qui est importante à réaliser sur son site ! Je ne trouvais rien pour enlever ce bouton puisque j’ai le thème Speedfly mais la deuxième astuce à que tu a partagé à très bien fonctionné donc pour ceux que sa intéresse :
    –>Assets–>theme.scss.liquid et coller le bout de code tout en bas !
    Merci.

    1. Dgeo Dev

      18 Sep 2018 Répondre

      Merci pour ce message, oui tu as le code dans l’application Speedfly au besoin 😉

  19. antoine

    11 Oct 2018 Répondre

    Hello super tes tutos, j’ai gagné pas mal de temps grace à eux

    je me pose tellement de question , comment je peux faire pour enlever le boutton  » acheter avec paypal »
    sur mes fiches produits.
    j’ai fouillé dans le code avec des elements de rechrche je n’y parviens pas

    En esperant avoir une réponse de ta part merci

    1. Dgeo Dev

      18 Oct 2018 Répondre

      Hello, merci pour le message 😉 Alors malheureusement c’est un bouton mis d’office par paypal donc pas la main la dessus.

        1. Dgeo Dev

          30 Sep 2019 Répondre

          Hello, cool merci bcp 🙂 Bonne journée

  20. dorothée

    12 Nov 2018 Répondre

    Bonjour,

    le code enlève la ligne avec « or » mais pas le cadre EXpress checkout avec le bouton Paypal… sûrement après la mise à jour du code… Peut-on avoir le code entier svp? merci beaucoup

    1. Dgeo Dev

      24 Nov 2018 Répondre

      Bonsoir, oui shopify a fait une récente mise à jour et ne permet plus de supprimer cette partie. Je vais voir pour mettre le tuto à jour mais pour le moment rien ne fonctionne…

  21. ingrid lebihan

    16 Jan 2019 Répondre

    Je tiens à te remercier car j’ai galèrer à trouver un code pour que sa marche. Je l’ai partagé du coup. Merci bien.

    1. Dgeo Dev

      29 Jan 2019 Répondre

      Bonsoir, super merci 😉

  22. alex

    8 Fév 2019 Répondre

    Salut,

    J’ai une zone express paypal comme ceci : https://ibb.co/bQm0x63 et je n’arrive pas à l’enlever..

    Ton dernier code qui parle de ce soucis, il faut le mettre oû ? Dans l’assets timber.scss.liquid ou theme.scss.liquid ou style.scss.liquid ou autre… ?

    Il faut mettre le bout de code avant la derniére acolade ?

    Merci,

    1. Dgeo Dev

      20 Fév 2019 Répondre

      Hello, il faut mettre le dernier code et dans google analytics script.

  23. Lelouch

    25 Fév 2019 Répondre

    Hello, apres avoir modifier le theme.scss.liquid mon site est passé en full html et est devenu archi moche
    j’ai utilisé la 2nd methode sur le theme speedfly.
    quand j’entre dans le theme ce msg apparait https://i.imgur.com/fv0qx9C.png

    Quelqu’un peut m’aider ?

  24. rene

    20 Avr 2019 Répondre

    Bonjour
    cela fonctionne mais j ai toujours le OU !

    pouvez-vous m’aider ?

  25. KeyserBruh

    19 Mai 2019 Répondre

    Bonjour et merci pour l’astuce que vous proposez !

    J’ai implémenté les 3 codes aux endroits indiqués, mais rien y fait, le logo paypal est toujours présent, sur ma page d’accueil mais également dans mon checkout… Auriez vous des suggestions ?

    1. Dgeo Dev

      25 Mai 2019 Répondre

      Bonjour, merci d’avoir posté ce message 🙂
      Depuis le 1er février 2019 shopify n’autorise plus la prise en compte des scripts rajoutés dans cette partie.
      Il faut donc les contacter et leur demander de réactiver la zone google analytics car vous en avez besoin.
      Bon WE

  26. Sarah

    11 Oct 2019 Répondre

    Hello ! Merci pour ce tuto genial ! Ca a fontionné sur mon site version ordinateur, or, version mobile le bouton paypal est toujours présent dans le checkout … est-ce normal ?
    Merci de ta réponse

    1. Dgeo Dev

      14 Oct 2019 Répondre

      Hello, surement un temps de propagation ou cache du navigateur (essayez de les vider). Bonne journée.

  27. Aurore

    29 Mar 2020 Répondre

    Bonjour,

    Pour masquer le bouton Paypal sur la fiche produit, trouvez:
    « Section », puis « product-template.liquid », et repérez le code suivant :

    {% if additional_checkout_buttons %}
    {{ content_for_additional_checkout_buttons }}
    {% endif %}

    Collez à la place:

    {% comment %} {% if additional_checkout_buttons %}
    {{ content_for_additional_checkout_buttons }}
    {% endif %} {% endcomment %}

    {% comment %} en début et {% endcomment %} à la fin permettent de masquer le bouton sans supprimer la ligne.

    Vous pouvez aussi supprimer le bouton Paypal qui est visible quand on regarde le contenu du panier.
    Pour cela trouvez: « templates », puis « cart.liquid » et répétez l’opération ci-dessus.

    1. Dgeo Dev

      29 Mar 2020 Répondre

      Hello, oui merci c’est effectivement une bonne pratique 🙂

  28. nora

    21 Oct 2020 Répondre

    Bonjour merci pour tout votre travail , je suis à la lettre votre technique mais à 2 reprises le logo finit par RRevenir ! incroyable , je recommence parfois ca marche parfois ca ne marche pas , une idée? mercii

    1. Dgeo Dev

      23 Oct 2020 Répondre

      Hello, ca dépend de pas mal de facteur. Pour qu’il soit masqué au checkout il doit être visible sur le panier et si le client ne passe pas par le panier alors le paypal s’affichera pareil si vous avez du direct checkout

  29. Johan

    18 Nov 2020 Répondre

    Bonjour,
    J’ai réussi à enlever un des boutons paypal mais sur la version mobile de mon site, sur la page produit, au lieu du bouton « acheter maintenant » (version pc et autre), il affiche un bouton jaune « acheter avec paypal » que je n’arrive pas à enlever
    Pourriez vous m’aider svpp ?
    Merci d’avance

    1. Dgeo Dev

      19 Nov 2020 Répondre

      Bonjour, c’est normal c’est le bouton dynamique de shopify qui transforme le bouton selon les moyens de paiement que le client a de connecté sur ton navigateur.

Laisser un commentaire

Fermer le menu
×
×

Panier