Sandesh

September 26, 2020

Pre-Populate Checkout Form Fields Using URL Parameters

Personalization and automation play an essential role in the e-commerce industry. The less friction you have in the checkout process, the more revenue you will have in your pocket.

I use CartFlows plugin to create a hassle-free checkout process.

My personal experience is that I am too lazy to fill out the online forms and left the filling process many times.

The idea here is to reduce the friction. If you have the customer information, then pre-populate it for users.

In this article, I am going to show you how to pre-populate checkout fields using URL parameters. In different terms, You can say that pre-fill checkout form fields by passing query strings in URL.

First, check this sample URL with a query string

https://YourSite.com/checkout-page-url?fname=John&lname=Wick&email=admin@wp-demo.test

In the above url, fname, lname and email are fields name.

Step 1 – You need to add the below code snippet to get the field name and value from URL query string

/**
 * @snippet       WooCommerce/CartFlows - Pre-Populate Checkout Form Fields Using URL Parameters
 * @author        Sandesh Jangam
 * @donate $9     https://www.paypal.me/SandeshJangam/9
 */

// Hook into WooCommerce checkout fields.
add_filter( 'woocommerce_checkout_fields' , 'ts_prefill_checkout_fields');
 
function ts_prefill_checkout_fields ( $checkout_fields ) {
 
 	/**
 	 * Query string fields to populate in checkout,
 	 *
 	 * Ex.
 	 * 'fname' => is query parameter name,
 	 * 'billing_first_name' => matching field of checkout 
	 *
	 * You can add other fields in the same way
 	 */
 	$query_fields = array(
 		
 		'fname' => 'billing_first_name',
 		'lname' => 'billing_last_name',
 		'email' => 'billing_email',
 	);

 	// We will loop the above array to check if the field exists in URL or not.
 	// If it exists we will add it to the checkout field's default value

 	foreach ( $query_fields as $field_slug => $match_field ) {
 		
 		// Check if it is in URL or not, An not empty.
 		if ( isset( $_GET[ $field_slug ] ) && ! empty( $_GET[ $field_slug ] ) ) {

 			// Sanitize the value and store it in a variable.
 			$field_value = sanitize_text_field( $_GET[ $field_slug ] );

 			// Check if match field exists in checkout form or not.
			if( isset( $checkout_fields['billing'][ $match_field ] ) ){

				// Assign the pre-fill value to checkout field
				$checkout_fields['billing'][ $match_field ]['default'] = $field_value;
			}
 		}		
 	}


 	// Return the fields
	return $checkout_fields;
}

Step 2 – Generated a URL to pre-populate field.

In order to generate a URL. First, you need your checkout page URL, your field name, and your values. As shown in the above sample URL, we are going add First name – fname, Last Name – lname, and Email – email.

In the same way, you can update the above code snippet and your fields. Matching fields of checkout are the field that is defined in WooCommerce. At the end of the doc, I will give you a list of all billing fields.

So, our URL according to the above fields name is – https://YourSite.com/checkout-page-url?fname=John&lname=Wick&email=admin@wp-demo.test

That’s it. Go and check in the browser. Fields will be filled automatically.

List of Billing Fields

  • billing_email
  • billing_first_name
  • billing_last_name
  • billing_phone
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_company

PS. If user is already logged in then filed’s value will be fetched from user’s account directly insted of URL query sting.

Where to add custom PHP code?

Add the above PHP code at the end of to your child theme’s functions.php. There are many ways to add custom PHP code ( custom functionality ) to WordPress / WooCommerce website. Read this article for more information

Why this code is not working?

If you face any issue with the above code, then please let me know in the comment. I will be happy to review the code, and If it is working for you, then show me some love in the comment section.

Thank you in advance…!

Sharing is Caring!
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp

About the Author

Sandesh Jangam is Developer, WooCommerce Expert, and Podcaster. He is working as a WordPress developer since 2014 and helping people with this blog. He loves to travel ancient temples, chilling at the beach and reading books

Join 1,000+ Subscribers

Get exclusive access to WordPress, WooCommerce tips, articles, tutorials right in your inbox.​

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp

Leave a Comment

Your email address will not be published. Required fields are marked *

Become a WooCommerce Customization Expert and Earn More​

Get an early access notification right in your inbox.

Learn More or Register Now >>>