How to go from billing directly to shipping adress by default

There is a checkbox “use_different_shipping_address” which when checked does exactly what i want to accomplish by default. My objective was to then go to the billing template select the checkbox internally and hide it from the UI but i had no success.

In version 1.x it seemed to be possible “Use this setting if you want the checkbox to be selected by default” how do i accomplish this in V3.

This was my attempts at the billing template which visually worked but internally it did not.

<fieldset class="snipcart-form__set">
    <div class="snipcart-form__field">
        <div class="snipcart-form__field-checkbox">
            <input type="checkbox" name="useDifferentShippingAddress" class="snipcart-checkbox" checked />
            <snipcart-label class="snipcart__font--tiny snipcart-form__label--checkbox" for="useDifferentShippingAddress">
                {{ $localize('billing.use_different_shipping_address') }}
            </snipcart-label>
        </div>
    </div>
</fieldset>

I found the answer to my own question. Here is my solution:

  • Place the following script at the end of your code, .i.e., in your footer
<script>
  document.addEventListener('snipcart.ready', function() {
    Snipcart.api.cart.update({
        shipToBillingAddress: false,
    }); 
  });
</script>
  • If you want to hide the checkbox from the UI then simply override your CSS file with
//hide all checkboxes from billing
.snipcart-form__field-checkbox{
  display: none;
}