Populate fields in the WooCommerce checkout after form submission

[physicoll]

Hello, I would like to know if it is possible, using pro forms, for some information from the form to automatically populate the fields in the WooCommerce checkout after form submission.

Currently, I use pro forms to add a product to the customer’s cart, and after this action, I redirect them to the checkout.

I want to streamline the process because, with pro forms, I already collect information such as full name and address. However, the user needs to re-enter everything in the WooCommerce checkout.

Is it possible to automatically populate the checkout fields that were defined in the pro forms?

[manc]

First thing that comes to mind are url parameters but been too long since I played with woo forms… I don’t think it’s very straightforward to set values into the fields (compared to a form of our own creation).

I’d probably try something like (example from an accommodation site):

1. On submission of your form, store values in localstorage
   
   

   

2. On load of checkout form page, fill the woo form with those values, using the classes woo gives its fields
   

   

const adultsField = document.querySelector('.booking__form__adults input');
const kidsField = document.querySelector('.booking__form__kids input');
const infantsField = document.querySelector('.booking__form__infants input');

const adultsValue = localStorage.getItem("adults");
const kidsValue = localStorage.getItem("kids");
const infantsValue = localStorage.getItem("infants");

adultsField.value = adultsValue
kidsField.value = kidsValue
infantsField.value = infantsValue

Give it a shot and lemme know if you get stuck