Force Customers to Enter Billing Address

Solved
Excursionist
29 1 8

Is there a way to completely remove the option for billing address to be the same as the shipping address and have customers always enter their billing address? 

Billing address.jpg

The reason I ask is that we have the option for store pick up in our store. So, if the customer selects store pickup, the shipping address will show the store address. If they select that the billing address is the same as the shipping address, well, obviously, that will be an invalid billing address. 
I know it will affect all customers no matter what their shipping/pick up option is, but better safe than sorry and have to contact the customer for a correct billing address. But, I would like to hide (or remove) the "Please use the option below" radio option. Unfortunately, I am unable to find the .liquid file that contains that form. We are using the "Supply" template. 

 

Thanks in advance for help,

Soren

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
440 23 63
Hi, there. 
 
Dallas from the Social Care Team here. 
 
With the checkout page, the liquid files for that are actually locked so that no coding adjustments are able to be made. Unfortunately, that means that the answer to your request will be a no. 
 
Are you saying you already have it set up to automatically fill in the store address when their order will be picked up in-store or are you asking? If you're asking that's also a feature that isn't able to be automatically filled in. Your customers are required to fill in their information as it relates to them. If they're going to pick it up in-store then they'll need to select that shipping option themselves and then they'll need to put in their address and billing address as it relates to them. Then in the order page, you'll just have to see whether they're require shipping or if you need to hold it at your location. I know that isn't what you really want to hear, but unfortunately, it's how the checkout coding is set up. 
 
If you have any more context or information you want to share, please feel free to send me another message! I hope this was able to clarify for you. 
 
Best, 

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Shopify Partner
105 6 20

I'm not sure if this helps you or not, but you could use a bit of automation to correct the problem after the fact. For example, when an order comes through, and the customer's billing address is your store's address, simply remove the billing address from the customer. Arigato can do this for you, along with a million other things. It's $5 for a basic store with unlimited automations so you should be able to find many other ways to get value out of it. Just a thought. :)

0 Likes

Success.

Excursionist
29 1 8

So, here is what I ended up doing. I wrote three jquery scripts. The first one hides the express checkout option. The second one hides the billing address same as shipping option. The third one mostly prevents customers from using a P.O. Box for their shipping address.

 
//hide_express_checkout.liquid
//hides the express checkout option so that customers will have to complete both the billing and shipping forms.
<script>
(function($) {
      $(document).on('ready page:load page:change', function() {   
var ExpressCheckoutDiv = $("div[data-alternative-payments='']");
if(ExpressCheckoutDiv.length)
{
    ExpressCheckoutDiv.hide();
} 
   });
    })(Checkout.$);
</script>
 
/hide_same_as_shipping.liquid
//Hides the option for the shipping address to be the same as the billing address
<script>
(function($) {
      $(document).on('ready page:load page:change', function() {   
var TheRadio = $("#checkout_different_billing_address_false");
var TheLabel = $("label[for='checkout_different_billing_address_false']");
var TheDiv = $("div[data-same-billing-address='']");
     
if(TheRadio.length)
{
          TheRadio.hide();
          TheLabel.hide();
          TheDiv.hide();
  $("label[for='checkout_different_billing_address_true']").html("Billing address for the payment method selected above");
  $("#checkout_different_billing_address_true").attr("checked", "checked");
    } 
   });
    })(Checkout.$);
</script>
//no-po-box-shipping.liquid
//prevents customers from using a P.O. Box as their shipping address.   
  <script>
    (function($) {
      $(document).on('ready page:load page:change', function() {
        var regex = /^.*p(.O.|o box|ost office|ost box)/i;
        var fieldErrorClass = 'field--error';
        var fieldErrorMessageSelector = '.field__message--error';
        var errorText = '{{ 'shopify.checkout.shipping.Po_Box_Err' | t }}';
        var $inputs = $("[data-step] [name='checkout[shipping_address][address1]'], [data-step] [name='checkout[shipping_address][address2]']");
        
        var regexCheckFn = function(elem) {
          var $current = $(elem);
          var $parent = $current.closest('.field__input-wrapper');
          var $field = $current.closest('.field');
          if (regex.test($current.val())) {
            if (!$field.hasClass(fieldErrorClass)) {
              $field.addClass(fieldErrorClass);
            }
            if ($field.find(fieldErrorMessageSelector).length < 1) {
              $parent.after("<p class='field__message field__message--error'>"+ errorText +"</p>");
            }
            return false;
           } else {
            if ($field.hasClass(fieldErrorClass)) {
              $field.removeClass(fieldErrorClass);
            }
            if ($field.find(fieldErrorMessageSelector).length > 0) {
              $field.find(fieldErrorMessageSelector).remove();
            }
            return true;
          }
        };
        
        // Call regex check on form submit
        $(document).on('submit', '[data-step] form', function() {
          // default to true and will be set to false if there is an error to prevent form submission
          var isValid = true;
          $inputs.each(function() {
            isValid = isValid && regexCheckFn($(this));
          });
          return isValid;
        });
        
        // Call regex check on blur
        $inputs.blur(function() {
          regexCheckFn($(this));
        });
        
      });
    })(Checkout.$);
  </script> 
In head of the checkout.liquid I added:
{% include 'no-po-box-shipping' %}
{% include 'hide_same_as_shipping' %}    
{% include 'hide_express_checkout' %}
0 Likes