Limiting States/Provinces Listed on the Account Creation, View Cart and Checkout Pages (Blueprint)

These instructions apply to our legacy Blueprint themes that have not been customized. The BigCommerce Support Team may not be able assist with issues that occur after applying them to a previously customized theme. As always, we recommend backing up your current theme customizations before making any changes. These instructions do not work with Stencil themes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce approved agencies or our Community Forum.

These steps will allow you to customize the list of states/provinces that appear in the drop-down box at checkout. There is also a guide for customizing the list of countries. This guide will only work with single-page express checkout.

The examples below are for removing Puerto Rico, Alaska, and Hawaii. You can change the values as needed.

Customizing the Checkout Page

1. Go to Storefront Design › Design Options, then click on Edit HTML/CSS.

Edit HTML/CSS button

 

Did you know? You can also access your theme's template files by going to Storefront Design › Design Option, clicking the More tab and selecting Template Files. This list gives you the ability to edit, compare against the template default, and revert files to their default.

2. In the list of Other Template Files on the left, select ExpressCheckoutChooseAddress.html.

ExpressCheckoutChooseAddress.html located in the Other Template Files list

Use Ctrl F or Command F to quickly locate template files in the list.

3. Copy the following code to your clipboard:

<script type="text/javascript">// <![CDATA[
$(document).ajaxSuccess( function() {
$("#FormField_12 option:contains('Puerto Rico')").remove();
$("#FormField_12 option:contains('Alaska')").remove();
$("#FormField_12 option:contains('Hawaii')").remove();
$("#FormField_22 option:contains('Puerto Rico')").remove();
$("#FormField_22 option:contains('Alaska')").remove();
$("#FormField_22 option:contains('Hawaii')").remove();
});
// ]]></script>

These values must remain on a single line.

4. Paste the code to the bottom of ExpressCheckoutChooseAddress.html.

ample code added to ExpressCheckoutChooseAddress.html

5. Save your changes.

Customizing the Cart Page

1. Go to Storefront Design › Design Option, then click on Edit HTML/CSS.

Edit HTML/CSS button

2. In the list of Other Template Files on the left, select CartContent.html.

CartContent.html located in the Other Template Files list

Use Ctrl F or Command F to quickly locate template files in the list.

3. Copy the following code to your clipboard:

<script type="text/javascript">// <![CDATA[
$(document).ready( function() {
$("#shippingZoneState option:contains('Puerto Rico')").remove();
$("#shippingZoneState option:contains('Alaska')").remove();
$("#shippingZoneState option:contains('Hawaii')").remove();
});
$(document).ajaxSuccess( function() {
$("#shippingZoneState option:contains('Puerto Rico')").remove();
$("#shippingZoneState option:contains('Alaska')").remove();
$("#shippingZoneState option:contains('Hawaii')").remove();
});
// ]]></script>

These values must remain on a single line.

4. Paste the code to the bottom of CartContent.html.

Sample code added to CartContent.html

5. Save your changes.

Customizing the Account Creation Page

1. Go to Storefront Design › Design Option, then click on Edit HTML/CSS.

Edit HTML/CSS button

2. In the list of Other Template Files on the left, select CreateAccountForm.html.

CreateAccountForm.html located in the Other Template Files list

Use Ctrl F or Command F to quickly locate template files in the list.

3. Copy the following code to your clipboard:

<script type="text/javascript">// <![CDATA[
$(document).ready( function() {
$("#FormField_12 option:contains('Puerto Rico')").remove();
$("#FormField_12 option:contains('Alaska')").remove();
$("#FormField_12 option:contains('Hawaii')").remove();
});
// ]]></script>
<script type="text/javascript">// <![CDATA[
$(document).ajaxSuccess( function() {
$("#FormField_12 option:contains('Puerto Rico')").remove();
$("#FormField_12 option:contains('Alaska')").remove();
$("#FormField_12 option:contains('Hawaii')").remove();
});
// ]]></script>

These values must remain on a single line.

4. Paste the code to the bottom of CreateAccountForm.html.

Sample code added to CreateAccountForm.html

5. Save your changes.

Was this article helpful?