October 15, 2009 wordpress, wp-e-commerce

Note: Since this post Instinct and I have been working on a new Checkout Page Back End system which will make this tutorial redundant, but knowing the amount of people that don’t upgrade due to mods in the code This will probably be hand for anyone running on 3.7 to 3.7.5 Fingers crossed the new system will be added in 3.7.6

Adding new text fields into your checkout page  is easy in Wp-e-Commerce, from the Settings>Checkout page you can easily modify the default text field labels. However you can’t actually add radio buttons, select boxes or even a check box! Well, not through the back end of WordPress that is.

Instinct are aware of these limitations, and I’m sure it’s not long till the page gets a good make over. Till then, here’s my first attempt at a tutorial on adding select boxes to your checkout page. The same theory could be used to add checkboxes and radio buttons.

For this example we are going to add a select box called occupation with four options:

• Student
• Self-Employed
• Private Sector
• Government

Ok, before we get started, I’m assuming you have a working knowledge in XHTML, PHP, and are familiar with the file structure of WordPress and the Wp-e-Commerce Plugin. I’ve used this technique on 3.7.5 It’s not a perfect solution, as you will see but offers a fix till the page gets its make over.

Step 1: Adding a new checkout form field

Web Page: Products>Settings>Checkout
So first thingwe need to do is in the back end of WordPress. Add a new checkout form field with a Name of ‘Occupation’ and save the settings.

Step 2: Add the new ‘Type’ to the checkout list

File: /wp-content/plugins/wp-e-commerce/wpsc-admin/includes/settings-pages/checkout.php
$form_types = Array("text", "email", "address", "city","country","delivery_address", "delivery_city", "delivery_country","textarea","heading","coupon", "selectbox");
Add “selectbox” into the array $form_types like above. This array gets looped through further down the page to find the name of the ‘Type’ value by appending  ‘TXT_WPSC_’ to the front. So in the language file we now have to add a new constant ‘TXT_WPSC_SELECTBOX’

File: /wp-content/plugins/wp-e-commerce/wpsc-admin/includes/settings-pages/checkout.php

Line: add this line to the top of the file.
define('TXT_WPSC_SELECTBOX', 'Select Box');


You should now be able to hit the refresh button and see the new ‘Type’ called Select Box in the drop down like so:

Use this new ‘Type’ for our ‘Occupation’ checkout form field.

Step 3: Adding “selectbox” to the switch

File: wp-content/plugins/trunk/wpsc-includes/checkout.class.php

Class: wpsc_checkout

Function: form_field()

Line: around 341
Inside the switch statement, add this piece of code:

case "selectbox":
$output = "<select id='".$this->form_element_id()."' name='collected_data[{$this->checkout_item->id}]'>
<option name='student'>Student</option>
<option name='selfemployed'>Self-Employed</option>
<option name='privatesector'>Private Sector</option>
<option name='government'>Government</option>
</select> ";
break;


All going to plan you should now have a new Occupation checkout form field with a select box! Do a test transaction, navigate to your purchase logs, the value should be displayed in the purchase log details page in the ‘Additional Checkout Fields’ section.