WooCommerce 4.0 自定义结帐和电子邮件、管理员订单和感谢页面上的 ACF 字段值

Question

I'm having a hard time printing my custom field value to the email notifications, order admin and thank you page. I've browsed through StackOverflow, tried every single answer I found but unfortunately not working and I couldn't figure out the problem: I am trying to pass the value of the additional checkout field, it only prints the strong label with a blank value, and in the emails nothing shows, here is my code so far:

//new pickup location checkout field
add_action( 'woocommerce_before_order_notes', 'pickup_location_custom_checkout_field' );

function pickup_location_custom_checkout_field( $checkout ) {

    echo '<div><h3>' . __('Pick-up location') . '</h3>';

    woocommerce_form_field( 'pick_up_location', array(
        'type'          => 'text',
        'class'         => array('notes'),
        'label'         => __('<span style="color:red">[IMPORTANT]</span> Where should we meet you?'),
        'placeholder'   => __('Please enter your accomodation name or the nearest pick-up point if not accessible by car'),
        'required'     => true,
        ), $checkout->get_value( 'pick_up_location' ));

    echo '</div>';

}

// Save the pickup location data to the order meta
add_action( 'woocommerce_checkout_create_order', 'pickup_location_checkout_field_update_order_meta' );
function pickup_location_checkout_field_update_order_meta( $order_id ) {
    if (!empty($_POST['pick_up_location'])) {
        update_post_meta( $order_id, 'Pick-up location', sanitize_text_field( $_POST['pick_up_location']));
    }
}

