1. Home
  2. WC Vendors Pro
  3. How To
  4. Add file upload to your vendor sign-up form
  1. Home
  2. WC Vendors Pro
  3. Add file upload to your vendor sign-up form

Add file upload to your vendor sign-up form

There are times when you need to add a document to your vendor application processes such as for Know Your Customer (KYC) or business registration documents or tax documents or some other reason.

To do this you will first need to enable pending vendor file uploads. If you miss this step, the files will fail to upload.

Add upload field to signup form

This code should go into your themes functions.php. The Form Helper provides uploaders for the following:

  • Image
  • Document
  • Audio
  • Video

Add the form field to the signup form. This will add the field below the store name. If you want to change the position you can use our after-action hooks outlined in our Form Helper.

You will obviously need to change the labels to what you require. If you want to duplicate this, will also need to change the field ID.

Your field ID must start with _wcv_custom_settings_ for it to be auto-saved. If your field is not saving, please ensure that your field ID starts with this.

Add this to settings form

If you want to allow these fields to show on the settings form as well as the signup form. Remove the condition for the signup form $form_type.

Add a document file upload

// Add the document field to the signup form.
add_action( 'wcv_form_input_after__wcv_store_name', 'wcv_doc_uploader');
function wcv_doc_uploader( ){
	if ('signup' == WCVendors_Pro_Store_Form::$form_type ){
		echo '<hr />';
		echo '<h3>Document Uploader</h3>';
		$value = get_user_meta( get_current_user_id(), '_wcv_custom_settings_doc_example', true );
		WCVendors_Pro_Form_Helper::file_uploader( array(
			'id' 	            => '_wcv_custom_settings_doc_example',
			'header_text'		=> __('Document uploader', 'wcvendors-pro' ),
			'add_text' 			=> __('Add document', 'wcvendors-pro' ),
			'remove_text'		=> __('Remove document', 'wcvendors-pro' ),
			'file_meta_key' 	=> '_wcv_custom_settings_doc_example',
			'save_button'		=> __('Add document', 'wcvendors-pro' ),
			'window_title'		=> __('Select a document', 'wcvendors-pro' ),
			'value'				=> $value
			), 'document'
		);
	}
}
This is the result of the code above.

Add an image filed to the sign up form

// Add the image field to the signup form.
add_action( 'wcv_form_input_after__wcv_store_name', 'wcv_image_uploader');
function wcv_image_uploader( ){
	if ('signup' == WCVendors_Pro_Store_Form::$form_type ){
		echo '<h3>Image Uploader</h3>';
		$value = get_user_meta( get_current_user_id(), '_wcv_custom_settings_image_example', true );
		WCVendors_Pro_Form_Helper::file_uploader( array(
			'id' 	            => '_wcv_custom_settings_image_example',
			'header_text'		=> __('Image uploader', 'wcvendors-pro' ),
			'add_text' 			=> __('Add image file', 'wcvendors-pro' ),
			'remove_text'		=> __('Remove image file', 'wcvendors-pro' ),
			'image_meta_key' 	=> '_wcv_custom_settings_image_example',
			'save_button'		=> __('Add image file', 'wcvendors-pro' ),
			'window_title'		=> __('Select an Image', 'wcvendors-pro' ),
			'value'				=> $value
			), 'image'
		);
	}
}

Add an audio field to the sign up form

// Add the audio field to the signup form.
add_action( 'wcv_form_input_after__wcv_store_name', 'wcv_audio_uploader');
function wcv_audio_uploader( ){
	// Remove this check to have it show on sign up and settings pages.
	if ('signup' == WCVendors_Pro_Store_Form::$form_type ){
		echo '<h3>Audio Uploader</h3>';
		$value = get_user_meta( get_current_user_id(), '_wcv_custom_settings_audio_example', true );
		WCVendors_Pro_Form_Helper::file_uploader( array(
			'id' 	            => '_wcv_custom_settings_audio_example',
			'header_text'		=> __('Audio uploader', 'wcvendors-pro' ),
			'add_text' 			=> __('Add audio', 'wcvendors-pro' ),
			'remove_text'		=> __('Remove audio', 'wcvendors-pro' ),
			'file_meta_key' 	=> '_wcv_custom_settings_audio_example',
			'save_button'		=> __('Add audio', 'wcvendors-pro' ),
			'window_title'		=> __('Select audio', 'wcvendors-pro' ),
			'value'				=> $value
			), 'audio'
		);
	}
}

