Subida de archivos en el pago de WooCommerce

¿Has necesitado alguna vez ofrecer a tus clientes la posibilidad de subir un archivo antes del pago de un producto o servicio? Y no me refiero a subir archivos en la página de producto, que eso es fácil y hay muchos plugins que lo permiten, para productos personalizados y cosas así, sino a subir archivos al finalizar compra, como por ejemplo un documento de afiliación, de identidad o cosas así, necesarias por algún motivo.

Y si digo que en la página de producto es fácil, no solo es porque hay plugins para ello, sino porque los campos HTML necesarios para ofrecer subida de archivos no funcionan en la página de finalizar compra, al ser una página especialmente sensible, y protegida, con toda lógica.

El código

El proceso de subida debe realizarse antes de que carguen todos los campos de pago, y mediante AJAX, algo que podemos conseguir con un código como el siguiente:

/* Subida de archivos al finalizar compra */
add_action( 'woocommerce_after_order_notes', 'ayudawp_subir_archivos_pago' );
function ayudawp_subir_archivos_pago() {
echo '<p class="form-row"><label for="appform">Documento de identidad (PDF)<abbr class="required" title="requerido">*</abbr></label><span class="woocommerce-input-wrapper"><input type="file" id="appform" name="appform" accept=".pdf" required><input type="hidden" name="appform_field" /></span></p>';
wc_enqueue_js( "
$( '#appform' ).change( function() {
if ( this.files.length ) {
const file = this.files[0];
const formData = new FormData();
formData.append( 'appform', file );
$.ajax({
url: wc_checkout_params.ajax_url + '?action=appformupload',
type: 'POST',
data: formData,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function ( response ) {
$( 'input[name=\"appform_field\"]' ).val( response );
}
});
}
});
" );
}
add_action( 'wp_ajax_appformupload', 'ayudawp_formulario_subida' );
add_action( 'wp_ajax_nopriv_appformupload', 'ayudawp_formulario_subida' );
function ayudawp_formulario_subida() {
global $wpdb;
$uploads_dir = wp_upload_dir();
if ( isset( $_FILES['appform'] ) ) {
if ( $upload = wp_upload_bits( $_FILES['appform']['name'], null, file_get_contents( $_FILES['appform']['tmp_name'] ) ) ) {
echo $upload['url'];
}
}
die;
}
add_action( 'woocommerce_checkout_process', 'ayudawp_validar_campo_subida' );
function ayudawp_validar_campo_subida() {
if ( empty( $_POST['appform_field'] ) ) {
wc_add_notice( 'Sube tu archivo', 'error' );
}
}
add_action( 'woocommerce_checkout_update_order_meta', 'ayudawp_guardar_campo_subida' );
function ayudawp_guardar_campo_subida( $order_id ) { 
if ( ! empty( $_POST['appform_field'] ) ) {
update_post_meta( $order_id, '_application', $_POST['appform_field'] );
}
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'ayudawp_mostrar_campo_subida', 10, 1 );
function ayudawp_mostrar_campo_subida( $order ) { 
$order_id = $order->get_id();
if ( get_post_meta( $order_id, '_application', true ) ) echo '<p><strong>Subir PDF:</strong> <a href="' . get_post_meta( $order_id, '_application', true ) . '" target="_blank">' . get_post_meta( $order_id, '_application', true ) . '</a></p>';
}
add_action( 'woocommerce_email_after_order_table', 'ayudawp_mostrar_email_campo_subida', 20, 4 );
function ayudawp_mostrar_email_campo_subida( $order, $sent_to_admin, $plain_text, $email ) {
if ( $sent_to_admin && get_post_meta( $order->get_id(), '_application', true ) ) echo '<p><strong>Archivo PDF:</strong> ' . get_post_meta( $order->get_id(), '_application', true ) . '</p>';
}

¿Qué hace el código que permite subir archivos al finalizar compra?

Este código de ejemplo añade un campo de subida de archivos obligatorio (class="required") al final de los campos estándar de WooCommerce, que debe ser un tipo de archivo PDF (accept=".pdf") y lo sube al directorio actual  de subidas ($uploads_dir = wp_upload_dir()).

Puedes cambiar textos o el tipo de archivo permitido, por supuesto.

¿Dónde debo añadir este código?

Al ser una funcionalidad independiente del tema no deberías añadir el código al archivo functions.php del tema activo, a pesar de que funcionar funciona (comprobado), puedes elegir algún otro modo de añadirlo, como explicaba en esta sencilla guía…

Cómo y dónde pegar en WordPress códigos PHP, JS, CSS y funciones que encuentres por ahí

¿Funciona?

Pues claro, lo he probado en varias instalaciones de WooCommerce, con varios temas de los más populares y añadiendo el código como función, plugin y snippet y funciona perfectamente, como reflejan las siguientes capturas del antes y el después.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!