How to Add a File Upload Feature to WooCommerce Registration Form

In WooCommerce, the default user registration form does not have a built-in option for users to upload files. However, with some custom code, you can add this feature to your store’s “My Account” registration form. In this guide, we will show you how to create a file upload field, validate it, and save the uploaded file to the user’s profile in WordPress.

 

Step 1: Add the File Upload Field

To begin, you’ll need to add a file upload field to the registration form. You can accomplish this by using the following code in your theme’s functions.php file or a custom plugin. This code will add the file upload input field to the WooCommerce registration form:

function custom_registration_form_file_upload() {
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="file_upload"><?php esc_html_e('Upload Your File', 'text-domain'); ?> <span class="required">*</span></label>
        <input type="file" class="input-file" name="file_upload" id="file_upload" accept=".pdf,.doc,.docx,.png,.jpg,.jpeg" required>
    </p>
    <?php
}
add_action('woocommerce_register_form', 'custom_registration_form_file_upload');

This code adds a file input field where users can upload files. The accept attribute ensures that only specific file types can be uploaded (e.g., PDFs, Word documents, and images). You can adjust this according to your needs.

 

Step 2: Validate the Uploaded File

Next, we need to validate the uploaded file. The file must be checked for errors before it’s processed. The following code snippet will handle file validation and ensure the file is uploaded properly:

function custom_registration_form_file_upload_validation($errors, $username, $email) {
    if (isset($_FILES['file_upload']) && !empty($_FILES['file_upload']['name'])) {
        $upload_file = $_FILES['file_upload'];

        // Check for file upload errors
        if ($upload_file['error'] !== UPLOAD_ERR_OK) {
            $errors->add('file_upload_error', __('File upload failed. Please try again.', 'text-domain'));
        }
    }

    return $errors;
}
add_filter('woocommerce_registration_errors', 'custom_registration_form_file_upload_validation', 10, 3);

This code checks for file upload errors. If an error occurs during the upload process, an error message will be displayed to the user, letting them know to try again.

 

Step 3: Save the File to User Profile

Once the file is validated, you can save it to the WordPress uploads folder and associate the file with the user’s account. Use the following code to handle the saving process:

function custom_registration_form_file_upload_save($customer_id) {
    if (isset($_FILES['file_upload']) && !empty($_FILES['file_upload']['name'])) {
        $upload_file = $_FILES['file_upload'];

        // Handle the file upload and save it to a specific folder
        $upload_dir = wp_upload_dir();
        $file_name = $upload_file['name'];
        $file_tmp = $upload_file['tmp_name'];
        $file_type = wp_check_filetype($file_name);
        $file_path = $upload_dir['path'] . '/' . $file_name;

        // Move the uploaded file to the destination folder
        move_uploaded_file($file_tmp, $file_path);

        // Update user meta with the file path
        update_user_meta($customer_id, 'custom_file_upload', $file_path);
    }
}
add_action('woocommerce_created_customer', 'custom_registration_form_file_upload_save');

This function moves the uploaded file to the WordPress uploads directory and saves the file path as user meta. You can customize the file path or storage location based on your preferences.

 

Customizing the File Upload Process

You can further customize the file upload process. For example, you might want to store the uploaded files in a specific folder, validate the file size, or restrict file types to certain categories (e.g., only images or PDFs).

 

Conclusion

By adding this functionality, your WooCommerce registration form will allow users to upload files during registration. This is especially useful for applications where users need to submit documents, images, or other types of files. Be sure to test the process thoroughly before implementing it on your live site to ensure everything runs smoothly.

If you’re looking for more customization options, explore the WooCommerce documentation for additional features.