Custom CSS & Javascript: Customizing Checkout
Newsletter Q3 2023
October 27, 2023
Portal Showcase: Part 6
January 16, 2024Check out these checkout modifications!
Customizing your portal checkout pages can help give your customers a personalized experience.
In this article we will show you a few examples of changes you can make to the checkout process. Let's get started!
In this article we will show you a few examples of changes you can make to the checkout process. Let's get started!
Payment Types
A common question our support team gets is how to change the Payment Types on the checkout page. While the Payment methods shown are set on each contact, in some cases a bit of javaScript can be helpful to reduce or remove the option so that it works better for your clients. Let's get into it...
Hide One Payment Type
The two payment types available to contacts are "On Account" and "Credit Card." While you can simply edit the contact's CRM profile to remove one of these options, this doesn't cover all scenarios. For example, sometimes a contact will have access to multiple portals and if on one portal, all contacts should pay by credit card and on the other charge orders to their account, showing the same options on both could be confusing and may cause extra work sorting payments on your end.
To hide the "On Account" payment method on checkout, simply copy and paste the following code into your portal's Custom Javascript box:
$(document).ready(function() {
$('#ddlPaymentMethod option[value="deaa51ed-e249-4ff5-80d9-97941017cbdf"]').hide();
});
To hide the "Credit Card" payment method on checkout, copy and paste the following code into your portal's Custom Javascript box:
$(document).ready(function() {
$('#ddlPaymentMethod option[value="19c3db46-9f35-4e85-a8bf-b6c490c5c2d2"]').hide();
});
Automatically Select a Payment Type
If your contacts on the portal already only have one payment method available on checkout, you can automatically select that option on the checkout page to reduce the amount of clicks they need to make before submitting an order.
To automatically select "On Account", add the following code to your portal's Custom Javascript box:
To automatically select "On Account", add the following code to your portal's Custom Javascript box:
$(document).ready(function() {
$('#ddlPaymentMethod option[value="deaa51ed-e249-4ff5-80d9-97941017cbdf"]').attr("selected", "true");
});
To automatically select "Credit Card", add the following code to your portal's Custom Javascript box:
$(document).ready(function() {
$('#ddlPaymentMethod option[value="19c3db46-9f35-4e85-a8bf-b6c490c5c2d2"]').attr("selected", "true");
$('#ddlPaymentMethod').trigger('onchange');
});
Hide the Payment Type Altogether
If you would like all contacts on the portal to checkout On Account and not see the Payment Type at all, this can be done by automatically selecting the "On Account" option in the code then hiding the Payment Type on checkout.
First, make sure that all contacts with access to the portal have the On Account option enabled for them to checkout with, otherwise they will get a greyed-out submit button when trying to submit the order.
Lastly, add the following code to your portal's Custom Javascript box:
First, make sure that all contacts with access to the portal have the On Account option enabled for them to checkout with, otherwise they will get a greyed-out submit button when trying to submit the order.
Lastly, add the following code to your portal's Custom Javascript box:
$(document).ready(function() {
$('#ddlPaymentMethod option[value="deaa51ed-e249-4ff5-80d9-97941017cbdf"]').attr("selected", "true");
$('#pnlPaymentType').hide();
});
Free Shipping Over $X Amount
Perhaps you would like to offer your users free shipping when they spend over a certain amount. This can also be done with Javascript and is quite easy to implement.
First, create your Free Shipping rate in Settings > Order Options.
Next, visit the checkout page of your portal > select the free shipping rate > right click on it > Inspect ("Inspect Element" in some browsers). Find the option for the free shipping rate and copy its value. Save this value somewhere as we will need it again.
Lastly, copy and paste the following code into the custom Javascript field in your browser. Replace all three instances of paste-value-here with the value you found when inspecting the shipping rate.
$(document).ready(function() {
$('#ddlShippingType option[value="paste-value-here"]').hide();
$('.page-checkout table').each(function() {
var cartTotal = $(this).find(".checkout-order-totals-ordertotal td:last-child").html();
var cartTotalNumber = Number(cartTotal.replace(/[^0-9.-]+/g, ""));
if ((cartTotalNumber) > 200) {
$('#ddlShippingType option[value="paste-value-here"]').show();
$('#ddlShippingType option[value="paste-value-here"]').attr("selected", "true");
}
});
});
All done! Now when you navigate to the checkout page with a cart total over $200 the free shipping rate will show and it will also be auto-selected.
The minimum amount for the rate ($200 in this case) can be changed to any amount by changing "200" to your new amount in line 6 of the code.
The minimum amount for the rate ($200 in this case) can be changed to any amount by changing "200" to your new amount in line 6 of the code.
If you have any ideas for portal customizations you'd like to see us tackle or need help implementing any of this code, email our support team at support@docketmanager.ca
