Change BigCommerce’s Default Checkout Method

April 14, 2014
by Max

So I recently was working on a client’s BigCommerce project and one of the modifications he requested was to make the checkout method default from Create An Account to Guest checkout. In most instances, store owners would prefer a customer to create an account to take advantage of useful customer data such as email subscriptions or order information.

I figured this change would be an easy switch on the backend but alas, it was not a provided feature. I then hit Google to see if anyone else had a solution, but no cigar there either. Seeing that BigCommerce is nice enough to let us change any HTML manually via WebDav, I decided to take a look there and really, it’s a quite simple and easy change to make. Even if you’re not too comfortable with code – I’ll try to make this easy for those folks.

1.) The first step is to determine wether you’re using express checkout or not. It defaults as the express one page checkout, and I highly recommend keeping it that way. To find out how your checkout is configured, log into BigCommerce, go to Setup & Tools and click Checkout. Here, you can see the checkout type. Make a note of which one your using.

2.) Go to  Setup & Tools and click Design. Next, click Edit HTML/CSS. Be aware that by making changes to theme files means updating in the future will likely over write any changes you make.

3.) Under Other Template Files on the left, click on either Checkout.html or Checkout_Express.html depending on the checkout type you were using in step 1. My example uses Checkout_Express.html.

4.) In the express checkout file, A little less than half way down find code similar to this (May vary depending on the theme). If you’re using the regular multi page checkout, the code will still look somewhat similar. It’s pretty straightforward looking:


<dl class="mbm">
<dd><label><input id="checkout_type_guest" onclick="$&;('#BillingDetailsLabel').html('%%LNG_ExpressCheckoutStepBillingAddress%%');" type="radio" name="checkout_type" value="guest" /> %%LNG_CheckoutAsAGuest%%</label></dd>
<dd><label><input id="checkout_type_register" onclick="$&;('#BillingDetailsLabel').html('%%LNG_ExpressCheckoutStepBillingAccountDetails%%');" type="radio" checked="checked" name="checkout_type" value="register" /> %%LNG_RegisterAnAccount%%</label></dd>
</dl>

6.) These are the 2 checkout methods that BigCommerce provides – Guest and Register an Account. All we need to do is specify which one is default by moving the checked=”checked” part of the 2nd radio button to the 1st radio button. Post surgery, your code should now look like this:


<dl class="mbm">
<dd><label><input id="checkout_type_guest" onclick="$&;('#BillingDetailsLabel').html('%%LNG_ExpressCheckoutStepBillingAddress%%');" type="radio" checked="checked" name="checkout_type" value="guest" /> %%LNG_CheckoutAsAGuest%%</label></dd>
<dd><label><input id="checkout_type_register" onclick="$&;('#BillingDetailsLabel').html('%%LNG_ExpressCheckoutStepBillingAccountDetails%%');" type="radio" name="checkout_type" value="register" /> %%LNG_RegisterAnAccount%%</label></dd>
</dl>
7.) At the top left of the window, find the 'Save' button, click it, and test out your store. Add something to your cart, click checkout, and see what the default method is. If it doesn't seem to be changing, make sure you edited the right file, that your page is properly refreshing, and that you correctly edited the file. You can view the source of the page to see what's actually rendering.

Hope this helps, leave a comment if you get stuck, need help or have any comments.

About

Max Avedisian has had the pleasure of working with a extremely broad range of clients in order to bring the best in technology and digital production today. From traveling the world as a production and band assistant, to cutting-edge video production, to next-level graphic and web design, Max Avedisian has serviced a wide range of needs and has met the challenges of many businesses small and large. Max has been professionally pursuing his passions in Digital Design since his graduation from Full Sail University in 2010.

2 comments

  1. |

    great solution! This is the correct fix.
    Saw a different method elsewhere that inserted an entire script into the template page – not elegant.

  2. |

    Hi!
    Can you know who i can change the standard check out method for a one check out page?? if you know, would you like to help me?? PLease!!

    Best regards!!

Leave a Comment