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 upload the file called ectcart.css to the /css/ folder - this file provides all the css formatting for the various checkout steps as well as the other store generated forms like the search page, client login, order status page etc.
All you need to do is upload the folder /css/ to your store root from the updater.
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 should be added to all front end store pages.
Wordpress users should add the above to header.php somewhere before the closing </head> tag
You can of course change the css but any edits should be made to your main css file rather than directly to ectcart.css. We have some notes on that here.
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 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;
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
There are extra css classes available for the hard cart
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.