Have you ever wondered how could you change the order of payment options on the checkout page ? Well, guess what, it's possible, and it is not too hard!
I added three payment gateways, Bank Deposit, Cash on Delivery and Check. You can use your payment gateways, and as many as needed. After adding them, I checked the store using Inspect Element in Google Chrome, and found how the system is separating them. It is using >br< to separate the payment methods.
You will need a script in order to change the order of the payment methods.
The code below reverses the order making the last payment option show first :
<script type="text/javascript">
$(document).ready(function() {
var mcprovlist = $("#provider_list").html();
mcprovlist = mcprovlist.split("<br>");
$("#provider_list").replaceWith(mcprovlist[2] + "<br>" + mcprovlist[0] + "<br>" + mcprovlist[1]);
$("label").css('display','inline-block');
});
</script>
Now let's understand what that code is actually doing.
As far as I checked, no matter the template used, the payment gateways will appear inside a div with ID #provider_list , and each payment method ends using <br> like over here:
The code above separates the payment methods using the <br> element, and then, it replaces the default 0, 1, 2 order with 2, 0, 1 in this example. You can change the numbers there to any other order according to your needs.
The style added there was required, because this replace, adds a display:block; to the labels which will appear really bad on the store. So changing them to a display:inline-block; will solve that issue.
In order to apply the code, here is what you should do.
Go under Design->Edit HTML/CSS and open the following snippet: ExpressCheckoutConfirmation.html . Go to the bottom of that snippet, and after the existing script will end, add the code provided above. Save your changes, and check your store front !
Here is an example on how to add the code:
While on store front, the change appears like this:
Try it on your store and see how that will go !
In case you have a customized store, and you have no <br> element separating the payment methods then there is a solution for you as well. It is actually an easier solution, which only needs CSS. This time, I changed the numbers 0, 1, 2 with 1, 2, 0, using CSS, by adding a margin-top to each child div under the ID #provider_list.
The code looks like this:
#provider_list div:nth-child(1){margin-top:100px;}
#provider_list div:nth-child(2){margin-top:-100px;}
#provider_list div:nth-child(3){margin-top:-60px;}
It can be added under Design->Edit HTML/CSS->styles.css at the bottom of the file. Save it, and check the store, and you should see the payment methods in reverse order.
You can use other margin values if you would like them arranged differently. Just play around with the values until you get the desired placement.
Thank you for taking time to read this article, and I really hope this will help you arrange your payment methods as required.