// Display 'pickup location' on the order edit page (backend)
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'pickup_location_checkout_field_order_page', 10, 1 );
function pickup_location_checkout_field_order_page($order){
    global $post_id;
    $order = new WC_Order( $post_id );
    echo '<p><strong style="color:red">'.__('Pickup Location').':</strong> ' . get_post_meta($order->get_id(), '_pick_up_location', true ) . '</p>';

// Display 'pickup location' in "Order received" and "Order view" pages (frontend)
add_action( 'woocommerce_order_details_after_order_table', 'display_client_pickup_data_in_orders', 10 );
function display_client_pickup_data_in_orders( $order ) {
    global $post_id;
    $order = new WC_Order( $post_id );
    echo '<p><strong style="color:red">'.__('Pickup Location').':</strong> ' . get_post_meta($order->get_id(), '_pick_up_location', true ) . '</p>';
}

// Display 'pickup location data' in Email notifications
add_filter( 'woocommerce_email_order_meta_fields', 'display_client_pickup_data_in_emails', 10, 3 );

function display_client_pickup_data_in_emails( $fields, $sent_to_admin, $order ) {
    $fields['Pickup Location'] = array(
        'label' => __( 'Pickup Location' ),
        'value' => get_post_meta( $order->get_id(), 'pick_up_location', true ),
    );
    return $fields;
}

No matter what I try, the code only prints the label without any value from the checkout form. I know this question has been asked many times, but I tried every single answer for over 6 days without any luck. I also need to mention that I am using Woocommerce Bookings in this project. Thanks for your help

---

[Update:] Saving and displaying ACF field in the cart, admin order, customer order, checkout, and emails. Thanks to @7uc1f3r for the detailed explanation, his answer helped me to display the ACF field in a similar way, it is also based on This answer from @LoicTheAztec.

Displaying custom field on the product page above ATC:

// Displaying Pick-up time custom field value in single product page
add_action( 'woocommerce_before_add_to_cart_button', 'add_pickup_time_custom_field', 0 );
function add_pickup_time_custom_field() {
    global $product;
    //(compatibility with WC +3) 
    $product_id = method_exists( $product, 'get_id' ) ? $product->get_id() : $product->id;

    echo "<div class='pickup-time-atc'>";
    echo "<span>Pick-up time: </span>";
    echo get_field( 'pick_up_time', $product_id );
    echo "</div>";

    return true;
}

Displaying custom field value in single product page

Saving Pick-up time custom field into cart and session

// Saving Pick-up time custom field into cart and session
add_filter( 'woocommerce_add_cart_item_data', 'save_pickup_time_custom_field', 10, 2 );
function save_pickup_time_custom_field( $cart_item_data, $product_id ) {
    $custom_field_value = get_field( 'pick_up_time', $product_id, true );
    if( !empty( $custom_field_value ) ) 
    {
        $cart_item_data['pick_up_time'] = $custom_field_value;
    }
    return $cart_item_data;
}

Render Pick-up time custom field meta on cart and checkout

// Render Pick-up time meta on cart and checkout
add_filter( 'woocommerce_get_item_data', 'render_pickuptime_meta_on_cart_and_checkout', 10, 2 );
function render_pickuptime_meta_on_cart_and_checkout( $cart_data, $cart_item ) {
    $custom_items = array();
    // Woo 2.4.2 updates
    if( !empty( $cart_data ) ) {
        $custom_items = $cart_data;
    }
    if( isset( $cart_item['pick_up_time'] ) ) {
        $custom_items[] = array( "name" => "Pickup time", "value" => $cart_item['pick_up_time'] );
    }
    return $custom_items;
}

Render custom field meta on cart and checkout

Add custom field meta to order admin details

// Add pickup time custom field meta to order admin
add_action( 'woocommerce_checkout_create_order_line_item', 'pickuptime_checkout_create_order_line_item', 10, 4 );
function pickuptime_checkout_create_order_line_item( $item, $cart_item_key, $values, $order ) {
  if( isset( $values['pick_up_time'] ) ) {
    $item->add_meta_data(
      __( 'Pickup time' ),
      $values['pick_up_time'],
      true
    );
  }
}

Add custom field meta to order admin details

Add pickup time custom field meta to emails

// Add pickup time custom field meta to emails
add_filter( 'woocommerce_order_item_name', 'pickuptime_order_item_emails', 10, 2 );
function pickuptime_order_item_emails( $product_name, $item ) {
  if( isset( $item['pick_up_time'] ) ) {
    $product_name .= sprintf(
      '<ul"><li>%s: %s</li></ul>',
      __( '<span style="color:red !important">Pickup time</span>' ),
      esc_html( $item['pick_up_time'] )
     ); 
  }
  return $product_name;
}

Add pickup time custom field meta to emails

Please comment if you see any errors or ways to improve, Thanks.

Woocommerce 4.0.0 and Wordpress 5.3.2

Answer 1

Go through your code step by step

update_post_meta( $order_id, 'Pick-up location', sanitize_text_field( $_POST['pick_up_location']));

echo '<p><strong style="color:red">'.__('Pickup Location').':</strong> ' . get_post_meta($order->get_id(), '_pick_up_location', true ) . '</p>';

'value' => get_post_meta( $order->get_id(), 'pick_up_location', true ),

You use Pick-up location , _pick_up_location & pick_up_location as meta_key while this should be 3x the same value.

You also miss a closing tag by pickup_location_checkout_field_order_page function.

You also use wrong parameters with some hooks, etc..

Try this instead

//new pickup location checkout field
add_action( 'woocommerce_before_order_notes', 'pickup_location_custom_checkout_field' );
function pickup_location_custom_checkout_field( $checkout ) {
    echo '<div><h3>' . __('Pick-up location') . '</h3>';

    woocommerce_form_field( 'pick_up_location', array(
        'type'          => 'text',
        'class'         => array('notes'),
        'label'         => __('<span style="color:red">[IMPORTANT]</span> Where should we meet you?'),
        'placeholder'   => __('Please enter your accomodation name or the nearest pick-up point if not accessible by car'),
        'required'     => true,
        ), $checkout->get_value( 'pick_up_location' ));

    echo '</div>';
}

// Save the pickup location data to the order meta
add_action( 'woocommerce_checkout_create_order', 'pickup_location_checkout_field_update_order_meta', 10, 2 );
function pickup_location_checkout_field_update_order_meta( $order, $data ) {    
    if ( !empty( $_POST['pick_up_location']) ) {
        $order->update_meta_data( '_pick_up_location', sanitize_text_field( $_POST['pick_up_location'] ) ); // Order meta data
    }
}

// Display 'pickup location' on the order edit page (backend)
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'pickup_location_checkout_field_order_page', 10, 1 );
function pickup_location_checkout_field_order_page( $order ) {
    $pick_up_location = $order->get_meta( '_pick_up_location' );
    echo '<p><strong style="color:red">'.__('Pickup Location').':</strong> ' . $pick_up_location . '</p>';
}

// Display 'pickup location' in "Order received" and "Order view" pages (frontend)
add_action( 'woocommerce_order_details_after_order_table', 'display_client_pickup_data_in_orders', 10 );
function display_client_pickup_data_in_orders( $order ) {
    $pick_up_location = $order->get_meta( '_pick_up_location' );
    echo '<p><strong style="color:red">'.__('Pickup Location').':</strong> ' . $pick_up_location . '</p>';
}

// Display 'pickup location data' in Email notifications
add_filter( 'woocommerce_email_order_meta_fields', 'display_client_pickup_data_in_emails', 10, 3 );
function display_client_pickup_data_in_emails( $fields, $sent_to_admin, $order ) {
    $fields['Pickup Location'] = array(
        'label' => __( 'Pickup Location' ),
        'value' => $order->get_meta( '_pick_up_location' ),
    );
    return $fields;
}