Shopping Cart Page Template: Buttons

There are four general-purpose buttons for the shopping cart page: Recalculate, Empty Cart, Continue Shopping, and Checkout. You should have all four of these buttons in your template. You can place them in any location that makes sense to you, and you can have more than one instance of each button.

The [-- BUTTON --] tags will produce either a graphic form button or a text form button, depending on what the merchant defines for each button.

[-- 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>
      <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 width="20px"> </td>
 
          <td align="right" valign="top">
            <!-- Table for totals, etc. -->
            [-- SC_Totals --]
          </td>
        </tr>
      </table>
    </td>
  </tr>

  [-- IF SC_Coupon --]
  <tr>
    <td align="center">
      [-- STORE.CouponCaption --] [-- SC_Coupon --] [-- BUTTON ApplyCoupon --]
    </td>
  </tr>
  [-- END_IF --]

  <tr>
    <td align="center">
      [-- BUTTON Recalculate --] [-- BUTTON EmptyCart --]
    </td>
  </tr>

  <tr>
    <td align="center">
      [-- BUTTON ContinueShopping --] [-- BUTTON Checkout --]
    </td>
  </tr>

</table>

</form>

[-- ShoppingCartFooter --]

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

Buttons CSS

Each button has a unique CSS class. Beyond that, you may want to wrap the buttons in an HTML table cell or a span to apply additional formatting, such as white space around the buttons.

input.button7	The "Recalculate" button.
input.button9	The "Empty Cart" button.
input.button6	The "Continue Shopping" button.
input.button8	The "Checkout" button.

This example puts the buttons inside table cells and defines CSS attributes for the td.buttons selector.

[-- 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;
}

/*****************/
/***  Coupons  ***/
/*****************/
td.coupon {
  padding-top: 10px;
  text-align: center;
  vertical-align: middle;
}
input.button152 { 
  color: #[--STORE.SC_TextColor--];
  cursor: pointer;
}

/*****************/
/***  Buttons  ***/
/*****************/
td.buttons {
  text-align: center;
  padding-top: 20px;
}
</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>
      <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 width="20px"> </td>
 
          <td align="right" valign="top">
            <!-- Table for totals, etc. -->
            [-- SC_Totals --]
          </td>
        </tr>
      </table>
    </td>
  </tr>

  [-- IF SC_Coupon --]
  <tr>
    <td class="coupon">
      [-- STORE.CouponCaption --] [-- SC_Coupon --] [-- BUTTON ApplyCoupon --]
    </td>
  </tr>
  [-- END_IF --]

  <tr>
    <td class="buttons">
      [-- BUTTON Recalculate --] [-- BUTTON EmptyCart --]
    </td>
  </tr>

  <tr>
    <td class="buttons">
      [-- BUTTON ContinueShopping --] [-- BUTTON Checkout --]
    </td>
  </tr>

</table>

</form>

[-- ShoppingCartFooter --]

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

Next: Ordering Instructions

Shopping Cart Page Template: Buttons

Buttons CSS

Check These Out

Top Template Tips

Update Your Templates