Oferta SiteGround Black Friday

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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.7 / 5. Total de votos: 6

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

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

Sobre el autor

4 comentarios en “Subida de archivos en el pago de WooCommerce”

  1. Este tipo de códigos siempre son útiles, muchas gracias por compartirlos. Tengo una duda que no sé si tu sabrás contestar sobre la personalización de campos en el checkout de un woocomerce… en casi todas las webs tengo que añadir el campo DNI y lo hago a través del archivo functions, pero me falta algo porque cuando un usuario que ya ha comprado en la web vuelve a comprar de nuevo se le cargan todos los datos de su cuenta menos el DNI, siempre tienen que volver a meter este dato. ¿Sabrías solucionarlo?

    Gracias!

    1. Hola Beatriz, eso suele ser debido a que el código que has metido es incompleto, no se guarda en los datos meta del usuario. A veces también es cuestión de que otros plugins no lo reconocen, y hay que añadir funciones para que lo hagan, pasa mucho. La solución pasa por usar un código que no solo «pinte» el campo del DNI sino que también lo almacene con los datos del usuario, y ya si lo reconocen los plugins de WooCommerce para facturas y demás sería la leche. Otra es usar la funcionalidad de añadir DNI de tu plugin de facturas en PDF, casi todos la tienen, y ahí sí que no suelen fallar (o no deberían)

  2. Hola Fernando gracias por el código. Te pregunto
    ¿como haría para que fuera opcional la subida del archivo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba