How to Create a Multi-page Checkout for WP E-commerce

This tutorial is a couple of years old and so results may vary. I have no idea if it still works, as I don’t use WP E-commerce anymore. In fact, I strongly recommend against it. With every new release the team behind it’s development just shows more and more that they don’t care about the very WordPress coding standards and respect for their existing user-base they boast about. In short, WP E-commerce is an inferior product and should never be used on any production site. Currently, I use and recommend Woocommerce.

WP E-commerce is slowly, finally, getting it’s act together. Yes, it’s a free plugin, and I understand the general consensus of “if it’s free, don’t expect support” or “it’s free, so it’s not our problem if it doesn’t work.” But for a company touting itself as creating “the best e-commerce…software ever” and claiming that WP’s creator, Matt Mullenweg, is personally backing their product, you’d think some documentation and better support (even if paid, or more aptly, especially if paid), would be soon to follow. Alas, this is not a rant about the pros and cons of the plugin, but a walkthrough on how to change the checkout form process from one page to three.

The Scenario

Currently, WP E-commerce presents the checkout form as one long page, which includes:

  • Cart Contents, including the ability to update quantities and remove products altogether.
  • Shipping Calculator
  • Login / Registration screen or Login Confirmation screen (ie, Logged in as Nathan. Not you? Logout.)
  • Shipping & Billing Details
  • Credit Card Details (optional, depending on what your setup is)
  • Purchase Button (optional, depending on what your setup is)

That’s a lot of info on one page. We want to break that down into three more manageable pages, which will include:

  1. Page 1:
    • Cart Contents
    • Shipping Calculator
  2. Page 2:
    • Login / Registration
    • Or login confirmation screen
  3. Page 3:
    • Shipping & Billing Details
    • Credit Card Details and/or Purchase Button (I use PayPal Payments Standard or Express for most of my WP E-commerce sites, so there is no entering of credit card details on the site).

Getting Started

Firstly, you should be familiar with how WP E-commerce’s template files work, and should have already moved them over to your theme’s folder. Secondly, this tutorial specifically deals with how I have my shopping cart setup, which is to use Shipping and one of the PayPal options (but not PayPal Payments Pro). You should also relatively know what you’re doing with template tags, HTML and CSS in general, and the ability to copy / paste code as instructed. Also, I’m running WP E-commerce 3.8.6. Depending on your version, some of my exact references may not be equal to your line numbers, but you should be able to follow along anyway.

The Template File: wpsc-shopping_cart_page.php

Firstly, the template file that controls how this all displays is wpsc-shopping_cart_page.php. I’ll assume you’ve already copied this over to your theme’s folder and are familiar with updating WordPress theme files. What we want to do here is to break the page up into three DIVs, which will essentially create the basic structure for our “three page” layout. Below is a little example to show more or less what we’re doing with the page. Do not copy / paste this, it’s just for reference. Full templates are linked to below.

<?php global $wpsc_cart, $wpdb... ?>
<div id="checkout_page_container">
<h2>Checkout</h2>
<div id="checkout-step-one">
Our Shopping Cart Contents Table and Shipping Area
<div class="registration-nav form-navigation">
<p class="green button"><a href="#" onclick="showdiv('checkout-step-two'); hidediv('checkout-step-one');" class="registration-next">Next</a></p>
</div>
</div>
<div id="checkout-step-two">
Login and registration form, or login confirmation screen if already logged in
<div class="registration-nav form-navigation">
<p class="green button"><a href="#" onclick="showdiv('checkout-step-three'); hidediv('checkout-step-two');" class="registration-next">Next</a></p>
</div>
</div>
<div id="checkout-step-three">
Billing, Shipping Details and Purchase Button 
<div class="registration-nav form-navigation">
<p class="gray button"><a href="#" onclick="showdiv('checkout-step-two'); hidediv('checkout-step-three');" class="registration-prev">Back</a></p>
</div>
</div>

As mentioned previously, I’m working with WP E-commerce 3.8.6’s template files. You can download the original wpsc-shopping_cart_page.php template from 3.8.6 here if you’d like to use it for reference (in case you have a different version). Here is the complete modified version as well (to use this, remove the MODIFIED and .txt parts from the filename, and save the file to your theme’s directory), but I’d recommend following the steps below vs. just copy / pasting, as your version may have significant changes depending on which version of the plugin you’re running.

Okay, let’s dive in.

Near line 15, where it says <h3><?php _e(‘Please review your order’, ‘wpsc’); ?></h3>, add the following just below that. This opens the DIV that will act as our Page 1 container.

<div id="checkout-step-one">

