Customizing Your FoxyCart Checkout and Receipt Pages

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:

  • A page template to use for these pages
  • A Webvanta page for each of these pages
  • A CSS file for these pages

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.

Before starting this process, be sure to read FoxyCart's Setting up your Checkout Template documentation. It's also worth watching their Advanced CSS Customization screencast.

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.

The checkout and receipt template

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.

The checkout and receipt pages

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:

^^checkout^^

where you want FoxyCart to insert all of the fields for the customer to specify their billing and shipping information.

Insert the string:

^^cart^^

where you want FoxyCart to insert the cart contents.

Customizing the FoxyCart CSS

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:

https://YOURSTORESUBDOMAIN.foxycart.com/themes/text/styles.css
https://YOURSTORESUBDOMAIN.foxycart.com/themes/standard/styles.css

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.

Caching the pages at FoxyCart

When you have your checkout and receipt pages ready, you need to tell FoxyCart to use them. Here's the process:

  • Log in to your FoxyCart control panel and click Checkout under the Templates menu.
  • In the "remote template URL" field, enter the full URL for your checkout page, which will be something like http://mysite.webvanta.com/checkout.
  • Click the "cache your url" button. FoxyCart will then read the page from your Webvanta site.
  • In the checkout template text area, you'll see your code, with all of the CSS inlined and FoxyCart-specific code added. Don't modify this, because if you do so, you'll need to repeat those modifications any time you want to change the template or CSS on your site.
  • Click the "update template" button.

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.

Refining your design

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:

  • View the receipt page on your site, with a few items in the cart.
  • Use FireBug to identify the CSS ID of items for which you want to change the styling.
  • Use FireBug to try out your changes, making notes of what you've changed.
  • Edit the CSS file in your Webvanta site to match these changes.
  • In the checkout template page of your FoxyCart control panel, click the "cache your url" button and wait for it to complete.
  • Click the "update template" button on that same page in the FoxyCart control panel. (Don't forget this or nothing will change!)
  • Refresh the checkout page to see the results.
  • Rinse and repeat.

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.