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.

  1. Michael Martin

    Very nice tutorial Pippin, it’s awesome to see that Easy Digital Downloads can be extended so far with this sort of functionality. It especially rocks how even the server-side validation has been covered here, love it! 🙂

    • Pippin

      Thanks Michael! If you ever get the chance to give the plugin a real trial run (or real run), I’d love to hear your feedback.

  2. Frank

    Hey,

    really love your plugin but like some other folks, i’d really love to add a few fields for address so I can also sell physical products. i’ve tried the above, but i just cant figure out where all this stuff goes in the code.

    any other tutorials you have on this? or possible the PHP files with these edits included?

    thanks!

    • Pippin

      The code needs to go inside of a custom plugin. The easiest way to create a custom plugin is to install the “Pluginception” plugin.

  3. Frank

    ok. i have that, but i keep getting errors when i try to save the new plugin. “This plugin has been deactivated because your changes resulted in a fatal error.” Would it be possible for you to email me a text file with the code how it should appear in the pluginception window? (the above example is fine) THANKS

    • Pippin

      Paste the code that you have into snippi.com and share the link.

  4. Frank

    I appreciate all your help. now it says:

    Parse error: syntax error, unexpected T_DNUMBER in /home2/executeo/public_html/crisiscenterpro/wp-content/plugins/custom-edd/custom-edd.php on line 22

    • Pippin

      What’s on line 22? The code I’m looking at definitely doesn’t have an error on that line.

  5. Frank

    Got it! Thank you for all your help. And once again, awesome plugin!

    • Pippin

      Glad to help!

  6. Johannes

    I realy like your plugin! everything works fine!

    How to display the costom fields in the order email?

    • Pippin

      I can point you in the right direction if you’re really comfortable with PHP.

  7. Johannes

    got it working for me just with the Order Details view. Thanks!

  8. Gerry

    Thanks for the quick sample custom field snippet!

    Can you point me to how to update the custom field I added. For example if I put a hidden field called ‘status’ on a purchase with a default value “order-processing”. When the purchase has been processed, I’d like to update that field ‘status’ to “complete”.

    My PHP level is Intermediate…

    Thanks in advance!

    Gerry

    • Pippin

      I saw you posted this on easydigitaldownloads.com as well. I’ll answer you there.

  9. Gerry

    Can you send me the link to your response. I can’t get in easydigitaldownloads.com blog page 🙁

    • Pippin

      Hmm, seems I lost track of it 😛

      Do you want to update the field automatically, or update it manually from the Edit Payment screen?

    • Gerry

      Manually…perhaps from a form submission i.e. text input, then submit.

      Thanks in advance.

    • Pippin

      Sorry for the slow reply. How comfortable are you with PHP and WP coding? Just need to gauge the level of instructions you’re in need of.

  10. Gerry

    I’m understand intermediate PHP. WP has good documentation that I follow. I understand this post. I can summon WP variables that are documented. Not sure if that gives you a good enough info to guage my coding skills. THanks in advance!

    • Pippin

      Sorry but I won’t be able to provide a complete example for you, but here’s a guideline to get you started:

      1. You will add new edit fields to the Edit Payment screen using the `edd_edit_payment_bottom` hook. Simply echo your fields here.

      2. You will check if your fields are present on save by checking the $_POST data during the `edd_update_edited_purchase` hook.

      Does that help?

  11. Ghulam Mustafa

    Dear Pippin

    i am creating the extension of EDD for my own.

    I have created the checkbox Under Download Prices at admin panel.
    but when i checked the checkbox it works fine and when i unchecked the checkbox Its still showing checked.

    kindly let me know how i can get the user input in my function?

    Thank you

    • Pippin

      Can you show me how you added the checkbox and how you’re saving it?

  12. singh

    Can we send this checkout page on mail ? customize fields can be add now but i am not getting way to mail these information to admin.

    Thanks

  13. Tony

    Hello,

    I have followed all your instruction and it seems to be working fine.

    However, the custom fields appear twice in my checkout page. One time under “Personal Info”, and again under “Create an Account”.

    Any way to have it only under “Personal Info”?

  14. Mike

    I copy and pasted this code into a custom plugin http://snippi.com/s/4621fos

    1. It is adding the fields (address 1, address2, City, Zip, Country, State) to the optional register area of the site.

    2. The Address1, City, Zip, Country, State are required fields but when all are filled out it still says to add an address.

    You can see the errors at http://shopsle.com/checkout/ (if you don’t see any products just go to the homepage and add the one product that is posted).

    • Mike

      Thanks for that… I will be honest I am not a master in PHP i have an understanding of it but not a ton.

      With no custom plugin there are two sections “Personal Info” and the optional “Create an Account”.

      Is there an easy way to create a third section devoted just to Shipping Information?

    • Mike

      I bought the simple shipping and activated the plugin. Can I have it set up to always have an option for shipping price that can be used in the FES dashboard (not wp admin)?

    • Pippin

      Not at this time. We are working on integrating it with FES, however. Hopefully the two will support each other sometime in April.

  15. Christina

    Hi there — this is a fabulous tutorial. I followed it and all is working well, except the validation. The phone # keeps saying it’s invalid when it’s not. Same with any other custom fields I set to check for validation. Not being a programming expert, I’m not sure what’s wrong.

    This is my code:

    function tcwf_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.’, ‘tcwf_edd’) );
    }
    if(!isset($data[‘edd_address’]) || $data[‘edd_address’] == ”) {
    // check for a valid address
    edd_set_error( ‘invalid_address’, __(‘You must provide a valid address.’, ‘tcwf_edd’) );
    }
    }

    • Pippin

      Could you post the complete code to pastebin.com and then share the link?

    • Christina

      Thanks! I placed your pastebin code in the file and the checkout validation worked fine. And thanks again for providing this code for the public in the first place. Much appreciation!

  16. Spencer Labadie

    Awesome tutorial! Once again you’ve made my life easier!

  17. vignesh

    I have added custom plugin for this code link ( http://snippi.com/s/4621fos ). but In checkout page doesnot show mobile number field. please help me.

  18. Santos

    Hi,
    Great tutorial. It works fine.
    I would like to know if is possible to insert a upload image field as well.
    Is there a tutorial?
    Thanks,
    Santos

  19. Jon Smith

    Hi Pippin, this is great, thanks. How would I include the phone / company data in the notification email that goes to admin after order is submitted?

    Thanks!

Comments are closed.