If you are using FoxyCart and want the checkout and receipt pages to look like the rest of your site, you'll need to set up:
Once you have these items all set up, you'll then tell FoxyCart to cache your customized pages. Remember that FoxyCart, rather than Webvanta, needs to deliver the checkout and receipt pages because they are delivered securely, and FoxyCart provides all of the input fields for the payment and shipping information, as well as the information and amounts for the receipt page.
Note that the process we describe here allows you to customize only the styling of these pages, and not the HTML content of the checkout and cart areas, which is fixed by FoxyCart. You can change much of the text via the Language section of your FoxyCart control panel (in the Templates menu). And if you are determined to change to order of things, you can use jQuery to move elements around.
Create a page template for the checkout and receipt pages. This template should include the CSS for these pages, which you don't need on other pages of your site.
In this template, delete "text/html" from the Content Type field, and leave this field blank. This prevents Webvanta from wrapping the page in the code used for in-place editing. The content type isn't needed because pages using this template won't ever be delivered directly to the browser; they're cached by FoxyCart, which adds its own content.
You can lay out this page however you want. We like to have a two column layout, with the left column somewhat wider than the right, so we can put the shopping cart contents in the right column and the checkout info in the left column.
Now you need to create pages for checkout and receipt. Create these just like any other Webvanta page, but apply the special template you just created.
On these pages, insert the string:
where you want FoxyCart to insert all of the fields for the customer to specify their billing and shipping information.
Insert the string:
where you want FoxyCart to insert the cart contents.
You don't want to start from scratch with the CSS for these pages; there's lots of items to be styled, and FoxyCart provides standard CSS that handles it all.
FoxyCart has two versions of its CSS: "standard" uses images for the headers, and "text" is text-only. We prefer to use the text-only CSS so we can make the headers match the rest of the site, but you can use either one.
You can access the FoxyCart CSS files at the following locations:
There are two ways you can modify the CSS. Upgrading to a new version of FoxyCart is easiest if you don't modify their CSS file, but instead load their file and then load one of your own that overrides the styles you want to change.
However, the FoxyCart CSS sets fonts, sizes, and colors in many places, and if you want the checkout and receipt pages to match the rest of your site, you'll need to find each one of them and override it with the matching style rules from your main CSS. We find it easier to take the FoxyCart CSS file and edit it directly, removing all font, size, and color settings so the site styles will prevail.
If you're using the override approach, then your checkout/receipt template should load the FoxyCart CSS and then your own CSS overrides file. If you are modifying the FoxyCart CSS, then you only need to load your modified file.
When you have your checkout and receipt pages ready, you need to tell FoxyCart to use them. Here's the process:
You can now try adding an item to the cart on your site and clicking Checkout, and you should see your customized checkout page.
The receipt page works similarly; it has a separate template in the FoxyCart system, and you'll probably want a separate page in your Wevanta site to provide the template to FoxyCart, but you can generally share the Webvanta page template and the CSS.
Once you're looking at your customized receipt page, you'll no doubt see things you want to change. FoxyCart assign a unique ID to virtually every element, so you can add specific styles to adjust things individually.
The iteration process is a little cumbersome, but it isn't too bad once you get the rhythm down:
Be sure to exercise all the checkout options to make sure you've styled things as you like, including guest checkout and login, various shipping methods, separate billing and shipping addresses, different payment methods, and so forth. Also try invalid credit cards so you can see the error messages.
Once you have the checkout page to your liking, the receipt page should be close. Follow the same process for that page.