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.
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.
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
xxEstimatorEnd="Blurb goes here"
$xxEstimatorEnd="Blurb goes here";
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
It is div / css based so it can be styled to fit the look and feel of the rest of your store.
The css used here is the following
box-shadow: 0px 1px 4px 0px #BCC8DC;
border:1px solid #5B69AE;
text-shadow:1px 0px 0px #6c79b7;
padding-left: 16px !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
or to vsadmin/includes.php
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
or to vsadmin/includes.php
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
There are several css classes associated with the shopping cart. Here are a couple of examples with their css classes
box-shadow: 1px 1px 3px #666;
color : #333;
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.
if you want to change the font color use the following
color: #000 !important;
In Version 6.3.2 we added some extra classes for the product options which appear in the cart page
...and for the discounts display in the cart
In Version 6.4.1 we added classes for all the labels and form fields for the shipping and billing stage of checkout
cdform - the main table for the shipping and billing details
cdforminput - the class for all input fields
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
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"
$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';
This uses the following css
border: 1px #ccc solid;
You can of course use your own text or change the text entries to images, for example
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
To link the thumbnail to its product detail pages you will also need this in includes.asp
or in includes.php
If you are using multiple shipping method you may want to provide a shipping estimate to your customers before they check out.
To do this add the following to vsadmin/includes.asp
or to vsadmin/includes.php
If you prefer to use radio buttons...
...use the following in vsadmin/includes.asp
or in vsadmin/includes.php
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...
...or using radio buttons
If you want to use radio buttons, use the following in vsadmin/includes.asp
or in vsadmin/inlcudes.php
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.