Browse by Topic

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

 

This requires editing the code of your store. See Getting Help for avenues of assistance.

These instructions apply to our legacy Blueprint Themes that have not been customized. As always, we recommend backing up your current theme customizations before making any changes. These instructions do not work with Stencil themes.

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 (Blueprint) or custom one-page checkout (Stencil).

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 › My Themes, then click on Edit HTML/CSS.

Edit HTML/CSS

 

Did you know? You can also access your theme's template files by going to Storefront Design › My Themes, 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>
 

Be careful! 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 › My Themes, then click on Edit HTML/CSS.

Edit HTML/CSS

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>
 

Be careful! 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 › My Themes, then click on Edit HTML/CSS.

Edit HTML/CSS

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>
 

Be careful! 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.

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Ask a Design Partner Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?