Adding conditional field into Your Order section

Hello,

I am trying to achieve two things:

1. Add in an additional field on the checkout in the hook woocommerce_review_order_after_shipping
2. Make the above field conditional based on shipping method i.e. if someone selects the pick up in class option (originally local pick up field) then the above field appears, and then make that field compulsory if selected

The website is: https://www.clarestoys.com (live but not indexed)

So far i have not been able to achieve step 1 successfully.

I can easily hook in and add in the new table row and any random field using:

add_action( 'woocommerce_review_order_after_shipping', 'pick_up_class_location');

function pick_up_class_location() { echo "<tr><th></th><td>";

//code for new html from + field in here.

echo '</td></tr>';
}

but this is obviously not connected to the product and will not show in the admin area.

I have also tried moving the order_notes field but this didn’t work.

I am currently sufficing with a field that sits in the _after_order_notes hook as detailed on the Woo commerce Page But this is not suitable and is likely to be missed.

Php for additional field as copied from above link:
I liked to think it would be as simple as changing the action hook from woocommerce_after_order_notes to woocommerce_review_order_after_shipping – but it isn’t.

//Add the field to the checkout
 
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field">';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'textarea',
        'class'         => array('my-field-class form-row-wide'),
        'placeholder'   => __('Please enter your class venue and day'),
        'label' => __('<p style="text-decoration: underline; font-weight: 600;">If you select pick up in class from the shipping options you must fill in the below box</p>'),
        ), $checkout->get_value( 'my_field_name' ));

    echo '</div>';

}

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_name'] ) ) {
        update_post_meta( $order_id, 'Pick up location', sanitize_text_field( $_POST['my_field_name'] ) );
    }
}

/**
 * Display field value on the order edit page
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Pick up location').':</strong> ' . get_post_meta( $order->id, 'My Field', true ) . '</p>';
}

The results i get vary between the whole page not loading with just those 3 wordpress dots or a loading wheel on the whole ‘your order’ column.

I get the feeling that i am not understanding the loop in the ‘you order’ section that is calculating the shipping price and this is causing it to break.

Is it easiest/possible to move the order notes into the woocommerce_review_order_after_shipping hook (bearing in mind order_notes is currently unset) or is it easiest to use the new field as detailed and how would i go about this?

I only have 8-12 weeks of PHP under my belt, so i apologise if this is really basic stuff but any help would be greatly appreciated.

Alex