Amazon Pay is huge. It’s one of the best ways to get customers to pay on your WooCommerce site. However, for some retailers it can also be a double edge sword. Amazon gets a cut of the money and when it sits at the very top of the checkout page it’s pretty much going to be the one and only way people pay.
Well, I’ll show you how to move it using a little jQuery “insertBefore” move. You can learn more about this node and others like it on MDN Web Docs. First things first. Let’s head on over to WooCommerce if you don’t already have the plugin. Don’t worry, it’s free. You can download it here.
Depending on your theme you may have to change the class selector to whatever yours is. Mine’s called “wc-amazon-checkout-message” and I noticed that inside the TwentyNineteen theme it was also perfect for this demonstration.
<script type="text/javascript">jQuery(".wc-amazon-checkout-message").insertBefore(".woocommerce-checkout-payment");</script>
As you can see in the screenshots below. We’ve taken the button and now moved it down by the other payment methods. Giving our customers a better options to choose.
Amazon Pay Button Top Of Checkout Page
Pay Button Moved Near Other Payment Methods
I hope this helps you move the Amazon Pay payment button where you want. Any questions comment below. I’d be more than happy to answer any questions.
