Plugin para WooCommerce que me permita subir archivos en las páginas de productos

Plugin para WooCommerce que me permita subir archivos en las páginas de productos.

Para permitir que los clientes suban archivos directamente en las páginas de productos de WooCommerce, puedes usar un plugin especializado. Aquí te presento algunas opciones populares que cumplen esta función:

1. WooCommerce Product Add-Ons

Descripción: Este plugin oficial de WooCommerce permite personalizar productos con campos adicionales, incluyendo un campo de subida de archivos.
Características:
- Permite a los clientes subir archivos al realizar un pedido.
- Soporta múltiples tipos de campos (texto, casillas, selección, y más).
- Compatible con productos simples y variables.
Costo: Desde $49/año.

2. WooCommerce Custom Fields for Variation

Descripción: Añade campos personalizados, como opciones de carga de archivos, para cada variación de producto.
Características:
- Posibilidad de cargar archivos en variaciones específicas.
- Compatible con múltiples formatos de archivo.
- Control de validación del tipo y tamaño de archivo.
Costo: Alrededor de $29 (pago único en Codecanyon).

3. WooCommerce Upload Files

Descripción: Este plugin permite a los clientes subir archivos directamente desde las páginas de productos.
Características:
- Subida de múltiples archivos por producto.
- Restricción del tamaño y tipo de archivo.
- Compatibilidad con productos variables.
- Opciones avanzadas para visualizar los archivos subidos en el backend de WooCommerce.
Costo: Aproximadamente $25 (pago único en Codecanyon).

4. Advanced Custom Fields (ACF) con WooCommerce

Descripción: Aunque no está diseñado específicamente para WooCommerce, ACF es una herramienta poderosa para añadir campos personalizados, incluyendo subida de archivos.
Características:
- Totalmente personalizable.
- Necesita integración manual con plantillas de WooCommerce.
- Perfecto si buscas flexibilidad y control total.
Costo: Desde $49/año para la versión Pro.

5. WooCommerce File Upload

Descripción: Plugin gratuito que permite a los clientes subir archivos en la página del producto.
Características:
- Fácil de usar y configurar.
- Compatible con varios tipos de archivo.
- Disponible en versión gratuita con funciones básicas y premium para características avanzadas.
Costo: Versión gratuita, con versión premium disponible.

Recomendación

Si necesitas una solución sencilla, empieza con WooCommerce File Upload o WooCommerce Upload Files. Si prefieres un enfoque más robusto y completo, considera WooCommerce Product Add-Ons o ACF con integración personalizada.

¿Te gustaría ayuda para instalar o configurar alguno de estos plugins?.

Para permitir la subida de archivos en las páginas de productos de WooCommerce, puedes usar plugins diseñados específicamente para este propósito. A continuación, se mencionan algunas opciones populares:

1. WooCommerce Product Add-Ons

Este plugin permite agregar opciones personalizables a los productos, incluida la opción de subir archivos. Es ideal si quieres que los clientes carguen archivos relacionados con su pedido (por ejemplo, logotipos para productos personalizados).

Características:
- Soporta múltiples tipos de entradas (carga de archivos, campos de texto, menús desplegables, etc.).
- Personalización por producto.
- Control sobre formatos y tamaños de archivo.
URL: WooCommerce Product Add-Ons

2. YITH WooCommerce Uploads

Este plugin permite a los clientes subir archivos directamente desde la página de producto o durante el proceso de pago. Es perfecto si necesitas personalización avanzada.

Características:
- Posibilidad de permitir cargas en productos específicos.
- Soporte para múltiples archivos por producto.
- Configuración de tamaño máximo y tipos de archivo permitidos.
URL: YITH WooCommerce Uploads

3. File Upload for WooCommerce by WP Overnight

Este plugin simple y efectivo agrega una funcionalidad de subida de archivos a tus productos.

Características:
- Fácil de configurar.
- Compatible con el carrito y la página de pago.
- Permite definir tipos de archivo y tamaños permitidos.
URL: File Upload for WooCommerce

4. Advanced Product Fields (Product Addons)

Este plugin también permite agregar campos personalizados, incluidos campos de carga de archivos.

