Ecommerce Templates > General Help > The shopping cart page

The cart page

Your shopping cart checkout process should look great right out of the box. But everybody wants something a little different and so there is a lot you can do to make your cart page unique to your store. We'll outline the tweaks which are available below so you can personalize your checkout to just how you like it.

The CSS based shopping cart

In Version 6.5 we removed all the tables and replaced them with css resulting in meaner leaner code. It has also added a huge amount of flexibility to the layout with numerous css classes available so you can really personalize your checkout. Naturally it’s responsive ready so will work great on responsive designs.

CSS cart

If you are updating from a previous version you will need to download a file called ectcart.css which provides all the css formatting for the various checkout steps (as well as for the search form).

All you need to do is download the zip file, unzip it and upload the folder /css/ to your store root.

Then on your store pages add this line somewhere before the closing </head> tag

<link href="css/ectcart.css" rel="stylesheet" type="text/css">

It really only needs to be added to the cart and search pages but will do no harm if it is added to all pages.

Wordpress users should add the above to header.php somewhere before the closing </head> tag

The css file is a comprehensive file covering all the classes required for all checkout scenarios. You can of course edit the file ectcart.css but make regular back ups and check in different browsers.

There are a couple of text entries you can add to includes.asp / includes.php if you want to. These are shown above with the title "Delivery" and the cart blurb, " Blurb goes here". Both can be changed to images if required.

You will need these additions to vsadmin/includes.asp

xxEstimatorTitle="Delivery"
xxEstimatorEnd="Blurb goes here"

or includes.php

$xxEstimatorTitle="Delivery";
$xxEstimatorEnd="Blurb goes here";

Styling the soft cart

The soft cart was introduced in version 6.3 and comes in the form of a pop up when an item is added to cart

Soft cart

It is div / css based so it can be styled to fit the look and feel of the rest of your store.

Soft cart css

The css used here is the following

input.sccheckout{
box-shadow: 0px 1px 4px 0px #BCC8DC;
background-color:#748dbe;
border-radius:4px;
border:1px solid #5B69AE;
display:inline-block;
color:#fff;
font-family:arial;
font-size:11px;
font-weight:bold;
padding:3px 5px;
text-decoration:none;
text-shadow:1px 0px 0px #6c79b7;
cursor:pointer;
}

div.scimage{
width:180px !important;
}

div.scprodsadded, div.sccartitems{
background-color:#eee;
}

div.scprice{
border-radius:4px;
background-color:#748DBE !important;
color:#fff !important;
margin-top:6px;
padding-left: 16px !important;
text-align:center;
}

div.sccarttotal{
background:#748DBE !important;
color:#fff !important;
}

These are the available css classes:

div.scart - the generic class which is available on all divs in the layout
div.scwrap - the main wrapper
div.sccheckout - the div containing the checkout button
input.sccheckout - the checkout button class
div.scclose - the div containing the close gif
div.scprodsadded - the div containing the text " The following items have been added to your order."
div.scimage - the div containing the thumbnail image
div.scproducts - the outer wrapper of the product details section
div.scproduct - the inner wrapper of the product detail section
div.scprodname - the div containing the product name (has been added)
div.scprice - the div containing the item price
div.sccartitems - the div containing the number of items in the cart
div.sccarttotal - the div containing the cart total
div.sclinks - the div containing the "edit order | continue shopping" links
a.scclink - the link properties for the continue shopping | edit order links

If you want to change the checkout button in the soft cart to an image, add the following to vsadmin/includes.asp

imgsoftcartcheckout="images/softimage.gif"

or to vsadmin/includes.php

$imgsoftcartcheckout="images/softimage.gif";

If you prefer not use the soft cart on your store and want to continue using a regular add to cart function, add the following to vsadmin/includes.asp

usehardaddtocart=TRUE

or to vsadmin/includes.php

$usehardaddtocart=TRUE;

This is used by default for mobile devices where the pop up soft cart wouldn't really be viable. There are extra css classes available for the hard cart

div.hardcarttable
div.hardcartstockwarn
div.hardcartaddproductline
div.hardcartaddproductquant
div.hardcartaddproduct
div.hardcartpleasewait

The main CSS classes (Pre Version 6.5 Only)

There are several css classes associated with the shopping cart. Here are a couple of examples with their css classes

CSS cart

table.cobtbl{
background-color: #D7D1C9;
border-radius: 5px;
box-shadow: 1px 1px 3px #666;
}

td.cobhl{
background-color:#F3F0E9;
font-weight: normal;
color:#333;
}

td.cobll{
background-color: #F9F9F4;
color : #333;
}

CSS shopping cart

table.cobtbl{
border-collapse: collapse;
background-color: #fff;
}

td.cobhdr{
background-color:#bbb;
font-size:14px;
color:#fff;
text-transform:uppercase;
}

