Completely stopping Express Checkout buttons from showing (Cart/Checkout)

Highlighted
Excursionist
14 3 11

Hey All!

 

I've been having an issue that the Shopify Support Team couldn't help me with so I figured I'd post it here with my solution for anyone else having this problem.

 

So I was trying to remove the Express Checkout Buttons from the Checkout process but keep the option to pay with Paypal (The Express Checkout Flow was applying the delivery charge after the user had been through the Paypal portal which was a weird flow). I looked at the docs and emailed Shopify Support to confirm my findings (I have a big client so I wanted to be sure this would be our solution). They told me exactly what I had found in the docs which was to add:

{% if additional_checkout_buttons %}
  <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}

 

to the cart.liquid file and hide it with CSS:

.additional_checkout_buttons{display:none}

and, as if by magic, it will never appear on the Checkout process again because it can only appear on one at a time.

 

THIS IS ONLY PARTLY CORRECT!

 

I'm not sure how the Checkout process checks to see if the additional checkout buttons are being shown on the cart page but it seems like it checks the page you were on before you navigated to the checkout page. What this means is that if you were on /cart and then went to /checkout you would not see the Express Checkout buttons because they were on the cart page. BUT if you were on a collection page and by using a cart sidebar (like the Prestige Theme has) clicked on a button that takes you to the Checkout page then the Express Checkout Buttons will appear!

 

This was something I tinkered around with to find out. I was not told this by any of the Shopify Staff so I might be wrong. Another reason of posting here was to find out more.

 

So a solution I found was to put the above "additional_checkout_buttons" code into a place that appears on every page. I chose to do it on the Cart Drawer because I had already put it on the cart.liquid file which doesn't render the cart drawer (but this might not be on every theme so putting it in your theme.liquid file might be the most universal solution).

 

Let me know if you've had to do this too or if there's a better solution!

0 Likes
Highlighted
New Member
1 0 1

Wow thank you very much. You helped me a lot!

 

Greetings from Germany

Highlighted
Tourist
7 0 2

I put this in the theme.liquid file and it didn't fix it. 

 

Is there anywhere else I could potentially place the code that would remove all instances of the express checkout buttons? 

0 Likes
Highlighted
Excursionist
14 3 11

Mmmm, try putting this in your theme.liquid file or any other section that appears on every page (ie: The Header)

{% if additional_checkout_buttons %}
  <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
<style>
.additional_checkout_buttons{display:none}
</style>

 

Highlighted
Tourist
7 0 5

Thanks SO much for this!  I just implemented this in our store (using Canopy theme) - within the Header section of the theme.liquid and it removed the Express Checkout buttons (both PayPal & Apple Pay) from our Checkout page!

 

Oddly enough, now the option for Apple Pay has also disappeared from the Payment page.  I'll need to dig further into that - make sure I can add it back in for anyone using Apple's browser.

0 Likes
Highlighted
Tourist
7 0 5

We decided it was cleaner flow for the user experience to leave the Express Checkout buttons out entirely - but if needing Apple Pay or Google Pay is needed in the future, we'll need to take the code back out again.

 

The real problem is that OR after the buttons - it's not really clear that customers can choose other payment methods if they don't want to use the Express Checkout buttons.  (and this causes abandoned carts at this stage for those who don't).

 

In Shopify, go to Online Store, then under Actions, select Edit Languages, then Checkout & system.  Do a search for Express Checkout - you'll see the Or dialog underneath.  Unfortunately, it gets capitalized on implementation, but at least you can make it more meaningful.  Put in something like "Or You Can Enter Your Credit or Debit Card Information Shortly" and save it.  This should minimize your abandoned carts at this stage.

0 Likes