CODEWITHSUNDEEP
bigcommerce
thannes
thannes

Reputation: 778

BigCommerce Stencil Checkout - Edit Available Shipping and Billing Countries/States

Is there a safe way to alter the Shipping and Billing Country and State select dropdowns in checkout? It would be nice if this were a setting a seller could control in the admin panel, but I don't believe it is available.

Here is an example of how I have handled this in the past, but I would like to avoid writing JavaScript to manipulate the DOM and override the default functionality on page load as I'm aware this is not best practice and likely not supported by all browsers...

EDIT: I saw this PR come in yesterday, but I don't think we can edit the actual {{{ checkout.checkout_content }}}. https://github.com/bigcommerce/stencil/pull/940

if(window.location.pathname == "/checkout.php"){
    console.log("loaded from analytics box");

    function handleUSOnlyBillingCountry(){
        $('#FormField_11 option[value="United States"]').addClass("keep-me");
        $('#FormField_11 option[value="Canada"]').addClass("keep-me");
        $('#FormField_11 option[value="Puerto Rico"]').addClass("keep-me");
        $('#FormField_11 option:first-child').addClass("keep-me");
        $('#FormField_11 option').each(function(){
            if(!$(this).hasClass("keep-me")){
                $(this).remove();
            }
        });
    }
}

I checked the shipping configuration on the store, and confirmed only United States is available for shipping, but all countries still show in checkout. Once an address outside of the configured shipping zone is entered, it says "One of more of the items in your cart cannot be shipped to your location". This helps, but I would like to remove the options completely.

enter image description here

enter image description here

Upvotes: 1

Views: 1115

Answers (2)

Alyss
Alyss

Reputation: 1866

We've definitely had this request in the past, but there isn't a current stencil alternative from javascript. If you use Optimized Checkout, the country dropdown is automatically limited to the countries you ship to.

In developer or blueprint checkout, the only currently viable solution (to my knowledge) is javascript. I don't believe we'll be adding this to legacy checkouts, but we are working on a future Checkout SDK which could be consumed and have (hopefully) fewer potential points of failure for this change.

Upvotes: 2

elephantengine
elephantengine

Reputation: 1

I was under the impression that the list of shipping countries had to be configured thru the control panel thru the use of shipping zones. https://support.bigcommerce.com/articles/Public/Setting-Up-Shipping-Zones

Upvotes: -1

Related Questions