Creating multiple file upload fields on the checkout page of a WooCommerce site allows merchants to collect additional information from customers, which can be particularly useful for custom orders, personalized products, or when specific documentation is required.
This capability enhances the flexibility and functionality of WooCommerce, enabling a more tailored shopping experience. Implementing this feature involves custom coding to integrate the upload fields into the WooCommerce checkout process, handle the file uploads securely, and attach the uploaded files or their information to the customer’s order for reference and fulfillment purposes.
<?php
add_action( 'woocommerce_after_checkout_billing_form', 'cxc_checkout_page_file_upload_field' );
function cxc_checkout_page_file_upload_field() {
?>
<style type="text/css">
#cxc_file { border: 1px solid #ddd; padding: 10px; width: 100%; line-height: 30px; font-size: 13px; }
</style>
<div class="form-row form-row-wide">
<input type="file" id="cxc_file" name="cxc_file[]" multiple />
<input type="hidden" name="cxc_file_field" />
<div id="cxc_filelist"></div>
</div>
<?php
}
?><?php
add_action('wp_ajax_cxc_checkout_file_upload', 'cxc_file_upload');
add_action('wp_ajax_nopriv_cxc_checkout_file_upload', 'cxc_file_upload');
function cxc_file_upload() {
$upload_dir = wp_upload_dir();
$image_urls = array();
if (isset($_FILES['cxc_files'])) {
$allowed_types = array('image/jpeg', 'image/png', 'image/gif');
foreach ($_FILES['cxc_files']['name'] as $key => $value) {
$file_type = $_FILES['cxc_files']['type'][$key];
// Check if the file type is empty or not allowed
if (empty($file_type) || !in_array($file_type, $allowed_types)) {
wp_send_json(array('type' => 'error', 'message' => 'Invalid file type.'));
}
$path = $upload_dir['path'] . '/' . basename($value);
if (move_uploaded_file($_FILES['cxc_files']['tmp_name'][$key], $path)) {
$image_url = $upload_dir['url'] . '/' . basename($value);
$image_urls[] = $image_url;
} else {
wp_send_json(array('type' => 'error', 'message' => 'Error uploading files.'));
}
}
wp_send_json(array('type' => 'success', 'image_urls' => $image_urls));
} else {
wp_send_json(array('type' => 'error', 'message' => 'Files not found.'));
}
}
?><?php
add_action( 'wp_footer', 'cxc_add_custom_js_checkout_image_upload' );
function cxc_add_custom_js_checkout_image_upload() {
?>
<script type="text/javascript">
jQuery( function( $ ) {
jQuery(document).on('change', '#cxc_file', function() {
jQuery('.cxc-error').remove();
if ( this.files.length === 0 ) {
jQuery( '#cxc_filelist' ).empty();
} else {
const files = this.files;
const formData = new FormData();
for ( let i = 0; i < files.length; i++ ) {
formData.append( 'cxc_files[]', files[i] );
}
jQuery.ajax({
url: wc_checkout_params.ajax_url + '?action=cxc_checkout_file_upload',
type: 'POST',
data: formData,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function ( response ) {
if( response ){
if( response.type == 'success' ){
jQuery.each(response.image_urls, function(index, imageUrl) {
jQuery( '#cxc_filelist' ).append('<img src="' + imageUrl + '">');
});
jQuery( 'input[name="cxc_file_field"]' ).val(JSON.stringify(response.image_urls));
} else {
jQuery('#cxc_file').after('<div class="cxc-error" role="alert">' + response.message + '</div>');
}
}
}
});
}
} );
} );
</script>
<?php
}<?php
add_action( 'woocommerce_checkout_update_order_meta', 'cxc_file_field_save_added' );
function cxc_file_field_save_added( $order_id ){
if( ! empty( $_POST[ 'cxc_file_field' ] ) ) {
update_post_meta( $order_id, 'cxc_file_field', sanitize_text_field( $_POST[ 'cxc_file_field' ] ) );
}
}
?><?php
add_action( 'woocommerce_checkout_process', 'cxc_validate_new_checkout_field' );
function cxc_validate_new_checkout_field() {
if ( empty( $_POST['cxc_file_field'] ) ) {
wc_add_notice( 'Please upload your document picture', 'error' );
}
}
?><?php
add_action( 'woocommerce_admin_order_data_after_order_details', 'cxc_order_meta_general' );
function cxc_order_meta_general( $order ){
$files = get_post_meta( $order->get_id(), 'cxc_file_field', true );
if( $files ) {
$files_arr = json_decode($files);
foreach ( $files_arr as $key => $file) {
echo '<img class="cxc-order-img" style="max-width: 400px;width: 100%;height: auto; margin-top: 10px;" src="'. esc_url( $file ) .'" />';
}
}
}
?>Also read: How to Create File Upload Field on Checkout Page WooCommerce
integrating multiple file upload fields into the WooCommerce checkout page significantly enhances the functionality and customization capabilities of your e-commerce platform. By following the outlined steps, you can provide a more personalized shopping experience, allowing customers to upload files directly during the checkout process.
This approach not only meets the specific needs of customers but also positions CodexCoach as a forward-thinking brand that leverages technology to improve customer satisfaction and streamline the order fulfillment process.
-
CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.
