Blank checkout page when adding a custom checkout field in Woocommerce - php

Question

In WooCommerce checkout page, I'm adding a custom field and everything works fine if I use woocommerce_after_checkout_billing_form hook or woocommerce_before_checkout_form hook.
The problem is that I need the field to be above the Billing Details title but when I use woocommerce_checkout_before_customer_details hook everything disappears (even the sidebar payment panel), only my custom field title is visible.
My code:
// Create Custom checkout Field
add_action('woocommerce_checkout_before_customer_details', 'create_custom_field');
function create_custom_field($checkout) {
global $woocommerce;
$cart = $woocommerce->cart->get_cart();
foreach($cart as $key => $value)
{
$bespoke = $woocommerce->cart->get_item_data($value);
if (strpos($bespoke, 'yes') !== false) {
echo '<div id="customise_checkout_field"><h3>' . __('Bespoke Details') . '</h3>';
woocommerce_form_field('bespoke_field', array(
'type' => 'textarea',
'class' => array('my-field-class form-row-wide'),
'label' => __('Tell us about your idea') ,
'placeholder' => __('Please explain what you want as detailed as possible...') ,
'required' => true,),
$checkout->get_value('bespoke_field'));
echo '</div>';
}
}
}
Any thoughts? Your guidance is truly appreciated.

Answer 1

$checkout doesn't exist for this hook, and then it's not defined. So It makes a blank page (an error). But you can use WC()->checkout as replacement.
The WC_cart method get_item_data() is deprecated and wc_get_formatted_cart_item_data() function replace it since Woocommerce version 3.3.
Also global $woocommerce and $woocommerce->cart are now replaced with simply WC()->cart.
Try this instead:
// Add a Custom checkout Field
add_action( 'woocommerce_checkout_before_customer_details', 'add_custom_checkout_field' );
function add_custom_checkout_field() {
// Loop through cart items
foreach( WC()->cart->get_cart() as $cart_item ) {
$bespoke = wc_get_formatted_cart_item_data( $cart_item );
if ( strpos($bespoke, 'yes') !== false ) {
echo '<div id="customise_checkout_field">';
echo '<h3>' . __('Bespoke Details') . '</h3>';
woocommerce_form_field('bespoke_field', array(
'type' => 'textarea',
'class' => array('my-field-class form-row-wide'),
'label' => __( "Tell us about your idea", "woocommerce" ),
'placeholder' => __( "Please explain what you want as detailed as possible...", "woocommerce" ),
'required' => true,
), WC()->checkout->get_value('bespoke_field') );
echo '</div>';
}
}
}
Code goes in function.php file of the active child theme (or active theme). Tested and works.