Nothing turns me off of buying something online more than the store forcing me to register for an account before I can complete the purchase. Usually, I’m so disgusted when I see this that I just go look for that item somewhere else right away.
When people come to your store, you want to make sure that doesn’t happen!
When I was using BigCommerce for my store, I came up with a neat hack to transform the checkout page. Bigcommerce has a pretty neat feature where guest checkouts get accounts created for them by default, and the customers are mailed a password as soon as they complete the order.
So this is what a regular single page checkout on BigCommerce looks like:
By default, the Register An Account radio button is selected. To change this, head over to the template editor(see the start of this tutorial if you don’t know how) and find the file called “checkout_express.html”.
The code we are looking for is quite far down, so hit Control-F – or Command-F if you use a Mac – and search for this bit of code:
In the same line as that text, or just below it, there should be a piece of code that says:
Highlight that bit, cut it, and paste it before the closing > bracket of the code snippet that starts as: <input name=”checkout_type” id=”checkout_type_guest” …
Your whole line should look something like this once you have pasted it – don’t worry if it takes up more than one line:
<input name=”checkout_type” id=”checkout_type_guest” value=”guest” type=”radio” onclick=”$(‘#BillingDetailsLabel’).html(‘%%LNG_ExpressCheckoutStepBillingAddress%%’);” checked=”checked”/>
That should do it – now, the radio button that says “Checkout As A Guest” should be selected by default.
With my store, I took it a step further and eliminated the whole process of reading and processing that bunch of text. This is what my checkout looked like:
To get something like this, we will be modifying the same snippet of code. You will need to follow the instructions for method 1 first, otherwise it won’t work.
Once you’ve done the method 1 mods, immediately before the code that says:
<input name=”checkout_type” id=”checkout_type_guest” …
There are two HTML elements: <dd><label>
Just before the <dd>, but between the </dl> above it, add this line of code:
<div style =”display:none;”>
Now scroll down a few lines, and just after this code:
Add this snippet:
Done? What we are doing here is setting the “Checkout as a guest” radio button to be selected by default(method 1), then hiding the intro text and both radio buttons altogether using CSS(method 2). All that’s left is a headline saying “New Customer?” and a button below it that says “Continue”.
Let me know if you have any questions in the comments, and please remember to share this post if you found it useful!
PS – If you aren’t comfortable with HTML, MAKE A BACKUP of the files before you modify them!