Add an video field to the sign up form

// Add the video field to the signup form.
add_action( 'wcv_form_input_after__wcv_store_name', 'wcv_video_uploader');
function wcv_video_uploader( ){
	// Remove this check to have it show on sign up and settings pages.
	if ('signup' == WCVendors_Pro_Store_Form::$form_type ){
		echo '<h3>Video Uploader</h3>';
		$value = get_user_meta( get_current_user_id(), '_wcv_custom_settings_video_example', true );
		WCVendors_Pro_Form_Helper::file_uploader( array(
			'id' 	            => '_wcv_custom_settings_video_example',
			'header_text'		=> __('Video uploader', 'wcvendors-pro' ),
			'add_text' 			=> __('Add video', 'wcvendors-pro' ),
			'remove_text'		=> __('Remove video', 'wcvendors-pro' ),
			'file_meta_key' 	=> '_wcv_custom_settings_video_example',
			'save_button'		=> __('Add video', 'wcvendors-pro' ),
			'window_title'		=> __('Select video', 'wcvendors-pro' ),
			'value'				=> $value
			), 'video'
		);
	}
}

Add the field to user profile

After the vendor has uploaded the file you need to be able to actually view these files. The easiest place to put this is on the User edit screen.

This code does not allow you to remove this file or change it. This is purely for viewing the uploaded documents.

If you add extra document fields, you will also need to update the field ID to reflect the sign up form input ID’s.

Add the fields to the user edit screen

// Add the fields to user edit screen.
add_action( 'show_user_profile', 'add_extra_user_fields' );
add_action( 'edit_user_profile', 'add_extra_user_fields' );
function add_extra_user_fields( $user ){
	// Document file URL.
	$document_file_url = ( $user->_wcv_custom_settings_doc_example ) ? wp_get_attachment_url( $user->_wcv_custom_settings_doc_example ) : '';
	// Image file URL.
	$image_file_url = ( $user->_wcv_custom_settings_doc_example ) ? wp_get_attachment_url( $user->_wcv_custom_settings_image_example ) : '';
	// Aduio file URL.
	$audio_file_url = ( $user->_wcv_custom_settings_doc_example ) ? wp_get_attachment_url( $user->_wcv_custom_settings_audio_example ) : '';
	// Video file URL.
	$video_file_url = ( $user->_wcv_custom_settings_doc_example ) ? wp_get_attachment_url( $user->_wcv_custom_settings_video_example ) : '';
?>
    <h3><?php _e( "Signup Docs", "textdomain"); ?></h3>
    <table class="form-table">
    	<!-- Document field -->
        <tr class="user-document-wrap">
            <th><label for="_wcv_custom_settings_doc_example"><?php _e('Document File'); ?></label></th>
            <td><?php printf( '<a href="%1$s" target="_blank">%1$s</a>', $document_file_url ); ?></td>
        </tr>
        <!-- Image field  -->
         <tr class="user-document-wrap">
            <th><label for="_wcv_custom_settings_image_example"><?php _e('Image File'); ?></label></th>
            <td><?php printf( '<a href="%1$s" target="_blank">%1$s</a>', $image_file_url ); ?></td>
        </tr>
        <!-- Audio field  -->
         <tr class="user-document-wrap">
            <th><label for="_wcv_custom_settings_audio_example"><?php _e('Audio File'); ?></label></th>
            <td><?php printf( '<a href="%1$s" target="_blank">%1$s</a>', $audio_file_url ); ?></td>
        </tr>
        <!-- Video field  -->
         <tr class="user-document-wrap">
            <th><label for="_wcv_custom_settings_video_example"><?php _e('Video File'); ?></label></th>
            <td><?php printf( '<a href="%1$s" target="_blank">%1$s</a>', $video_file_url ); ?></td>
        </tr>
    </table>
<?php
}

actions

Updated on April 27, 2020

Was this article helpful?