Question 189917 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Display checkout ACF Advanced Custom Fields and save the value in WooCommerce

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:
Field Setup

Here’s what my checkout page looks like:
Checkout Page

And here is the "updated" field in the order (which remains empty):

Backend Order Fields

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!

Tags:

2

Answers


  1. 0

    You don’t use the correct Field ID to be used with ACF.

    So first in admin ACF Fields group click on "screen Options":

    enter image description here

    Then select to display the field "slug" and "Field Key" options.

    enter image description here

    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:

    enter image description here

    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:

    enter image description here

    Login or Signup to reply.
  2. 0

    Thanks for the answer!
    I have some text fields and 2 fields to upload files at the checkout.
    These field’s values I’m saving to user’s meta.
    But how to upload the files on checkout?

    here’s my code:

    add_action( 'woocommerce_before_order_notes', 'checkout_display_acf_field' ); 
function checkout_display_acf_field() { 
    if( is_user_logged_in() ) { 
        // If user is logged in, do not display the fields and return early.
        return;
    }

    $acf_field_key_arr = array ( // Here set the all required fields Keys in the array
'field_6490a0b6dcebf',
'field_6490a14adcec0',
'field_6490a156dcec1'
    );
    
    // 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_user_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_6490a0b6dcebf',
'field_6490a14adcec0',
'field_6490a156dcec1'
    );

    // Get the user id
    $user_id = get_current_user_id();
    
    // 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_user_meta( $user_id, $acf_field_key, $acf_field_value ); 
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search