Add File Upload Field to WooCommerce Checkout Page

In the secondary development of WooCommerce, when implementing custom functions, we often encounter the function of uploading files in the checkout page, in order to achieve this function, we need to add a custom file upload field in the checkout page. Although it seems to be just a simple field, but the realization of a lot of work, let's look at the specific code.

1, in the front-end to increase the file upload field and use Ajax upload

Adding a file upload form

In the code below, we have added the HTML form code needed to upload the file to the checkout form.

add_action( 'woocommerce_after_checkout_billing_form', 'misha_file_upload_field' );

function misha_file_upload_field() {

? >
		<div class="form-row form-row-wide">
			<input type="file" id="misha_file" name="misha_file" />
			<input type="hidden" name="misha_file_field" />
			<label for="misha_file"><a>Select a cool image</a></label>
			<div id="misha_filelist"></div>
		</div>
	&lt;?php

}

Use jQuery to handle user file uploads.

Then, we upload the image using the Ajax method, and immediately after the user selects the image, we upload the file to the backend via Ajax to facilitate the direct use of the uploaded image file URL at checkout.

jQuery( function( $ ) {

$( '#misha_file' ).change( function() {

if ( ! this.files.length ) {
$( '#misha_filelist' ).empty();
} else {

// we need only the only one for now, right?
const file = this.files[0];

$( '#misha_filelist' ).html( '<img src="' + URL.createObjectURL( file ) + '"><span>' + file.name + '</span>' );

const formData = new FormData();
formData.append( 'misha_file', file );

$.ajax({
url: wc_checkout_params.ajax_url + '?action=mishaupload',
type: 'POST',
data: formData,
enctype: 'multipart', data: formData, contentType: false,
enctype: 'multipart/form-data",
enctype: "multipart/form-data', processData: false,
success: function ( response ) {
$( 'input[name="misha_file_field"]' ).val( response );
}
}).

}

} );

} );

Receive and save front-end Ajax uploaded files on the server side

Save user uploaded images to the server

In the front-end through the Ajax upload, we need to save the uploaded file in the back-end processing, the following is to save the file sample code, save the file, we return the file URL to the front-end. If you need to further process the image, we can also return an image file ID to the front-end, the specific code can be searched on this site in the relevant documents, it will not repeat the list.

add_action( 'wp_ajax_mishaupload', 'misha_file_upload' );
add_action( 'wp_ajax_nopriv_mishaupload', 'misha_file_upload' );

function misha_file_upload(){

$upload_dir = wp_upload_dir();

if ( isset( $_FILES[ 'misha_file' ] ) {
$path = $upload_dir[ 'path' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );

if( move_uploaded_file( $_FILES[ 'misha_file' ][ 'tmp_name' ], $path ) ) {
echo $upload_dir[ 'url' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] ); }
}
}
die; }
}

By now we have completed the upload file form, file upload and save steps. In the next step, we need to save the uploaded file to the order information.

Save the uploaded file URL in the order and display it on the order details page

Save the uploaded file URL in the order information

This step is a bit easier, we just save the URL of the file sent by the checkout form directly into the metadata of the order.

add_action( 'woocommerce_checkout_update_order_meta', 'misha_save_what_we_added' );

function misha_save_what_we_added( $order_id ){

if( ! empty( $_POST[ 'misha_file_field' ] ) {
update_post_meta( $order_id, 'misha_file_field', sanitize_text_field( $_POST[ 'misha_file_field' ] ) );;
}

}

Display uploaded images in order information

We also need to display the image file in the order details in order to facilitate the order administrator's processing.

add_action( 'woocommerce_admin_order_data_after_order_details', 'misha_order_meta_general' );

function misha_order_meta_general( $order ){

$file = get_post_meta( $order->get_id(), 'misha_file_field', true );
if( $file ) {
echo '<img src="' . esc_url( $file ) . '" />';
	}

}

summarize

This article introduces the use of features such as Checkout Field Editor and other plug-ins can be achieved, but the file upload feature often need to buy a paid version only, in order to buy this feature to such a plug-in is slightly uneconomical, and the use of code to achieve a more free and better performance, there is a need for friends can refer to.