How can I change to default behavior of the “My billing address is the same as shipping” check box to off?

I’ve been using Ecwid as a my shopping cart for several websites and clients. It’s such a great shipping cart that’s fully integrated with basically the whole internet. I love the flexibility of it. There are a few issues that I’ve had a problem with, however. They haven’t been major problems, but annoying just the same. One of those problems has been that the billing box is checked automatically by default.

For people who might want to sell gift items for delivery, it is important to accurately collect both the shipping and billing information. The problem is that the “My billing address is the same as shipping” checkbox is checked automatically and the vast majority of people checking out, for whatever reason, do not uncheck the box to allow for a different billing address. Perhaps they’re just not seeing it, or perhaps it’s just a bad design/workflow. Needless to say, when a user fails to uncheck this box, it can cause extra time confirming with the buyer the correct information rather than just fulfilling the order. So, what I needed to do was make it so that the shipping information was not automatically passed through to the billing address unless the user checked the box. I needed the billing information to be blank, as illustrated below.

Ecwid Billing Button Default Off

Checking the box will auto fill the content from the shipping address.

So, here’s the raw code for how to turn this button off by default. You’re going to want to put this code just after the Ecwid implementation code on your site. (If you have jQuery already enqueued on your site, you won’t need the 1st line.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script>if (typeof(Ecwid) == 'object') {
  Ecwid.OnPageLoaded.add(function(page) {
    if ('CHECKOUT_PAYMENT_DETAILS' == page.type) {
$('input[type=checkbox]').prop('checked', false);
$("input[type=text]").prop('disabled', false);
$("input[type=tel]").prop('disabled', false);
$("select[name='country-list']").prop("disabled", false);
$("select[name='state-list']").prop("disabled", false);
$("select[name='state-suggest']").prop("disabled", false);
$('input[type=text]').val('');
$('input[type=tel]').val('');
$("select[name='country-list']").val('');
$("select[name='state-list']").val('');
$("select[name='state-suggest']").val('');
        }
  });
}
</script>

Unfortunately, this code will not work for you if you’re using WordPress. So I’ve packed up a file with a full explanation of how to implement this code on your WordPress site. Just click the “Download the Code!” button and you’ll receive an instant download. Please consider paying for the product if you think it will help your store. Many thanks and much appreciated!

Included in this file:

• WordPress friendly code
• Full explanation of where to implement this code
• Screenshots of the code implementation
• *Bonus: My explanation on how to clean up Ecwid code impentations

Download the Code!