Características:
- Interfaz fácil de usar.
- Soporta varios campos, incluidos campos de carga.
- Posibilidad de agregar reglas condicionales.
URL: Advanced Product Fields

Recomendación Gratis

Si buscas una opción gratuita, puedes usar WooCommerce Custom Fields for Product Pages y combinarlo con un plugin gratuito de carga de archivos como Contact Form 7 integrado en la página del producto mediante shortcodes. Sin embargo, esto podría requerir un poco más de personalización.

Permitir que los clientes suban archivos directamente en las páginas de productos de WooCommerce se puede lograr mediante el uso de un plugin o a través de personalización de código. Aquí se muestran ambas opciones:

Opción 1: Usar un Plugin

Existen varios plugins que pueden facilitar el proceso de permitir la carga de archivos en la página del producto. Algunos de los más populares son:

WooCommerce Product Add-Ons: Este plugin permite agregar campos adicionales a los productos, incluidos campos de carga de archivos.
WooCommerce Upload Files: Este es otro plugin que agrega una opción para que los clientes suban archivos directamente en las páginas de productos.

Para usar un plugin:

Instala y activa el plugin desde el repositorio de WordPress.
Sigue las instrucciones del plugin para configurar los campos que deseas mostrar en las páginas de productos, incluyendo la opción de carga de archivos.

Opción 2: Personalización de Código

Si prefieres no utilizar un plugin o necesitas una solución más personalizada, puedes agregar una función mediante código. Aquí hay un ejemplo básico de cómo hacerlo:

