In this tutorial, I will show you how to add dynamic checkout fields based on cart quantity on woocommerce checkout page.
Let’s say you have a booking system on your woocommerce store and you want to capture the additional information at checkout if someone books for more than one quantity. For e.g., if you have Events/Workshops site and want to capture Name, Email, phone, and Address of everyone who attended your Event/Workshop and someone books for 3 quantity on your website then you need additional dynamic custom fields to capture the details of other 2 attendees. So if someone adds 3 quantity to the cart then the checkout page adds additional fields for other 2 attendees if 4 quantity added to the cart then it adds fields for other 3 attendees.
Within the following function, we will check how many quantities the user has in their cart and adds the additional fields to the checkout page if the quantity is more than 1. And save the field values to display it in the order in admin side.
Go to your functions.php file and add the following code at the end of the file or you can create your own plugin to add this function.
//Dynamic WooCommerce Checkout Custom Field
add_action( 'woocommerce_before_order_notes', 'person_details' );
function person_details($checkout) {
global $woocommerce;
$count = $woocommerce->cart->cart_contents_count;
$i = 1;
for($k=2; $k<= $count; $k++) {
$i++;
print ('<h3>Please enter details of attendee '.$i.'</h3>');
$product_id = $cart_item['product_id'];
$product_name = $cart_item['data']->post->post_title;
woocommerce_form_field( 'cstm_full_name'.$i, array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Full name'),
'placeholder' => __('Enter full name'),
),
$checkout->get_value( 'cstm_last_name'.$i ));
echo '<div class="clear"></div>';
woocommerce_form_field( 'cstm_phone'.$i, array(
'type' => 'text',
'class' => array('my-field-class form-row-first'),
'label' => __('Phone'),
'placeholder' => __('Enter phone number'),
),
$checkout->get_value( 'cstm_phone'.$i ));
woocommerce_form_field( 'cstm_email'.$i, array(
'type' => 'email',
'class' => array('my-field-class form-row-last'),
'label' => __('Email address'),
'placeholder' => __('Enter email address'),
),
$checkout->get_value( 'cstm_email'.$i ));
echo '<div class="clear"></div>';
woocommerce_form_field( 'cstm_address'.$i, array(
'type' => 'textarea',
'class' => array('my-field-class form-row-wide'),
'label' => __('Full address'),
'placeholder' => __('Enter full address'),
),
$checkout->get_value( 'cstm_address'.$i ));
}
}
/**
* Save value of fields
*/
add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');
function customise_checkout_field_update_order_meta($order_id)
{
global $woocommerce;
$count = $woocommerce->cart->cart_contents_count;
$i = 1;
for($k=2; $k<= $count; $k++) {
$i++;
if (!empty($_POST['cstm_full_name'.$i])) {
update_post_meta($order_id, 'Name of Attendee'.$i, sanitize_text_field($_POST['cstm_full_name'.$i]));
}
if (!empty($_POST['cstm_phone'.$i])) {
update_post_meta($order_id, 'Phone of Attendee'.$i, sanitize_text_field($_POST['cstm_phone'.$i]));
}
if (!empty($_POST['cstm_email'.$i])) {
update_post_meta($order_id, 'Email of Attendee'.$i, sanitize_text_field($_POST['cstm_email'.$i]));
}
if (!empty($_POST['cstm_address'.$i])) {
update_post_meta($order_id, 'Address of Attendee'.$i, sanitize_text_field($_POST['cstm_address'.$i]));
}
}
}
Dynamic custom fields on checkout page
Custom Fields value on order page in admin
Wasim
Latest posts by Wasim (see all)
- What is WooCommerce? Pros and Cons, Extensions and Comparison with others - August 12, 2018
- WooCommerce: Add Dynamic Custom Field on Checkout Based on Product Quantity in Cart - April 15, 2018
- Most Popular Blogging platforms to create a blog - February 20, 2016
Hi Wasim, how are you?
I used you code from post WooCommerce: Add Dynamic Custom Field on Checkout Based on Product Quantity in Cart and it works perfectly. However, how do i change the field from optional to required?
Thank you in advance!
Dear Wan,
Just add ‘required’ => true, to make a field required.
For Example:
woocommerce_form_field( 'cstm_full_name'.$i, array( 'type' => 'text', 'class' => array('my-field-class form-row-wide'), 'label' => __('Full name'), 'placeholder' => __('Enter full name'), 'required' => true, ), $checkout->get_value( 'cstm_last_name'.$i ));Hi Wasim,
Thank you so much for helping me! Will get back to you if there is anything. Wish you all the best in anything you do!
Wan Ahmad
You always welcome