td.cobll{
background-color: #fff;
color : #333;
}

The classes explained

table.cobtbl for the table.
td.cobhl for the cell highlights
td.cobll for the cell lowlights
td.cobhdr for the column headings
td.cobcol1 for the complete left hand column

These classes are used across a number of pages to give a consistent look to your store, they are used on the search, clientlogin, order status,and tracking pages.

The div containing the text "You are only $xx from free shipping" can be formatted with the following class.

div.tofreeshipping{
font-size:16px;
}

if you want to change the font color use the following

div.tofreeshipping{
color: #000 !important;
}

In Version 6.3.2 we added some extra classes for the product options which appear in the cart page

span.cartoption cartoptiongroup
span.cartoption cartoptionname
span.cartoption cartoptionpricediff
span.cartoption cartoptionoutstock
span.cartoption cartoptiontotaldiff

...and for the discounts display in the cart

span.cartdiscounts
span.cartdiscountsamnt

In Version 6.4.1 we added classes for all the labels and form fields for the shipping and billing stage of checkout

Main classes

cdform - the main table for the shipping and billing details
cdforminput - the class for all input fields

Label classes

cdformtextra1 - the extra checkout label typically used for Company Name
cdformtname - the name label
cdformtemail - the email label
cdformtaddress - the address label
cdformtcity - the city label
cdformtstate - the state label
cdformtcountry - the country label
cdformtzip - the zip / post code label
cdformtphone - the phone number label
cdformtaddinfo - the additional info label
cdformtremember - the remember me label
cdformtcoupon - the coupon / gift certificate label
cdformtpayment - the payment method label
cdformsubmit - the submit button cell

Form field classes

cdformextra1 - the extra checkout field typically used for Company Name
cdformname - the name field
cdformemail - the email field
cdformaddress - the address field
cdformcity - the city field
cdformstate - the state field
cdformcountry - the country field
cdformzip - the zip / post code field
cdformphone - the phone number field
cdformaddinfo - the additional info cell
addinfo - the additional info text area
cdformremember - the remember me checkbox
cdformcoupon - the coupon / gift certificate field
cdformpayment - the payment method field

Back to top

Tweaking the display

Apart from using the css files there are other ways you can tweak the cart display.

In version 6.3 we added the possibility to show the checkout steps above each of the cart screens. It requires the following addition to vsadmin/includes.asp

xxCoStp1="Step 1 of 3 : Proceed to confirm your address details"
xxCoStp2="Step 2 of 3 : Check your address, enter any special instructions, select method of payment"
xxCoStp3="Final Step 3 of 3 : Summary of your order"

or vsadmin/includes.php

$xxCoStp1='Step 1 of 3 : Proceed to confirm your address details';
$xxCoStp2='Step 2 of 3 : Check your address, enter any special instructions, select method of payment';
$xxCoStp3='Final Step 3 of 3 : Summary of your order';

Checkout steps

This uses the following css

div.checkoutsteps{
text-align:center;
font-weight:bold;
padding-bottom:4px;
margin-bottom:8px;
border: 1px #ccc solid;
background-color:#F9F9F4;
color:#666;
}

You can of course use your own text or change the text entries to images, for example

Checkout steps

xxCoStp1="<img src=""images/step1.gif"" border=""0"" />"

$xxCoStp1="<img src='images/step1.gif' border='0' />";

In the cart screen shots above you'll see we have included the product image in the cart. To do that you will need the following in vsadmin/includes.asp

useimageincart=TRUE

or vsadmin/includes.php

$useimageincart=TRUE;

To link the thumbnail to its product detail pages you will also need this in includes.asp

linkcartproducts=TRUE

or in includes.php

$linkcartproducts=TRUE;

If you are using multiple shipping method you may want to provide a shipping estimate to your customers before they check out.

Shipping estimate

To do this add the following to vsadmin/includes.asp

estimateshipping=TRUE

or to vsadmin/includes.php

$estimateshipping=TRUE;

If you prefer to use radio buttons...

Shipping estimate

...use the following in vsadmin/includes.asp

shippingoptionsasradios=TRUE

or in vsadmin/includes.php

$shippingoptionsasradios=TRUE;

It is possible to add extra fields to the checkout with additions to vsadmin/includes.asp or vsadmin/includes.php - you may want to include fields for a company address, second address line or asking your customers how they found your store.

Payment methods can be shown as drop down choices...

Payment methods

...or using radio buttons

Payment methods

If you want to use radio buttons, use the following in vsadmin/includes.asp

payproviderradios=1

or in vsadmin/inlcudes.php

$payproviderradios=1;

There are other parameters available for hiding or showing features on the cart page such as removing the Remember Me feature, newsletter sign up on checkout, hide the coupon box plus shipping and insurance details. These can be found on the ASP or PHP parameters pages.