Setting an Order Total Minimum (Blueprint)

 

This feature requires knowledge of HTML/CSS. See Getting Help for avenues of assistance.

Some businesses find it necessary to set an order purchase minimum. This guide will explain how to code hiding the checkout buttons until the customer has reached the set minimum price.

These instructions will only work with stores using a single currency and our legacy, Blueprint themes that have not  been customized. We recommend backing up your current theme customizations before making any changes.

 

Will this work on mobile? If your theme is responsive these instructions will work. If the theme uses the BigCommerce mobile theme, you will need to repeat the steps below for the mobile template files.

Hiding Checkout Buttons in the Cart

First, you will be modifying the code to hide the checkout button and show a message about the order minimum to your customers. This message will appear on the cart page until the customer's order total reaches the set minimum, at which point the message will disappear and the checkout button will return.

Code for the Messaging

1. Copy the following code. You can change the value from $100 in a later step.

<div class="CartTotalMessage">
<p>Items in cart must be a total of $100 or more. Please add additional products to the cart to proceed.</p>
</div>

2. Go to Storefront Design › My Themes , then click on Edit HTML/CSS.

Edit HTML/CSS

3. In the list of Other Template Files on the left, locate cart.html.

cart.html located in the Other Template Files list

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

4. Paste the code above %%Panel.CartContent%%. Change the value from $100 to your desired order total minimum.

Code pasted in cart.html

Script for hiding Checkout Button

1. Copy the following code.

<script type="text/javascript">
$(document).ready(function() {
var CartTotal = '%%GLOBAL_CartItemTotal%%';
var CartTotal = CartTotal.replace('$','');
var CartTotal = CartTotal.replace(',','');
if(CartTotal >= 100.0) {
  $('.CartTotalMessage').hide();
}
else {
  $('.ProceedToCheckout').hide();
  $('.PayPalExpressCheckout').hide();
  $('#CartHeader h2 img').hide();
  $('.btn-secondary').hide();
  $('a[title="Click here to proceed to checkout"]').hide();
}
});
</script>
 

Changing the minimum amount? Change the value from $100 to your minimum order total. If using a currency other than USD, be sure to update the currency token on the fourth line from $ to your currency's token.

2. Paste the contents of your clipboard after the body tag on cart.html. 

Code pasted below body tag

3. Save your changes.

Hiding checkout buttons in your popup based on total

If you have the Add to Cart Action set to Show Confirmation in a Popup Window (Store Setup ›​Store SettingsDisplay tab), you will need to set your order minimum in the popup as well.

Code for Hiding Checkout Button

1. Copy the following code. If using a currency other than USD, be sure to update the currency token on the fourth line from $ to your currency's token.

<script type="text/javascript">
$(document).ready(function() {
var CartTotal = '%%GLOBAL_CartItemTotal%%';
var CartTotal = CartTotal.replace('$', '');
var CartTotal = CartTotal.replace(',', '');
if(CartTotal >= 100.0) {
  $('.CartTotalMessage').hide();
}
else {
  $('.ProceedToCheckout').hide();
  $('.PayPalExpressCheckout').hide();
  $('#CartHeader h2 img').hide();
}
});
</script>

2. Go to Storefront Design › My Themes, then click on Edit HTML/CSS.

3. In the list of Other Template Files on the left, select FastCartThickboxContent.html.

FastCartThickboxContent.html located in the Other Template Files list

Use Ctrl F or Command F to find files quickly.

4. Paste the code from step 1 to the bottom of the file. Change 100 to your minimum purchase amount.

5. Place your cursor after the code that reads <div class="fastCartContent">, then press Enter or Return once.

6. Paste the following code on the empty line you just created. Change the value from $100 to your desired order total minimum.
<div class="CartTotalMessage">
<p>Items in cart must be a total of $100 or more. Please add additional products to the cart to proceed.</p>
</div>

7. Save your changes.

Now your customers will only see the proceed to checkout buttons on their view cart page and popup confirmation window if their order total meets the minimum purchase total.

Adjusting the Style of Your Message

If you want to change the font color, size or style, you can edit the css to suit your needs. The steps below can be used as a guideline.

1. Copy the following code:

.CartTotalMessage {
  color: #f70a16;
  font-size: 1.2em;
  font-weight: bold
}

2. Go to Storefront Design › My Themes, then click on Edit HTML/CSS.

3. In the list of Other Template Files on the left, locate custom.css.

custom.css located in the Other Template Files list

4. Paste the code from step 1 to the bottom of the file.

5. Save your changes.

Getting Help

Don't feel comfortable adjusting your design or using a Stencil theme? 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?