I am trying to add additional fields to the checkout page. I have setup my ACF fields and can display them on the checkout page (via acf_form), but when I place the order, the values I input in the field does not carry over to the created order.
This is the code I am using to display and update the fields:
add_action( 'woocommerce_after_order_notes', 'my_acf_checkout_display' );
function my_acf_checkout_display() {
acf_form(array('form' => false,'fields' => array('inseam')));
}
add_action( 'woocommerce_checkout_update_order_meta','acf_update_field_at_checkout' );
function acf_update_field_at_checkout( $order_id ) {
// acf custom field id
$my_field = 'inseam';
$acf_form_value = $_POST['acf'][$my_field];
update_field($my_field,$acf_form_value,$order_id);
}
Here you can see how I set up the fields:
Here's what my checkout page looks like:
And here is the "updated" field in the order (which remains empty):
When I hardcode the value to, say 12, then it works!
add_action( 'woocommerce_after_order_notes', 'my_acf_checkout_display' );
function my_acf_checkout_display() {
acf_form(array('form' => false,'fields' => array('inseam')));
}
add_action( 'woocommerce_checkout_update_order_meta','acf_update_field_at_checkout' );
function acf_update_field_at_checkout( $order_id ) {
// acf custom field id
$my_field = 'inseam';
$acf_form_value = 12;
//$acf_form_value = $_POST['acf'][$my_field];
update_field($my_field,$acf_form_value,$order_id);
}
Does anyone know why it's not populating the entered value for inseam to the order?
Thank you very much in advance!
You don't use the correct Field ID to be used with ACF.
So first in admin ACF Fields group click on "screen Options":
Then select to display the field "slug" and "Field Key" options.
Now you can get the correct "Field Key" to use in your code...
So here is the code I have tested, reproducing your settings (replace in the code the correct field Key for your "Inseam" field):
// Displaying ACF field in Checkout after order notes
add_action( 'woocommerce_after_order_notes', 'checkout_display_acf_field' );
function checkout_display_acf_field() {
$acf_field_key = 'field_648715e6451d1'; // Here set the field Key
acf_form( array(
'form' => false,
'fields' => array( $acf_field_key )
) );
}
add_action( 'woocommerce_checkout_update_order_meta', 'acf_update_checkout_field' );
function acf_update_checkout_field( $order_id ) {
$acf_field_key = 'field_648715e6451d1'; // Here set the field Key
if ( isset($_POST['acf'][$acf_field_key]) ) {
$acf_field_value = sanitize_text_field( $_POST['acf'][$acf_field_key] );
update_field( $acf_field_key, $acf_field_value, $order_id );
}
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
Now the field is displayed in The Admin on the order page with the submitted value.
Handling multiple Advanced custom fields in a clean way
First, I have set 2 fields in ACF Field group settings:
Then Here is the code:
add_action( 'woocommerce_after_order_notes', 'checkout_display_acf_field' );
function checkout_display_acf_field() {
$acf_field_key_arr = array ( // Here set the all required fields Keys in the array
'field_648715e6451d1',
'field_64873b2d5f57d'
);
// Loop through each field key in the array
foreach ( $acf_field_key_arr as $acf_field_key ) {
acf_form( array(
'form' => false,
'fields' => array( $acf_field_key )
) );
}
}
add_action( 'woocommerce_checkout_update_order_meta', 'acf_update_checkout_field' );
function acf_update_checkout_field( $order_id ) {
$acf_field_key_arr = array ( // Here set the all required fields Keys in the array
'field_648715e6451d1',
'field_64873b2d5f57d'
);
// Loop through each field key in the array
foreach ( $acf_field_key_arr as $acf_field_key ) {
if ( isset($_POST['acf'][$acf_field_key]) ) {
$acf_field_value = sanitize_text_field( $_POST['acf'][$acf_field_key] );
update_field( $acf_field_key, $acf_field_value, $order_id );
}
}
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
The display in checkout page: