Add and manage Product custom upload field in Woocommerce 3

I am trying to add a file upload along with radio inputs in a custom woocommerce page; where all the products are showing in a list view.

The Custom Page CODE:

        <?php /*
    Template Name: Custom Woo Product List Page
    */ ?>
    <?php get_header();?>


          <div class="inn_page">


                <table id="wh_table" class="table table-hover" width="100%" cellspacing="0">

                <thead>
                  <tr>
                    <th></th>
                    <th>PRODUCT</th>
                    <th>Monogram letter or Message Box</th>
                    <th>PRICE</th>              
                    <th>Product Total Quantity</th>
                    <th></th>
                  </tr>
                  </thead>

                    <tbody>         
                    <?php
                        $args = array( 
                        'post_type' => array('product', 'product_variation'), 
                        'post_status' => array('publish'),
                        'posts_per_page' => -1,
                        'product_cat' => '', 
                        'post__in' => array( 178, 39, 180, 101, 182, 108, 184, 171, 872, 877, 206, 197, 1028, 330, 216, 451, 481, 478, 589 ),
                        'orderby' => 'post__in',
                        //'order'     => 'DESC',
                        'paged'   => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1 );
                        $wp_query = new WP_Query( $args );
                        while ( $wp_query->have_posts() ) : $wp_query->the_post(); 
                        global $product; 
                    ?>

                    <?php if ( $product->is_type( 'variable' ) ) 
                        {   
                            show_variable_products_list();              
                        }
                        else 
                        {
                    ?>

                    <tr class="product-<?php echo esc_attr( $product->id ); ?> variations_form" data-role="product"> 
                    <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" name="upload_form" id="upload_form" method="post" enctype='multipart/form-data'>

                        <a href="<?php echo get_permalink( $wp_query->post->ID ) ?>" title="<?php echo esc_attr($wp_query->post->post_title ? $wp_query->post->post_title : $wp_query->post->ID); ?>">

                            <td class="image">

                                <?php woocommerce_show_product_sale_flash( $post, $product ); ?>

                                <?php if (has_post_thumbnail( $wp_query->post->ID )) echo get_the_post_thumbnail($wp_query->post->ID, 'wh_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="150px" height="150px" />'; ?>
                            </td>

                            <td class="title">
                                <h3><?php the_title(); ?></h3>
                                <?php if ( ($product->get_id() == 178) || ($product->get_id() == 589) ) { ?>
                                    <b>Sterling Silver</b>
                                <?php } ?>                      
                            </td>

                            <td class="note">                           
                                <?php letter_note(); ?>
                                <?php msg_note(); ?>
                                <?php upload_logo(); ?>         
                            </td>

                            <td class="wh-price">
                                <span class="hiddenPrice"><?php echo $product->get_price_html() ?></span>
                                <span class="woocommerce-Price-amount ajaxPrice"><?php echo $product->get_price_html() ?></span>
                            </td>

                        </a>

                            <td class="quantity-field">
                                <?php woocommerce_quantity_input(); ?>
                            </td>

                            <td class="button-row">
                                <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
                                <input type="hidden" name="product_id" value="<?php echo esc_attr( $product->id ); ?>" />
                                <div class="wh-button">
                                <button type="submit" class="single_add_to_cart_button btn btn-primary button wh-btn"><span class="glyphicon glyphicon-tag"></span> ADD TO CART</button>
                                </div>


                            </td>


                    </form>

                    </tr>
                        <?php } ?>

                        <?php endwhile; ?>
                        </tbody>

                </table><!--/.products-->

            <?php wp_reset_query(); ?>              


          </div>



    <?php get_footer();?>

For variations to show in list view as different items/products in funtions.php

        <?php 

        //----------------------------- START PRODUCT LIST VIEW PAGE CODE ----------------------------------

        //-------------------------------------- Variations in Table List  ---------------------------

        function show_variable_products_list(){
            global $product, $post;

            $variations = find_valid_variations();

            asort($variations);

                    foreach ($variations as $key => $value) {
                        if( !$value['variation_is_visible'] ) continue; ?>

                    <?php 
                    $id_variation = $value['variation_id']          
                    ?>
                    <tr class="product-<?php echo esc_attr( $product->id ); ?> variation-<?php echo $value['variation_id']?> variations_form" data-role="product"> 
                      <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $available_variations ) ) ?>">  
                        <td class="image">
                            <?php echo '<img src="'.$value['image_src'].'" alt="'.$product->get_title().'-'.$value['variation_id'].'" width="150px" height="150px" />'; ?>
                        </td>

                        <td class="title">
                            <h3><?php the_title(); ?></h3><br />
                            <b class="var-name"><?php                   
                            foreach($value['attributes'] as $attr_name => $attr_value ) {
                            $attr_name = 'pa_setting';
                            $attr = get_term_by('slug', $attr_value, $attr_name);
                            $attr_value = $attr->name;
                            echo $attr_value, '  ';                 
                            } 
                            ?></b>
                            <?php echo $id_variation ?>
                        </td>

                        <td class="note">
                            <?php letter_note(); ?>
                            <?php msg_note(); ?>
                            <?php upload_logo(); ?>
                        </td>   
                        <td class="wh-price">
                            <span class="hiddenPrice"><?php echo $value['price_html'];?></span>
                            <span class="woocommerce-Price-amount ajaxPrice"><?php echo $value['price_html'];?></span>
                        </td>


                            <?php if( $value['is_in_stock'] ) { ?>


                            <td class="quantity-field">
                                <?php woocommerce_quantity_input(); ?>                      
                            </td>

                            <td class="button-row">
                                <?php
                                if(!empty($value['attributes'])){
                                    foreach ($value['attributes'] as $attr_key => $attr_value) {
                                    ?>
                                    <input type="hidden" name="<?php echo $attr_key?>" value="<?php echo $attr_value?>">
                                    <?php
                                    }
                                }
                                ?>
                                <div class="wh-button">
                                <button type="submit" class="single_add_to_cart_button btn btn-primary button wh-btn"><span class="glyphicon glyphicon-tag"></span> ADD TO CART</button>
                                </div>
                                <input type="hidden" name="variation_id" class="variation_id" value="<?php echo $value['variation_id']?>" />
                                <input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
                                <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $post->ID ); ?>" />

                            <?php } else { ?>
                                <p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
                            <?php } ?>

                            </td>
                            </form>

                            </tr>

                    <?php 
                    } 
                    } 

                    ?>


        <?php

        function find_valid_variations() {
            global $product;
        if ( $product->get_id() == 330 ) {


            $variations = $product->get_available_variations();
            //$attributes = $product->get_attributes();
            $new_variants = array();

          /* Show only the variations listed below */
            foreach( $variations as $variation ) {
         if ( $variation["variation_id"] == 971 || $variation["variation_id"] == 958 || $variation["variation_id"] == 945 || $variation["variation_id"] == 422 || $variation["variation_id"] == 412 || $variation["variation_id"] == 386 || $variation["variation_id"] == 358 ) {

                $valid = true; 

                if( $valid )
                    $new_variants[] = $variation;
            }       
            }


        }
        elseif ( $product->get_id() == 216 ) {


            $variations = $product->get_available_variations();
            $new_variants = array();


            foreach( $variations as $variation ) {
         if ( $variation["variation_id"] == 1010 || $variation["variation_id"] == 997 || $variation["variation_id"] == 984 || $variation["variation_id"] == 321 || $variation["variation_id"] == 295 || $variation["variation_id"] == 267 || $variation["variation_id"] == 237 ) {

                $valid = true; 

                if( $valid )
                    $new_variants[] = $variation;
            }       
            }


        }

        else {


            $variations = $product->get_available_variations();
            $attributes = $product->get_attributes();
            $new_variants = array();


            foreach( $variations as $variation ) {

                $valid = true; 
                foreach( $attributes as $slug => $args ) {
                    if( array_key_exists("attribute_$slug", $variation['attributes']) && !empty($variation['attributes']["attribute_$slug"]) ) {
                        // Exists

                    } else {

                        $valid = false; 

                        foreach( explode( '|', $attributes[$slug]['value']) as $attribute ) {
                            $attribute = trim( $attribute );
                            $new_variant = $variation;
                            $new_variant['attributes']["attribute_$slug"] = $attribute;
                            $new_variants[] = $new_variant;

                        }

                    }
                }

                if( $valid )
                    $new_variants[] = $variation;

            }
        } 
            return $new_variants;
        }           

        add_filter( 'woocommerce_variable_add_to_cart', 'show_variable_products_list', 10, 2 );


        ?>

