在WooCommerce结帐页面增加文件上传字段

在WooCommerce二次开发中，常常需要在结帐页面添加一个上传文件的功能。为了实现这个功能，需要在结帐页面增加一个自定义文件上传字段。尽管看起来只是一个简单的字段，但实际实现起来需要涉及到不少的工作量。我们来看一下实现的具体代码。

添加文件上传表单

下面的代码中，我们把上传文件需要的HTML表单代码添加到了结账表单中。

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> <?php }

使用jQuery处理用户文件上传。

然后，我们使用Ajax 方法上传图像，用户选择图像后，我们立即通过Ajax上传文件到后端，以方便在结账时直接使用上传好的图像文件URL。

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, contentType: false, enctype: 'multipart/form-data', processData: false, success: function ( response ) { $( 'input[name="misha_file_field"]' ).val( response ); } }); } } ); } );

在服务端接收并保存前端Ajax上传的文件

保存用户上传的图像到服务器上

在前端通过Ajax上传后，我们需要在后端保存处理上传的文件，下面是保存文件的示例代码，保存文件后，我们返回文件的URL给前端。如果需要进一步处理图像，我们还可以同时返回一个图像文件的ID给前端，具体代码可搜索本站中的相关文件，这里就不再重复列出了。

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; }

到现在我们已经完成了上传文件的表单，文件上传和保存的步骤。下一步，我们需要把上传的文件保存到订单信息中。

在订单中保存上传的文件URL并显示在订单详情页面

在订单信息中保存上传的文件URL

这一步就比较简单了，我们直接把结账表单发送过来的文件URL保存到订单的元数据中就可以了。

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' ] ) ); } }

在订单信息中显示上传的图像

为了方便订单管理员处理，我们还需要在订单详情中显示图像文件。

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 ) . '" />'; } }

总结

本文中介绍的功能使用诸如Checkout Field Editor之类的插件也能实现，但是文件上传功能往往需要购买付费版本才有，为了这一个功能去购买这样的插件略显不划算，并且使用代码实现更加自由并且性能更好，有需要的朋友可以参考。

欢迎咨询/Welcome to inquire