Near line 209, before <?php do_action(‘wpsc_before_form_of_shopping_cart’); ?>, add the following code (this adds navigational tools so that the user can move from Page 1 to Page 2):


<div class="registration-nav form-navigation">
<p class="next-button button"><a class="registration-next" onclick="showdiv('checkout-step-two'); hidediv('checkout-step-one');" href="#"> </div>

Near line 224, before the line <?php if ( wpsc_show_user_login_form() && !is_user_logged_in() ): ?>we’ll close the Page 1 container DIV, and open Page 2’s container DIV.

</div>
<div id="checkout-step-two">

Near line 234, we’ll add an alert in case the user enters incorrect login / password information on the login form (we’ll also be modifying how this form works so that an incorrect login doesn’t take the user to the wp-login.php page.


<p class="alert">Incorrect username or password.</p>

Near line 275, just after the <?php endif; // closes user login form line, we’ll add our page navigation again, this time to allow the user to move from Page 2 to Page 3.

<div class="registration-nav form-navigation">
<p class="back-button button"><a href="" class="registration-prev">Back</a></p>
<p class="next-button button"><a href="#" onclick="showdiv('checkout-step-three'); hidediv('checkout-step-two');" class="registration-next">Next</a></p>
</div>
</div><div id="checkout-step-three">

Near line 505, just below the <div class=’wpsc_make_purchase’> line, we’ll add our page navigation to allow users to go from Page 3 back to Page 2.

<div class="registration-nav form-navigation">
<p class="gray button"><a href="#" onclick="showdiv('checkout-step-two'); hidediv('checkout-step-three');" class="registration-prev">Back</a></p>
</div>

Near line 521, just above the </div><!–close checkout_page_container–> code, we’ll close our Page 3 DIV container.

</div>

Okay so that gives us our modified page template, but doesn’t actually do anything or make many changes to the template (other than adding in some navigational buttons which at the moment won’t work, yet).

The CSS

Next, we’ll need to add some CSS. Open your style.css file from your theme’s folder and add the following:

#checkout-step-one, #checkout-step-two, .wpsc_registration_form .alert {display:none;}
.alert {color:red;}

In reality, you’ll likely want more CSS than that, but that is the absolute bottom line of what we need to hide the DIVs until they’re ready to be shown (which we’ll use Javascript to handle). For the navigation buttons, there are a few CSS classes you can use to style those as well, including .button which can be used to style all of them, .back-button and .next-button which can be used to style just the back or next buttons.

The Javascript

We’ll need a bit of Javascript to create the hidediv() and showdiv() functions, which are used to show and hide the pages.

function hidediv(d) { document.getElementById(d).style.display = "none"; }
function showdiv(d) { document.getElementById(d).style.display = "block"; }

Add this to a file called javascript.js and put it in a folder js in your theme’s template folder.

Edit Your Functions.php File

By default, if a user enters incorrect information to WP E-commerce’s login form (Page 2 of our new form), they are taken to the /wp-login.php page. If they enter the correct credentials, they’re taken back to the form, which is fine if you’ve got all the info one page, but since we’re breaking it into three, that means they’ll be taken back to Page 1 of our form (the order summary and shipping page). We can fix that. Open your functions.php file and paste the following:

add_action( 'wp_login_failed', 'my_front_end_login_fail' ); // hook failed login
function my_front_end_login_fail( $username ) {
$referrer = $_SERVER['HTTP_REFERER']; // where did the post submission come from?
// if there's a valid referrer, and it's not the default log-in screen
if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
wp_redirect( $referrer . '?tab=login-form' ); // let's append some information (tab=login-form) to the URL for the theme to use
exit;
}
}

This prevents the redirect to the /wp-login.php page, but also adds a URL string we can use later to force Page 2 to show up instead of Page 1, when they’re redirected to this page.

Edit Your Header.php File

Finally, add the following to your theme’s header.php file:

$checkoutpageurl = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; }
if ($checkoutpageurl == 'http://yoursite.com/products-page/checkout/?tab=login-form') { ?>
<style type="text/css">
#checkout-step-one {display:none;}
#checkout-step-two, .wpsc_registration_form .alert {display:block;}
</style>

What this does is checks for the URL of the page, and if it is equal to yoursite.com/products-page/checkout/?tab=login-form, then it puts some CSS into the header of your page. Be sure to change yoursite.com with whatever your site’s domain name is, of course.

The Results

What you’re left with is the appearance of a three page checkout process for the user, which can make digesting all of this information at once a little easier to swallow. Questions or comments? Feel free to just below.

Up Next: If Our Universe were Run By Internet Explorer