Agrega un campo para subir archivos: Utiliza el siguiente código en el archivo functions.php de tu tema hijo (o en un plugin específico de funcionalidades).
Copyadd_action('woocommerce_before_add_to_cart_button', 'custom_file_upload_field'); function custom_file_upload_field() { echo '<div class="file-upload"> <label for="custom_file">Sube tu archivo:</label> <input type="file" name="custom_file" id="custom_file" accept="*"/> </div>'; }
Guarda el archivo subido al procesar el pedido: Necesitarás guardar el archivo cuando se realice un pedido. Puedes hacerlo con el siguiente código, que también debes agregar al archivo functions.php:
Copyadd_action('woocommerce_process_order_meta', 'save_custom_file_upload'); function save_custom_file_upload($order_id) { if (!empty($_FILES['custom_file']['name'])) { $uploaded_file = $_FILES['custom_file']; $upload_overrides = array('test_form' => false); $movefile = wp_handle_upload($uploaded_file, $upload_overrides); if ($movefile && !isset($movefile['error'])) { // Guardar URL del archivo en meta del pedido update_post_meta($order_id, 'custom_file_url', $movefile['url']); } else { // Manejar el error error_log($movefile['error']); } } }
Muestra el archivo subido en la administración de pedidos: Para que los administradores puedan ver el archivo subido en la página de pedidos en el admin, añade este código a functions.php:
Copyadd_action('woocommerce_admin_order_data_after_order_details', 'display_custom_file_upload', 10, 1); function display_custom_file_upload($order) { $custom_file_url = get_post_meta($order->get_id(), 'custom_file_url', true); if ($custom_file_url) { echo '<h4>Archivo Subido:</h4>'; echo '<a href="' . esc_url($custom_file_url) . '" target="_blank">Ver archivo</a>'; } }

Consideraciones Finales

Seguridad: Asegúrate de verificar el tipo de archivo que se permite subir para evitar problemas de seguridad.
Temas y Compatibilidad: Asegúrate de probar estos cambios en un entorno de desarrollo antes de implementarlos en un sitio en producción.
Respaldo: Siempre haz una copia de seguridad de tu sitio antes de realizar modificaciones en el código.

Con estos pasos, deberías poder permitir que los clientes suban archivos directamente en las páginas de productos en WooCommerce. Si necesitas una solución más robusta, considera la opción de utilizar un plugin diseñado para ello.

Para añadir la funcionalidad de subir archivos en las páginas de productos de WooCommerce mediante la modificación del archivo functions.php, puedes usar el siguiente código. Este código agrega un campo de carga de archivo a la página del producto y permite que el archivo se cargue junto con el pedido.

Código para functions.php

phpCopiar código<?php
// Agregar un campo de carga de archivo en la página del producto
add_action('woocommerce_before_add_to_cart_button', 'custom_file_upload_field');
function custom_file_upload_field() {
    echo '<div class="custom-file-upload">';
    echo '<label for="custom_file">Subir archivo:</label>';
    echo '<input type="file" name="custom_file" id="custom_file" accept=".jpg,.jpeg,.png,.pdf" required>';
    echo '</div>';
}

// Validar la carga del archivo antes de agregarlo al carrito
add_filter('woocommerce_add_to_cart_validation', 'validate_file_upload', 10, 3);
function validate_file_upload($passed, $product_id, $quantity) {
    if (empty($_FILES['custom_file']['name'])) {
        wc_add_notice('Por favor, sube un archivo antes de agregar al carrito.', 'error');
        return false;
    }
    return $passed;
}

// Guardar el archivo cargado en los datos del carrito
add_filter('woocommerce_add_cart_item_data', 'save_file_upload_data', 10, 2);
function save_file_upload_data($cart_item_data, $product_id) {
    if (!empty($_FILES['custom_file']['name'])) {
        $upload = wp_upload_bits($_FILES['custom_file']['name'], null, file_get_contents($_FILES['custom_file']['tmp_name']));
        if (!$upload['error']) {
            $cart_item_data['custom_file'] = $upload['url'];
        } else {
            wc_add_notice('Error al subir el archivo: ' . $upload['error'], 'error');
        }
    }
    return $cart_item_data;
}

// Mostrar el archivo cargado en el carrito
add_filter('woocommerce_get_item_data', 'display_file_upload_cart', 10, 2);
function display_file_upload_cart($item_data, $cart_item) {
    if (isset($cart_item['custom_file'])) {
        $item_data[] = array(
            'name' => 'Archivo subido',
            'value' => '<a href="' . esc_url($cart_item['custom_file']) . '" target="_blank">Ver archivo</a>',
        );
    }
    return $item_data;
}

// Guardar la URL del archivo en los datos del pedido
add_action('woocommerce_checkout_create_order_line_item', 'save_file_upload_order', 10, 4);
function save_file_upload_order($item, $cart_item_key, $values, $order) {
    if (isset($values['custom_file'])) {
        $item->add_meta_data('Archivo subido', $values['custom_file']);
    }
}

Pasos para Implementar:

Abrir el archivo functions.php:
Ve a tu tema activo en wp-content/themes/tu-tema/ y abre el archivo functions.php.
Agregar el código:
Copia y pega el código anterior al final del archivo functions.php.
Probar la funcionalidad:
- Ve a una página de producto.
- Deberías ver un campo de carga de archivo.
- Sube un archivo, agrega el producto al carrito y realiza el proceso de compra.
- El archivo debería aparecer vinculado al pedido en el carrito y en el backend.

Notas:

Tipos de archivos permitidos:
En el atributo accept del input puedes ajustar los tipos de archivos permitidos. Por ejemplo, puedes añadir otros formatos como .docx, .xlsx, etc.
Tamaño máximo del archivo:
Asegúrate de que el tamaño máximo permitido para las cargas de archivos en tu servidor sea suficiente. Puedes modificarlo en el archivo php.ini o a través de tu proveedor de hosting.
Estilo del campo de carga:
Puedes personalizar el diseño del campo de carga con CSS si es necesario.

Para implementar una barra de progreso para la carga de archivos y mostrar la cantidad de páginas de un archivo PDF en WooCommerce, es necesario combinar PHP y JavaScript. Este enfoque incluye:

Agregar un campo de carga con barra de progreso en la página del producto.
Leer el número de páginas del PDF usando JavaScript.
Enviar los datos al servidor mediante Ajax para almacenar la información.

Aquí está el código para implementar esto:

Código para `functions.php`

phpCopiar código<?php
// Agregar un campo de carga de archivo con barra de progreso en la página del producto
add_action('woocommerce_before_add_to_cart_button', 'custom_file_upload_field_with_progress');
function custom_file_upload_field_with_progress() {
    ?>
    <div class="custom-file-upload">
        <label for="custom_file">Subir archivo (PDF):</label>
        <input type="file" name="custom_file" id="custom_file" accept=".pdf" required>
        <progress id="uploadProgress" value="0" max="100" style="width: 100%; display: none;"></progress>
        <p id="pageCount" style="margin-top: 10px;"></p>
    </div>
    <?php
}

// Enqueue scripts y estilos
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
function enqueue_custom_scripts() {
    if (is_product()) {
        wp_enqueue_script('pdf-js', 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js', [], null, true);
        wp_enqueue_script('custom-upload', get_template_directory_uri() . '/js/custom-upload.js', ['jquery', 'pdf-js'], null, true);
        wp_localize_script('custom-upload', 'ajax_object', ['ajax_url' => admin_url('admin-ajax.php')]);
    }
}

// Procesar el archivo subido y devolver la URL del archivo
add_action('wp_ajax_process_upload', 'process_file_upload');
add_action('wp_ajax_nopriv_process_upload', 'process_file_upload');
function process_file_upload() {
    if (!empty($_FILES['custom_file']['name'])) {
        $upload = wp_upload_bits($_FILES['custom_file']['name'], null, file_get_contents($_FILES['custom_file']['tmp_name']));
        if (!$upload['error']) {
            wp_send_json_success(['file_url' => $upload['url']]);
        } else {
            wp_send_json_error(['error' => $upload['error']]);
        }
    } else {
        wp_send_json_error(['error' => 'No se recibió ningún archivo.']);
    }
}

Archivo JavaScript (`custom-upload.js`)

Guarda este archivo en tu tema en js/custom-upload.js.

javascriptCopiar códigojQuery(document).ready(function ($) {
    $('#custom_file').on('change', function () {
        const file = this.files[0];
        if (!file || file.type !== 'application/pdf') {
            alert('Por favor, selecciona un archivo PDF.');
            return;
        }

        // Leer el número de páginas del PDF
        const reader = new FileReader();
        reader.onload = function () {
            const pdfData = new Uint8Array(this.result);
            pdfjsLib.getDocument(pdfData).promise.then(function (pdf) {
                $('#pageCount').text(`Este archivo tiene ${pdf.numPages} páginas.`);
            });
        };
        reader.readAsArrayBuffer(file);

        // Subir archivo con barra de progreso
        const formData = new FormData();
        formData.append('action', 'process_upload');
        formData.append('custom_file', file);

        $('#uploadProgress').show();
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                const xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        const percentComplete = (e.loaded / e.total) * 100;
                        $('#uploadProgress').val(percentComplete);
                    }
                });
                return xhr;
            },
            success: function (response) {
                if (response.success) {
                    alert('Archivo subido exitosamente: ' + response.data.file_url);
                } else {
                    alert('Error al subir el archivo: ' + response.data.error);
                }
                $('#uploadProgress').hide();
            },
            error: function () {
                alert('Error al procesar la solicitud.');
                $('#uploadProgress').hide();
            },
        });
    });
});

