Setting an Order Total Minimum

Some businesses find it necessary to set an order purchase minimum. This guide will help you create one by hiding the checkout buttons until the customer has reached the set minimum price.

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

If you're not familiar or comfortable working with HTML/CSS, check out our BigCommerce approved agencies or our Community for assistance.

 

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 also make these changes on 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 Store SetupDesign, then click on Edit HTML/CSS.

In some versions of the control panel, this is located under Setup & ToolsSet up your storeDesign.

The Edit HTML/CSS tab in the Design section

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 ammount? 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 SettingsDisplay), 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 Store SetupDesign, then click on Edit HTML/CSS.

In some versions of the control panel, this is located under Setup & ToolsSet up your storeDesign.

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 Store SetupDesign, then click on Edit HTML/CSS.

In some versions of the control panel, this is located under Setup & ToolsSet up your storeDesign.

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.

Was this article helpful?