Shopping Cart Page Template:
Tax and Shipping

There is only one custom template tag to produce the tax and shipping selections on the Shopping Cart Page. However, the resulting display can have many different forms, depending on options chosen by the merchant. For example, the tax can be selected from a drop-down list, or calculated automatically when the customer enters a ZIP code in a text entry box. Likewise, shipping choices can be displayed as a drop-down list or as a set of radio buttons. Some shipping methods also display a country selection list that appears next to the ZIP code box.

As the template designer, you cannot control which of these options are chosen by the merchant, but you don't have to worry about it. The [-- SC_Tax_Shipping --] tag produces an HTML table containing whatever fields and formats are required by the merchant's choices. Your template just needs to allow for the HTML table.

You can display a "Tax/Shipping" button by adding the Button attribute, like this: [-- SC_Tax_Shipping Button --]. Customers can click the button to recalculate tax and shipping charges. It performs the same function as the "Recalculate" button, but it has a different label.
You can have more control over the location of the button by using the standalone [-- BUTTON TaxShipping --] tag.

[-- 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 --]

# Start the shopping cart form
[-- SC_Form --]

<table width="600" style="margin-left:auto; margin-right:auto" align="center">
  <tr>
    <td>
      [-- SC_Cart --]
    </td>
  </tr>

  <tr>
    <td>
      [-- SC_Tax_Shipping --]
    </td>
  </tr>
</table>

</form>

[-- ShoppingCartFooter --]

</body>
</html>
[-- END_DEFINE ShoppingCart --]

Resulting Page

Tax and Shipping CSS

Here is a list of the CSS selectors used in the tax and shipping display.

table.taxnship	The table containing the tax and shipping choices if the merchant has configured user-selected tax. If the merchant configured ZIP/Postal code-based tax, this table only contains the shipping selections.
table.zipncountry	The table containing the ZIP code text entry box and the country drop-down list or text entry box.
td.taxnship_hdr	The cell that contains "Choose a shipping option" when shipping options are displayed as radio buttons.
td.taxnship	Cells containing the tax and shipping selection fields
select.taxnship	Select list of tax options for user-selected tax.
select.ship	Select list of shipping options.
td.zipncountry_txt	Cell containing the label before a text entry box, such as "Ship to Zip/Postal Code"
td.zipncountry	Cell containing a text entry box for either ZIP/Postal Code or country.
select.addr	Select list for country.
input.button153	The "Tax/Shipping button.

This example is the same as the one above, plus it includes a brief style sheet with selectors for some of the tax and shipping 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 --]
}

/**********************************/
/***  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; 
}

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

/**************************/
/***  Tax and Shipping  ***/
/**************************/
td.zipncountry {
  text-align: left;
}

td.zipncountry_text {
  text-align: left;
}

/*** select shipping method, tax rate ***/
table.taxnship { 
  text-align: right;
  padding-right: 15px;
}

# Tax/Ship button
input.button153 { 
  color: #[--STORE.SC_TextColor--];
  cursor: pointer;
}

</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShoppingCartHeader --]

# Start the shopping cart form
[-- SC_Form --]

<table width="600" style="margin-left:auto; margin-right:auto" align="center">
  <tr>
    <td>
      [-- SC_Cart --]
    </td>
  </tr>

  <tr>
    <td>
      [-- SC_Tax_Shipping --]
    </td>
  </tr>
</table>

</form>

[-- ShoppingCartFooter --]

</body>
</html>
[-- END_DEFINE ShoppingCart --]

Next: SC Surcharges

Shopping Cart Page Template:Tax and Shipping

Tax and Shipping CSS

Check These Out

Top Template Tips

Update Your Templates

Shopping Cart Page Template:
Tax and Shipping