I am able to add the radio values to cart & order but not able to do anything with file upload.

Please take a look:

    add_action("woocommerce_before_add_to_cart_button", "upload_logo", 9);
    function upload_logo(){
        ?>
        <div>
            <p>Want to add Logo? <input type="checkbox" id="showHide"  onclick="myFunction()"><b>Tick</b></p>

    <p id="hiddenInputs" style="display:none">
            <label for="radio_field">
                Where you want the logo?
                <input type="radio" name="radio_field" checked="checked" value="Front Side"> Front Side
                <input type="radio" name="radio_field" value="Back Side"> Back Side
                <input type="radio" name="radio_field" value="Both Side"> Both Side
            </label> <br />

            <label for="file_field">
                Upload logo: <input type="file" name="file_field" value="">
            </label> <br />
    </p>
    </div>


    <script>
    function myFunction() {
        var checkboxToShowInputs = document.getElementById("showHide");
        var showInputs = document.getElementById("hiddenInputs");
        if (checkboxToShowInputs.checked == true){
            showInputs.style.display = "block";
        } else {
           showInputs.style.display = "none";
        }
    }
    </script>

        <?php
    }

    /* Add File custom data to the cart item */

    function file_upload_add_cart_item_data( $cart_item, $product_id ){

        if( isset( $_POST['file_field'] ) ) {
            $cart_item['logo_upload'] = $_POST['file_field'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_add_cart_item_data', 'file_upload_add_cart_item_data', 10, 2 );

     /* Add Radio custom data to the cart item */
     // Stores the custom field value in Cart object
    add_action( 'woocommerce_add_cart_item_data', 'save_custom_product_field_data', 10, 2 );
    function save_custom_product_field_data( $cart_item, $product_id ) {
        if( isset( $_REQUEST['radio_field'] ) ) {
            $cart_item[ 'side_radio' ] = $_REQUEST['radio_field'];
            // below statement make sure every add to cart action as unique line item
            $cart_item['unique_key'] = md5( microtime().rand() );
            WC()->session->set( 'my_order_data', $_REQUEST['radio_field'] );
        }
        return $cart_item;
    }


    /* Load File cart data from session */

    function file_upload_get_cart_item_from_session( $cart_item, $values ) {

        if ( isset( $values['logo_upload'] ) ){
            $cart_item['logo_upload'] = $values['logo_upload'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_get_cart_item_from_session', 'file_upload_get_cart_item_from_session', 20, 2 );


    /* Load Radio cart data from session */

    function radio_get_cart_item_from_session( $cart_item, $values ) {

        if ( isset( $values['side_radio'] ) ){
            $cart_item['side_radio'] = $values['side_radio'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_get_cart_item_from_session', 'radio_get_cart_item_from_session', 20, 2 );


    /* Add File meta to order item */

    function file_upload_add_order_item_meta( $item_id, $values ) {

        if ( ! empty( $values['logo_upload'] ) ) {
            woocommerce_add_order_item_meta( $item_id, 'logo_upload', $values['logo_upload'] );           
        }
    }
    add_action( 'woocommerce_add_order_item_meta', 'file_upload_add_order_item_meta', 10, 2 );

    /* Add Radio meta to order item */

    function radio_add_order_item_meta( $item_id, $values ) {

        if ( ! empty( $values['side_radio'] ) ) {
            woocommerce_add_order_item_meta( $item_id, 'side_radio', $values['side_radio'] );           
        }
    }
    add_action( 'woocommerce_add_order_item_meta', 'radio_add_order_item_meta', 10, 2 );


    /* Get File item data to display in cart */

    function file_upload_get_item_data( $other_data, $cart_item ) {

        if ( ! empty ( $cart_item['logo_upload'] ) ){

            $other_data[] = array(
                'name' => __( 'Logo ', 'woocommerce' ),
                'value' =>  $cart_item['logo_upload']
            );

        }

        return $other_data;

    }
    add_filter( 'woocommerce_get_item_data', 'file_upload_get_item_data', 10, 2 );

    /* Get Radio item data to display in cart */

    function radio_get_item_data( $other_data, $cart_item ) {

        if ( ! empty ( $cart_item['side_radio'] ) ){

            $other_data[] = array(
                'name' => __( 'Side ', 'woocommerce' ),
                'value' =>  $cart_item['side_radio']
            );

        }

        return $other_data;

    }
    add_filter( 'woocommerce_get_item_data', 'radio_get_item_data', 10, 2 );


    /* Show File field in order overview */

    function file_upload_order_item_product( $cart_item, $order_item ){

        if( isset( $order_item['logo_upload'] ) ){
            $cart_item_meta['logo_upload'] = $order_item['logo_upload'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_order_item_product', 'file_upload_order_item_product', 10, 2 );


    /* Show Radio field in order overview */

    function radio_order_item_product( $cart_item, $order_item ){

        if( isset( $order_item['side_radio'] ) ){
            $cart_item_meta['side_radio'] = $order_item['side_radio'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_order_item_product', 'radio_order_item_product', 10, 2 );


    /* Add the File Upload field to order emails */ 

    function file_upload_email_order_meta_fields( $fields ) { 
        $fields['custom_field'] = __( 'Logo ', 'woocommerce' ); 
        return $fields; 
    } 
    add_filter('woocommerce_email_order_meta_fields', 'file_upload_email_order_meta_fields');

    /* Add the Radio field to order emails */ 

    function radio_email_order_meta_fields( $fields ) { 
        $fields['custom_field'] = __( 'Side ', 'woocommerce' ); 
        return $fields; 
    } 
    add_filter('woocommerce_email_order_meta_fields', 'radio_email_order_meta_fields');

Here’s the AJAX PHP

        function ajax_add_to_cart_script() {
      wp_enqueue_script( 'add-to-cart-wh_ajax', plugins_url() . '/wh-page-ajax-add-to-cart/js/add-to-cart-wh.js', array('jquery'), '', true );

    }
    add_action( 'wp_enqueue_scripts', 'ajax_add_to_cart_script',99 );

    add_action( 'wp_ajax_woocommerce_add_to_cart_wh_sh', 'woocommerce_add_to_cart_wh_sh_callback' );
    add_action( 'wp_ajax_nopriv_woocommerce_add_to_cart_wh_sh', 'woocommerce_add_to_cart_wh_sh_callback' );

    function woocommerce_add_to_cart_wh_sh_callback() {

        ob_start();

        $product_id = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $_POST['product_id'] ) );
        $quantity = empty( $_POST['quantity'] ) ? 1 : apply_filters( 'woocommerce_stock_amount', $_POST['quantity'] );
        $variation_id = $_POST['variation_id'];
        $variation  = $_POST['variation'];          
        $letter = $_POST['_letter'];
        $message = $_POST['_message'];              
        $radio = $_POST['radio_field'];     
        //$file = $_POST['file_field'];
        $file = $_FILES['id_proof'];;       
        $passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $quantity, $cart_item_data, $letter, $message, $radio, $file );

        if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation, $letter, $message, $radio, $file ) ) {
            do_action( 'woocommerce_ajax_added_to_cart', $product_id );
            if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) {
                wc_add_to_cart_message( $product_id );
            }

            // Return fragments
            WC_AJAX::get_refreshed_fragments();
        }  else {
            $this->json_headers();

            // If there was an error adding to the cart, redirect to the product page to show any errors
            $data = array(
                'error' => true,
                'product_url' => apply_filters( 'woocommerce_cart_redirect_after_error', get_permalink( $product_id ), $product_id )
                );
            echo json_encode( $data );
        }
        die();
    }  

And here’s the edited js

         /* AJAX Add to Cart Button */
    jQuery(function($) {

        // wc_add_to_cart_params is required to continue, ensure the object exists
        if (typeof wc_add_to_cart_params === 'undefined')
            return false;

        // Ajax add to cart
        $(document).on('click', '.variations_form .wh-btn', function(e) {

            e.preventDefault();

            $variation_form = $(this).closest('.variations_form');
            var var_id = $variation_form.find('input[name=variation_id]').val();
            var product_id = $variation_form.find('input[name=product_id]').val();
            var quantity = $variation_form.find('input[name=quantity]').val();              
            var letter = $variation_form.find('input[name=_wholesale_letter]').val();
            var message = $variation_form.find('input[name=_wholesale_message]').val();
            var rad = $variation_form.find('input[name=radio_field]:checked').val();
            var file = $variation_form.find('input[name=file_field]').val();
            //var file = $variation_form.find('input[name=file_field]').files[0].path;

            //attributes = [];
            $('.ajaxerrors').remove();
            var item = {},
                check = true;

            variations = $variation_form.find('select[name^=attribute]');

            /* Updated code to work with radio button - mantish - WC Variations Radio Buttons - 8manos */
            if (!variations.length) {
                variations = $variation_form.find('[name^=attribute]:checked');
            }

            /* Backup Code for getting input variable */
            if (!variations.length) {
                variations = $variation_form.find('input[name^=attribute]');
            }

            variations.each(function() {

                var $this = $(this),
                    attributeName = $this.attr('name'),
                    attributevalue = $this.val(),
                    index,
                    attributeTaxName;

                $this.removeClass('has-error');

                if (attributevalue.length === 0) {
                    index = attributeName.lastIndexOf('_');
                    attributeTaxName = attributeName.substring(index + 1);

                    $this
                        //.css( 'border', '1px solid red' )
                        .addClass('required has-error')
                        //.addClass( 'barizi-class' )
                        .before('<div class="ajaxerrors"><p>OH No Please select ' + attributeTaxName + '</p></div>')

                    //check = false;
                } else {
                    item[attributeName] = attributevalue;
                }


            });

            if (!check) {
                return false;
            }

            /* Validate for All the input Message field */

            var itemMessages = {},
                checkmsg = true;
            messages = $variation_form.find('input[name=_message');


            messages.each(function() {

                var $this = $(this),
                    attributeName = $this.attr('name'),
                    attributevalue = $this.val(),
                    index,
                    attributeTaxName;

                $this.removeClass('required wh-error');

                if (attributevalue.length === 0) {
                    index = attributeName.lastIndexOf('_');
                    attributeTaxName = attributeName.substring(index + 1);

                    $this
                        .removeClass('wh-input')
                        .addClass('required wh-error')                              
                        .before('<div class="ajaxerrors"><p><span style="font-weight: bold;">REQUIRED!</span> Please Type Some Text or Number.</p></div>')

                    //checkmsg = false;
                } else {
                    itemMessages[attributeName] = attributevalue;
                    $this.addClass('wh-input');
                }


            });

            if (!checkmsg) {
                return false;
            }


            /* Validate One Letter Input Field */
            var itemLetter = {},
                checkltr = true;
            letterOne = $variation_form.find('input[name=_letter]');


            letterOne.each(function() {

                var $this = $(this),
                    attributeName = $this.attr('name'),
                    attributevalue = $this.val(),
                    index,
                    attributeTaxName;

                $this.removeClass('required wh-error');

                if (attributevalue.length === 0) {
                    index = attributeName.lastIndexOf('_');
                    attributeTaxName = attributeName.substring(index + 1);

                    $this
                       /* .css({
                        'border': '2px solid #a94442', 
                        'box-shadow': 'inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483'                            
                        })*/
                        .removeClass('wh-input')
                        .addClass('required wh-error')                          
                        .before('<div class="ajaxerrors"><p><span style="font-weight: bold;">REQUIRED!</span> Please Type 1 Letter or Number.</p></div>')

                    //checkmsg = false;
                } else {
                    itemLetter[attributeName] = attributevalue;
                    $this.addClass('wh-input');
                }


            });

            if (!checkltr) {
                return false;
            }


           //item = JSON.stringify(item);
            //alert(item);
            //return false;

            // AJAX add to cart request

            var $thisbutton = $(this);

            if ($thisbutton.is('.variations_form .wh-btn')) {

                $thisbutton.removeClass('added');
                $thisbutton.addClass('loading');
                $thisbutton.attr("disabled", "disabled");


                var data = {
                    action: 'woocommerce_add_to_cart_wh_sh',
                    product_id: product_id,
                    quantity: quantity,
                    variation_id: var_id,
                    variation: item,                        
                    _letter: letter,
                    _message: message,
                    radio_field: rad,
            file_field: file
                };

                $.each($thisbutton.data(), function(key, value) {
                    data[key] = value;
                });

                // Trigger event
                $('body').trigger('adding_to_cart', [$thisbutton, data]);

                // Ajax action
                $.post(wc_add_to_cart_params.ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'), data, function(response) {

                        if (!response) {
                            return;
                        }

                        var this_page = window.location.toString();

                        this_page = this_page.replace('add-to-cart', 'added-to-cart');

                        if (response.error && response.product_url) {
                            window.location = response.product_url;
                            return;
                        }

                        if (wc_add_to_cart_params.cart_redirect_after_add === 'yes') {

                            window.location = wc_add_to_cart_params.cart_url;
                            return;

                        } else {

                            $thisbutton.removeClass('loading');

                            var fragments = response.fragments;
                            var cart_hash = response.cart_hash;

                            // Block fragments class
                            if (fragments) {
                                $.each(fragments, function(key) {
                                    $(key).addClass('updating');
                                });
                            }

                            // Block widgets and fragments
                            $('.shop_table.cart, .updating, .cart_totals').fadeTo('400', '0.6').block({
                                message: null,
                                overlayCSS: {
                                    opacity: 0.6
                                }
                            });

                            // Changes button classes
                            $thisbutton.addClass('added');

                            // View cart text
                            /*  if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( '.added_to_cart' ).size() === 0 ) {
                                    $thisbutton.after( ' <a href="' + wc_add_to_cart_params.cart_url + '" class="added_to_cart wc-forward" title="' +
                                        wc_add_to_cart_params.i18n_view_cart + '">' + wc_add_to_cart_params.i18n_view_cart + '</a>' );
                                }

                            // View cart text
                            if (!wc_add_to_cart_params.is_cart && $variation_form.find('.added_to_cart').length === 0) {
                                $thisbutton.after(' <a href="' + wc_add_to_cart_params.cart_url + '" class="added_to_cart wc-forward" title="' +
                                    wc_add_to_cart_params.i18n_view_cart + '">' + wc_add_to_cart_params.i18n_view_cart + '</a>');
                            }
                             */

                            // Replace fragments
                            if (fragments) {
                                $.each(fragments, function(key, value) {
                                    $(key).replaceWith(value);
                                });
                            }

                            // Unblock
                            $('.widget_shopping_cart, .updating').stop(true).css('opacity', '1').unblock();

                            // Cart page elements
                            $('.shop_table.cart').load(this_page + ' .shop_table.cart:eq(0) > *', function() {

                                $('.shop_table.cart').stop(true).css('opacity', '1').unblock();

                                $(document.body).trigger('cart_page_refreshed');
                            });

                            $('.cart_totals').load(this_page + ' .cart_totals:eq(0) > *', function() {
                                $('.cart_totals').stop(true).css('opacity', '1').unblock();
                            });

                            // Trigger event so themes can refresh other areas
                            $(document.body).trigger('added_to_cart', [fragments, cart_hash, $thisbutton]);
                        }
                    })
                    .done(function(response) {
                        if ($variation_form.find('.added_to_cart').length === 0) {
                            $thisbutton.after(' <a href="' + wc_add_to_cart_params.cart_url + '" class="added_to_cart wc-forward" title="' +
                                wc_add_to_cart_params.i18n_view_cart + '">' + wc_add_to_cart_params.i18n_view_cart + '</a>');
                        }

                        $thisbutton.removeAttr("disabled", "disabled");                         
                        $thisbutton.removeClass('failed')

                        var quantity = $variation_form.find('input[name=quantity]').val("1");
                        var letter = $variation_form.find('input[name=_letter]').val("");
                        var message = $variation_form.find('input[name=_message]').val("");
                        var rad = $variation_form.find('input[name=radio_field]').val("Front Side");
                    })
                    .fail(function(response) {
                        setTimeout(function() {
                            $thisbutton.removeClass('loading');
                            $thisbutton.removeAttr("disabled", "disabled");
                        }, 2000);
                        $thisbutton.addClass('failed');
                    })

                return false;

            } else {
                return true;
            }

        });

    });

This page is only accessible to certain users, so it has different input fields, price than the single product page counterpart. Client don’t like this page to be refreshed so I had to add AJAX, with the little knowledge I have. Now it’s getting more complicated so please help me out.

Answer

Update 2021 – Still works perfectly on last WooCommerce version (5.1.x).

In your actual code, there is many mistakes as:

• Repetitive hooked functions using the same hook, that need to be merged instead.
• Deprecated hooked functions.
• Not useful or not needed hooked functions.
• Wrong or missing code related to file upload

Here is your revisited code (much more lighter, compact and complete):

// Display additional product fields (+ jQuery code)
add_action( 'woocommerce_before_add_to_cart_button', 'display_additional_product_fields', 9 );
function display_additional_product_fields(){
    // Array of radio button options
    $options = array( __("Front Side"), __("Back Side"), __("Both Sides") );
    // Temporary styles
    ?>
    <style>
    .upload-logo a.button { padding: .3em .75em !important; }
    .upload-logo a.button.on { background-color: #CC0000 !important; color: #FFFFFF !important; }
    .upload-logo p span { display:inline-block; padding:0 8px 0 4px; }
    </style><?php
    // Html output ?>
    <div class="upload-logo">
        <p><strong><?php _e( "Add a Logo option"); ?>: </strong>
            <a href="#" class="button"><?php _e( "Yes" ); ?></a>
            <input type="hidden" name="upload_active" value="">
        </p>
        <div id="hidden-inputs" style="display:none">
            <p><label for="radio_field"><?php

            echo __( "Where you want the logo?" ) . ' <br>';

            // Loop though each $options array
            foreach( $options as $key => $option ) {
                $atts = $key == 0 ? 'name="side_field" checked="checked"' : 'name="side_field"'; ?>
                <input type="radio" <?php echo $atts; ?> value="<?php echo $option; ?>"><span> <?php echo $option . '</span> ';
            }
            ?>
            </label></p>
            <p><label for="file_field"><?php echo __("Upload logo") . ': '; ?>
                <input type='file' name='image' accept='image/*'>
            </label></p>
        </div>
    </div><?php
    // Javascript (jQuery) ?>
    <script type="text/javascript">
    jQuery( function($){
        var a = '.upload-logo',         b = a+' a.button',
            c = a+' #hidden-inputs',    d = a+' input[type=hidden]';

        $(b).click(function(e){
            e.preventDefault();
            if( ! $(this).hasClass('on') ) {
                $(this).addClass('on');
                $(c).show();
                $(d).val('1');
            } else {
                $(this).removeClass('on');
                $(c).hide('fast');
                $(d).val('');
            }
        });
    });
    </script>
    <?php
}

// @ ===> Manage the file upload <=== @
// Add custom fields data as the cart item custom data 
add_filter( 'woocommerce_add_cart_item_data', 'add_custom_fields_data_as_custom_cart_item_data', 10, 2 );
function add_custom_fields_data_as_custom_cart_item_data( $cart_item, $product_id ){
    if( isset($_POST['upload_active']) && $_POST['upload_active'] && isset($_FILES['image']) ) {
        $upload = wp_upload_bits( $_FILES['image']['name'], null, file_get_contents( $_FILES['image']['tmp_name'] ) );

        $filetype = wp_check_filetype( basename( $upload['file'] ), null );

        $upload_dir = wp_upload_dir();

        $upl_base_url = is_ssl() ? str_replace('http://', 'https://', $upload_dir['baseurl']) : $upload_dir['baseurl'];

        $base_name = basename( $upload['file'] );

        $cart_item['custom_file'] = array(
            'guid'      => $upl_base_url .'/'. _wp_relative_upload_path( $upload['file'] ),
            'file_type' => $filetype['type'],
            'file_name' => $base_name,
            'title'     => preg_replace('/.[^.]+$/', '', $base_name ),
            'side'      => isset( $_POST['side_field'] ) ? sanitize_text_field( $_POST['side_field'] ) : '',
            'key'       => md5( microtime().rand() ),
        );
    }
    return $cart_item;
}

// Display custom cart item data in cart
add_filter( 'woocommerce_get_item_data', 'display_custom_item_data', 10, 2 );
function display_custom_item_data( $cart_item_data, $cart_item ) {
    if ( isset( $cart_item['custom_file']['title'] ) ){
        $cart_item_data[] = array(
            'name' => __( 'Logo', 'woocommerce' ),
            'value' =>  $cart_item['custom_file']['title']
        );
    }

    if ( isset( $cart_item['custom_file']['side'] ) ){
        $cart_item_data[] = array(
            'name' => __( 'Side', 'woocommerce' ),
            'value' =>  $cart_item['custom_file']['side']
        );
    }
    return $cart_item_data;
}

// Save and display Logo data in orders and email notifications (everywhere)
add_action( 'woocommerce_checkout_create_order_line_item', 'custom_field_update_order_item_meta', 20, 4 );
function custom_field_update_order_item_meta( $item, $cart_item_key, $values, $order ) {
    if ( isset( $values['custom_file'] ) ){
        $item->update_meta_data( __('Logo'),  $values['custom_file']['title'] );
        $item->update_meta_data( __('Side'),  $values['custom_file']['side'] );
        $item->update_meta_data( '_logo_file_data',  $values['custom_file'] );
    }
}

// Display a linked button + the link of the logo file in backend
add_action( 'woocommerce_after_order_itemmeta', 'backend_logo_link_after_order_itemmeta', 20, 3 );
function backend_logo_link_after_order_itemmeta( $item_id, $item, $product ) {
    // Only in backend for order line items (avoiding errors)
    if( is_admin() && $item->is_type('line_item') && $item->get_meta('_logo_file_data') ){
        $file_data = $item->get_meta( '_logo_file_data' );
        echo '<p><a href="'.$file_data['guid'].'" target="_blank" class="button">'.__("Open Logo") . '</a></p>';
        echo '<p>Link: <textarea type="text" class="input-text" readonly>'.$file_data['guid'].'</textarea></p>';
    }
}

This code goes in functions.php file of your active child theme (or active theme).

Tested in Woocommerce version 3.4.x and working with normal products (from all types)

---

Frontend: orders display (and email notifications):

Backend (Admin): Display on orders edit pages: