Add Fee to Cart in BigCommerce

You’re probably here because you’ve discovered that Big Commerce doesn’t allow you to add fees to orders – an essential function of e-commerce. Recently faced with this issue – where a client needs to charge a fee in Big Commerce, I needed to come up with a solution. Adding a handling fee to the shipping acted weird, and it didn’t sync properly with the warehouse or ERP software.

The solution I came up with to add a fee to orders in BigCommerce, was to add a product to the cart. This entails:

• Create a virtual product in BigCommerce.
• Checking if the fee product is already in the cart
• If the product is not in the cart, add it to the cart.
• If the product is in the cart, preventing it from being added again, or from being removed.

To do this, you will want to edit the theme files by going to Storefront > Themes > Advanced > Edit Theme Files.

1. Back up your theme.
2. Make the changes.

First, you will need to edit the templates/compenents/cart/content.html and insert this code at the very top of the file.

<style>
[data-item-pid="product-id"] img {display: none;}
[data-item-pid="product-id"] a.cart-remove.icon {display: none;}
td#SKUHERE-qty-box .form-increment, a#SKUHERE-btn-rmv {display:none;}
</style>
<script>
  document.addEventListener("DOMContentLoaded", function(){
    (async () => {
      async function getRepos() {
        const url = '/api/storefront/carts?include=lineItems.digitalItems.options';

        const response = await fetch(url, {
          method: "GET",
          credentials: "same-origin"
        });

        const repositories = await response.json();

        return repositories[0].lineItems.digitalItems;
     }
      
     const repos = await getRepos();
      
     let skus = [];
      
     repos.forEach((repo) => {
        Object.entries(repo).forEach(([key, value]) => {
            skus.push(value);
        });
     });

     if (skus.includes("SKUHERE")) {
       //do nothing - it's already in the cart
     } else {
       // add the fee to the cart
       window.location.href = "https://vaporempire.com/cart.php?action=add&product_id=product-id";
     }
      
    })();
});
</script>

You will need to replace SKUHERE with the SKU of the product you created, and product-id with the product id of that product.

Still, in the templates/compenents/cart/content.html file, add

id="{{sku}}-qty-box"

to the tag (which may be different in your theme), that holds the cart item lines:

<td class="cart-item-block cart-item-info cart-item-quantity">

So, it should look something like this:

<td class="cart-item-block cart-item-info cart-item-quantity" id="{{sku}}-qty-box">

Next, find the <a class=”cart-remove icon” and add

id="{{sku}}-btn-rmv"

which should look something like:

<a class="cart-remove icon" data-cart-itemid="{{id}}" href="#" data-confirm-delete="{{lang 'cart.confirm_delete'}}" id="{{sku}}-btn-rmv">

Now, you will need to add the following code to the templates/pages/checkout.html just after the close header tag:

<style>
[data-item-pid="product-id"] img {display: none;}
[data-item-pid="product-id"] a.cart-remove.icon {display: none;}
td#SKUHERE-qty-box .form-increment, a#SKUHERE-btn-rmv {display:none;}
</style>
<script>
  document.addEventListener("DOMContentLoaded", function(){
    (async () => {
      async function getRepos() {
        const url = '/api/storefront/carts?include=lineItems.digitalItems.options';

        const response = await fetch(url, {
          method: "GET",
          credentials: "same-origin"
        });

        const repositories = await response.json();

        return repositories[0].lineItems.digitalItems;
     }
      
     const repos = await getRepos();
      
     let skus = [];
      
     repos.forEach((repo) => {
        Object.entries(repo).forEach(([key, value]) => {
            skus.push(value);
        });
     });

     if (skus.includes("SKUHERE")) {
       //do nothing - it's already in the cart
     } else {
       // add the fee to the cart
       window.location.href = "https://vaporempire.com/cart.php?action=add&product_id=product-id";
     }
      
    })();
});
</script>

Save, publish, wait about 5 minutes and then check out the front end of the site.

If you need help, feel free to reach out and get a custom quote.