Adding Custom Fields to the Easy Digital Downloads Checkout

Easy Digital Downloads is a plugin I have been building for selling digital downloads through WordPress. It is completely free and very flexible. Due to a large number of actions hooks and filters, there are many ways that you can customize the plugin to best suit your needs. This tutorial will walk you through the process adding custom fields to the checkout screen, and also storing the information received through the fields.

The fields we will be adding are additional “personal info” fields. We will add one for the buyer’s phone number, and one for the buyer’s company name. These two fields can be substituted for any kind of field you want as they are just examples. The final result will look like this: (not the phone and company fields are what we are adding):

Easy Digital Downloads incorporates a lot of actions hooks and filters that we can use for modifying the plugin’s behavior. I’ve talked about this topic quite a bit in my Plugin Thoughts, and it’s this system that we are going to be working with now.

Each of the modifications we make will be done either with the add_action() function, or with the add_filter() function.

Adding the Fields to the Checkout Form

The fields for phone number and company name are nothing more than plain HTML input fields. We can output the fields by tying into the “edd_purchase_form_user_info” hook, like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
// output our custom field HTML
function pippin_edd_custom_checkout_fields() {
	?>
	<p>
		<input class="edd-input required" type="text" name="edd_phone" id="edd-phone" placeholder="<?php _e('Phone Number', 'edd'); ?>" value=""/>
		<label class="edd-label" for="edd-phone"><?php _e('Phone Number', 'edd'); ?></label>
	</p>
	<p>
		<input class="edd-input" type="text" name="edd_company" id="edd-company" placeholder="<?php _e('Company name', 'edd'); ?>" value=""/>
		<label class="edd-label" for="edd-company"><?php _e('Company Name', 'edd'); ?></label>
	</p>	
	<?php
}
add_action('edd_purchase_form_user_info', 'pippin_edd_custom_checkout_fields');

Each field gets a name and ID attribute. We also set the HTML5 placeholder for each field; this acts as the default text for the field, which is displayed before the user inputs any information. For the phone number field, I have also given a class called “required”. Doing this makes the jQuery validation for the checkout page recognize this field as a required field, and the checkout form will not be able to be submitted until it has been filled out.

Our checkout form will not look like the screenshot above.

Validating the New Checkout Fields

When the checkout form is submitted, we need to validate the data submitted and make sure everything is okay. We have added “required” class to the phone number, which takes care of the jQuery validation, but that doesn’t apply if the site owner has disabled jQuery validation in the Easy Digital Downloads settings, so we need to do some server side validation as well with PHP.

Since only our Phone Number field is required, we will only validate the data for that field. EDD (Easy Digital Downloads) has an action hook called “edd_checkout_error_checks”, which we can use to intercept the checkout form data before it is sent off to the payment gateway. Our simple validation function looks like this:

1
2
3
4
5
6
7
8
9

<?php
// check for errors with out custom fields
function pippin_edd_validate_custom_fields($data) {
	if(!isset($data['edd_phone']) || $data['edd_phone'] == '') {
		// check for a phone number
		edd_set_error( 'invalid_phone', __('You must provide your phone number.', 'pippin_edd') );
	}
}
add_action('edd_checkout_error_checks', 'pippin_edd_validate_custom_fields');

This function simply checks to make sure that the phone number field has been sent and that it’s not blank. If the field is not present, or it is blank, then register an error using the edd_set_error() function. Doing so causes the checkout process to return back to the checkout page, instead of moving on to the payment gateway. It also causes an error to be displayed on the checkout page.

With this validation function, the purchase will not be able to be completed until the phone number field has been filled out.

Storing Our Custom Field Data

In order for the custom fields to be useful, we need to store them somewhere. There are several methods we could use for storing the data. For example, we could store it in the customer’s user meta, but in this case, it will be better if we store the phone and company fields in the payment meta. Doing so will allow us to go to the Payment History page, click “View Order Details” for a purchase, and then see the Phone and Company fields displayed along with the buyer’s other Personal Info, as shown in the screenshot below:

The code needed to store our phone and company fields in the payment meta is quite simple. For adding and validating the fields, we used action hooks, now, however, we are going to use a filter provided by EDD. This filter will take the additional fields and add them to the payment meta generated when a purchase is made. The filter is called “edd_payment_meta”, and the function looks like this:

1
2
3
4
5
6
7
8

<?php
// store the custom field data in the payment meta
function pippin_edd_store_custom_fields($payment_meta) {
	$payment_meta['phone'] = isset($_POST['edd_phone']) ? $_POST['edd_phone'] : '';
	$payment_meta['company'] = isset($_POST['edd_company']) ? $_POST['edd_company'] : '';
	return $payment_meta;
}
add_filter('edd_payment_meta', 'pippin_edd_store_custom_fields');

When a payment is made now, the phone and company fields will be stored. The only thing we need to do now is display the stored values. We are going to add the additional fields to the “View Order Details” popup that is shown in the screenshot above.

Displaying the Custom Payment Meta

To show the custom phone and company meta, we use another action hook called “edd_payment_personal_details_list”. This hook is quite simple:

1
2
3
4
5
6
7
8
9
10
11

<?php
// show the custom fields in the "View Order Details" popup
function pippin_edd_purchase_details($payment_meta, $user_info) {
	$phone = isset($payment_meta['phone']) ? $payment_meta['phone'] : 'none';
	$company = isset($payment_meta['company']) ? $payment_meta['company'] : 'none';	
	?>
	<li><?php echo __('Phone:', 'pippin') . ' ' . $phone; ?></li>
	<li><?php echo __('Company:', 'pippin') . ' ' . $company; ?></li>
	<?php
}
add_action('edd_payment_personal_details_list', 'pippin_edd_purchase_details', 10, 2);

The functions checks to make sure that both fields are present (and sets them each to “none” if not present), and then outputs them as list items.

That’s it! We have now successfully added custom fields to the checkout form for Easy Digital Downloads, stored the field values, and displayed them in the admin.

This only touches on the customizations you can make to Easy Digital Downloads. While not complete, checkout the Developer’s API for additional reference.