Notas:

Integración de pdf.js:
Se utiliza la biblioteca PDF.js para leer el número de páginas del archivo PDF.
Estilos personalizados:
Puedes agregar estilos CSS adicionales para personalizar la barra de progreso y otros elementos.
Pruebas:
- Asegúrate de que el servidor permita subir archivos del tamaño y tipo especificado.
- Configura los permisos de escritura para el directorio de cargas.

Resultado esperado:

El cliente selecciona un archivo PDF.
Una barra de progreso muestra el estado de la carga.
El número de páginas del PDF se muestra debajo del campo de carga.
Al finalizar, el archivo se carga en el servidor y su URL se almacena.

Para implementar la funcionalidad que se describe en WooCommerce, puedes crear un plugin personalizado que permita a los usuarios subir archivos en la página del producto. Aquí se proporciona un ejemplo básico de cómo lograr esto.

Este código incluye un formulario de subida de archivos, una barra de carga y un pop-up que informa al usuario cuando el archivo ha sido subido.

Crear el plugin:Crea una carpeta en tu directorio de plugins de WordPress, por ejemplo: woocommerce-file-upload. Luego, crea un archivo PHP dentro de esa carpeta, por ejemplo: woocommerce-file-upload.php.
Código del plugin:A continuación, te muestro un ejemplo básico del código que puedes usar para tu plugin:Copy<?php /* Plugin Name: WooCommerce File Upload Description: Permite a los usuarios subir archivos en la página del producto y relacionarlo con su pedido. Version: 1.0 Author: Tu Nombre */ // Asegúrate de que solo se carga el contenido si WooCommerce está activo add_action('plugins_loaded', 'wc_file_upload_check'); function wc_file_upload_check() { if (!class_exists('WooCommerce')) { add_action('admin_notices', 'wc_file_upload_active_notice'); return; } } function wc_file_upload_active_notice() { echo '<div class="error"><p>' . __('El plugin WooCommerce File Upload requiere WooCommerce para funcionar.', 'woocommerce-file-upload') . '</p></div>'; } // Agregar el campo de carga de archivos en la página del producto add_action('woocommerce_before_add_to_cart_button', 'wc_file_upload_field'); function wc_file_upload_field() { echo '<div class="file-upload"> <input type="file" id="custom_file" name="custom_file"> <span id="file-upload-progress" style="display:none;">Cargando...<span id="progress-percentage"></span></span> </div>'; } // Manejar la carga del archivo add_action('wp_enqueue_scripts', 'wc_file_upload_scripts'); function wc_file_upload_scripts() { wp_enqueue_script('jquery'); ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('form.cart').on('submit', function(e) { e.preventDefault(); var file_data = $('#custom_file').prop('files')[0]; var form_data = new FormData(this); form_data.append('custom_file', file_data); var progressBar = $('#file-upload-progress').show(); var percentageLabel = $('#progress-percentage'); $.ajax({ url: '<?php echo admin_url('admin-ajax.php'); ?>', type: 'POST', data: form_data, contentType: false, processData: false, xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; percentComplete = parseInt(percentComplete * 100); percentageLabel.text(percentComplete + '%'); } }, false); return xhr; }, success: function(response) { alert('Archivo subido con éxito.'); // Aquí puedes hacer algo con la respuesta }, error: function() { alert('Error al subir el archivo.'); } }); }); }); </script> <?php } // AJAX para manejar la subida de archivos add_action('wp_ajax_upload_file', 'wc_handle_file_upload'); function wc_handle_file_upload() { if (!empty($_FILES['custom_file']['name'])) { $file = $_FILES['custom_file']; $upload = wp_handle_upload($file, array('test_form' => false)); if (isset($upload['error'])) { wp_send_json_error($upload['error']); } else { // Aquí puedes relacionar el archivo con el pedido // Por ejemplo, guardando la URL del archivo en un meta campo de pedido wp_send_json_success($upload); } } else { wp_send_json_error('No hay archivo.'); } wp_die(); }
Activar el plugin:
- Ve a tu panel de administración de WordPress, dirígete a la sección de «Plugins» y activa el plugin que acabas de crear.
Prueba la funcionalidad:
- Ve a la página de un producto en tu sitio de WooCommerce y deberías ver un campo para subir el archivo. Cuando subas un archivo, se mostrará una barra de carga y un pop-up que informa sobre el estado de la subida.

Notas importantes:

Seguridad: Este código es solo un punto de partida. Asegúrate de manejar la seguridad adecuadamente (validar y sanitizar entradas, verificar tipos de archivo permitidos, etc.).
Almacenamiento de archivos: Actualmente, los archivos están siendo subidos a la carpeta de cargas de WordPress, pero deberías agregar lógica para asociar el archivo con un pedido o usuario.
Compatibilidad: Prueba el plugin en un entorno seguro antes de usarlo en producción.
Estilo: Puedes agregar estilos CSS adicionales para mejorar la apariencia de la carga de archivos y la barra de progreso.

Este código es un ejemplo básico y debería ser adaptado a tus necesidades específicas para producción.

Plugin para WooCommerce que me permita subir archivos en las páginas de productos