Autofill checkout inputs based on custom post type match / query

Question

I have recently come across a problem of which I has me a little confused. Within my WP setup, I have a basic WooCommerce solution, (For the theme I am using the Timber starter theme to make use of twig templating). As well as this, I am using a custom post type named 'sites'. Sites represent a list of construction sites, not to be confused with websites.

The Sites CPT has X Advanced custom fields 'fields', as well as the standard 'title', the ACF fields being:

PO Number (po_number) -> String -> required / not null
Job Number (job_number) -> String -> required / not null
Street address (street_address) -> String -> required / not null
Office Name (office_name) -> String -> required / not null
Town (town) -> String -> required / not null
County (county) -> String -> optional / nullable
Post Code (post_code) -> String -> required / not null

So most of the above from the admins side are required, so we know the data will be present.

The issue I am having is that, when on the checkout, we would like fields matching the above, as well as an email address field (required) and a contact number field (required).

The purpose being that, when a customer types in their 'Job Number' and hits a 'Find' button, a query is kicked off matching this Job Number against the Job Number field on the Custom Post Type, and if a match is found, the other fields from that record are filled into the rest of the checkout form.

In terms of trying out a solution, the only thing I could thing of was a database query to match and return the data, but I am fairly new to WP as a whole and there seem to be concepts such as Ajax having a specific use case in WP, the DB structure seems quite complex, so I thought I would ask here and see if anyone had a solution.

As of yet, there is no code to show otherwise I would, and in terms of the WooCommerce templates, they are all standard and have not been modified.

Just to summarise, the goal is:

Customer goes to checkout -> Enters their already known Job Number and hits 'Find' -> Some sort of query is ran to match that Job Number against a CPT ACF field of Job Number -> If a match is found, return those fields and fill the Woo Checkout fields in with that data.

Any ideas solution or suggestions are very welcome, thank you in advance.

_“so I thought I would ask here and see if anyone had a solution”_ - that is too broad a way of asking. Yes, this will need a database query to find the matching post first of all - so you will have to go read up on how stuff like that is done. Most database reading is usually done using the [`WP_Query`](https://developer.wordpress.org/reference/classes/wp_query/) class in WP, so start with that maybe. — 04FS, Nov 21 '19 at 10:29
_“the DB structure seems quite complex”_ - also a place where you need to make an effort, and find resources to familiarize yourself with it then. Start with https://wp-staging.com/docs/the-wordpress-database-structure/ maybe on that one. ACF stores its field values in the wp_postmeta table, that is basically a “flat” key-value storage. How to query for certain meta values, is also explained in the documentation of WP_Query. — 04FS, Nov 21 '19 at 10:29
Thank you for the quick response, I am currently reading up on wp_query as we speak. I suppose the actual query it's self is less of the issue, more so being how to implement the 'get input value' pass it to my wp_query, get the response and place the corresponding data into the right fields part. But I do appreciate it's abit too broad a question without example. As I said, I am reading up on wp_query now. — Ashley Redman BSc, Nov 21 '19 at 10:34
Making an AJAX request to send the input from the checkout page to the backend is probably a good idea here. https://codex.wordpress.org/AJAX_in_Plugins has a pretty good explanation of how to work with AJAX in WP. — 04FS, Nov 21 '19 at 10:39

score 2 · Answer 1 · answered Nov 28 '19 at 06:21

If you only have a couple of hundred 'sites' then just localize a script.

https://developer.wordpress.org/reference/functions/wp_localize_script/

Then, when you have that CDATA variable available in the DOM, you can just use jQuery/javascript to find the matching job and fill in the form fields. From there, I recommend using the WC documentation and their hooks/filters to add fields to the checkout AND validate those fields on checkout. Here is a link that explains that process as well.

https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

Bottom line? If you have a few hundred fields just localize the data in a variable that can be read on the front end. If many more, then you may want to use AJAX. But anything fewer than a couple hundred will actually be less resources used on the server and faster load.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You can do whatever you want using custom code as well as some of your best logic as below I'm going to explaining to you.

Follow the logic/step below.

Create custom field checkout

first of creating a custom field on checkout page woo-commerce : custom field

https://wisdmlabs.com/blog/add-custom-fields-woocommerce-checkout-page/

and also don't forget to add check button

create ajax call ( WP-ajax ) and set-up on a button.

Create ajax call by clicking on a button and get user detail by job id

You have to write code to get the user data from the job_number on the ajax function that is the returning user that matches the ajax function. ( you )

get the user by user meta ( you have to store job_number with user meta to get user detail by job_number) get_user_meta : you will get user id from user meta.

as you will get user id you can easily find the user woocommerce user meta that seems shipping address, billing address, etc. and you suppose to return those data with your custom ajax call and set in the field of woocommerce checkout using jquery.

I hope you getting an idea from my logic and steps.

Thanks.

Autofill checkout inputs based on custom post type match / query

2 Answers2