Shopping Cart Page Template: Cart Totals

The products that customers put in the cart and the selections that they make for tax, shipping, and surcharges all affect the total cost of the order. The [-- SC_Totals --] tag produces a single-column HTML table that contains the order subtotal, tax, shipping, and surcharges, and then the order total.

This example uses an HTML table to lay out the various parts of the Shopping Cart Page.

[-- DEFINE ShoppingCart --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>[-- STORE.SC_YourShoppingCart --]</title>
<script type="text/javascript" language="JavaScript">
<!-- 
[-- SC_JAVASCRIPT extras --]
// -->
</script>

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}
</style>
</head>

<body>
[-- ShopSiteMessages --]
[-- ShoppingCartHeader --]
[-- SC_Form --]
<table width="600" style="margin-left:auto; margin-right:auto" align="center">
  <tr>
    <td>
      [-- SC_Cart --]
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" style="line-height:150%" width="100%">
        <tr>
          <td align="left" valign="top">
            <!-- Table for the shipping and tax selections etc. -->
            <br>[-- SC_Tax_Shipping --]
            [-- SC_Surcharge --]
          </td>
          <td align="right" valign="top">
            <!-- Table for totals, etc. -->
            [-- SC_Totals --]
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</form>
[-- ShoppingCartFooter --]
</body>
</html>
[-- END_DEFINE ShoppingCart --]

Cart Totals CSS

Here is a list of the CSS selectors used in the cart totals display.

table.totals	The table containing the various totals.
td.totals_txt	The cells containing the label for each charge, such as "Subtotal" or "Shipping."
td.totals	The cells containing each charge.
td.totals_all_txt	The cell containing the "Total" label.
td.totals_all	The cell containing the total charge for the order.

This example is the same as the one above, plus it includes a style sheet with selectors for some of the cart totals elements.

[-- DEFINE ShoppingCart --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>[-- STORE.SC_YourShoppingCart --]</title>
<script type="text/javascript" language="JavaScript">
<!-- 
[-- SC_JAVASCRIPT extras --]
// -->
</script>

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}

/***********************/
/***  Hyperlinks     ***/
/***********************/
a:link { 
  color: #[-- STORE.SC_LinkColor --];
}
a:visited { 
  color: #[-- STORE.SC_VisitedLinkColor --];
}
a:hover { 
  color: #[-- STORE.SC_LinkColor --];
}
a:active { 
  color: #[-- STORE.SC_ActiveLinkColor --];
}

/**********************************/
/***  Table of Products (Cart)  ***/
/**********************************/
table.cart {
  width: 100%;
  padding-top: 1em;
  border-collapse: separate;
  border-spacing: 3px;
}

th {
  text-align: center;
}

td.cart_delete, td.cart_cp_delete {
  padding: 3px;
  width: 50px;
  text-align: center; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_quantity, td.cart_cp_quantity {
  padding: 3px;
  width: 70px;
  text-align: center; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_name, td.cart_cp_name {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_sku, td.cart_cp_sku {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_price, td.cart_cp_price {
  padding: 3px;
  font-style: italic;
  text-align: right; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_total, td.cart_cp_total {
  padding: 3px;
  text-align: right; 
  background-color: #[-- STORE.SC_ShadeColor --];
  white-space: nowrap;
}

td.cart_op {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_op1, td.cart_op2 {
  padding: 3px;
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_empty {
  padding: 3px;
  text-align:center;
  background-color: #[-- STORE.SC_shadecolor --];
}

select.cart {
  text-align: left;
}

textarea.cart {
  vertical-align: middle; 
}

/* Delete Item Button */
input.button154 { 
  color: #[--STORE.SC_TextColor--];
  cursor: pointer;
}

/******************/
/*** Surcharges ***/
/******************/
table.surcharge { 
  text-align: right;
  padding-right: 15px;
}

td.surcharge {
  font-weight: bold;
}

select.surcharge {
  font-weight: normal;
}

/***************************************/
/***          Table of Totals        ***/
/***  Subtotal, Tax, Shipping, etc.  ***/
/***************************************/
table.totals {
  color: #[--STORE.SC_TextColor--];
  vertical-align: middle; 
  width: 100%;
  line-height: 150%;
}

td.totals_txt, td.totals_all_txt {
  text-align: right;
  padding-right: 15px;
}

td.totals, td.totals_all {
  text-align: right;
  padding-right: 3px;
}

td.totals_all, td.totals_all_txt {
  font-weight: bold;
}
</style>
</head>
<body>
[-- ShopSiteMessages --]
[-- ShoppingCartHeader --]
[-- SC_Form --]
<table width="600" style="margin-left:auto; margin-right:auto" align="center">
  <tr>
    <td>
      [-- SC_Cart --]
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" style="line-height:150%" width="100%">
        <tr>
          <td align="left" valign="top">
            <!-- Table for the shipping and tax selections etc. -->
            <br>[-- SC_Tax_Shipping --]
            [-- SC_Surcharge --]
          </td>
          <td align="right" valign="top">
            <!-- Table for totals, etc. -->
            [-- SC_Totals --]
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</form>
[-- ShoppingCartFooter --]
</body>
</html>
[-- END_DEFINE ShoppingCart --]

Next: Shopping Cart Coupons

Shopping Cart Page Template: Cart Totals

Cart Totals CSS

Check These Out

Top Template Tips

Update Your Templates