WooCommerce custom fields

im trying create custom field for woocommerce where i can upload file (e.g pdf,doc,xsxl) i want create file upload custom field in Product-data General Tabs


and want that file to be downloadable in single product page

*this is not vritual / downloadable product, just need some file to be downable

1. first try
Find out that we can create custom field with woocommerce hooks:

  • woocommerce_wp_text_input()
  • woocommerce_wp_textarea_input()
  • woocommerce_wp_select()
  • woocommerce_wp_checkbox()
  • woocommerce_wp_radiobox()
    this work find but i want option where i can upload file. i couldnt find one with file upload option
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');
function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field',
            'placeholder' => 'file upload',
            'label' => __('Custom Product Text Field', 'woocommerce'),
            'desc_tip' => 'true',
            'type' => 'file'
        )
    );
    echo '</div>';

}

i added type = file in woocommerce_wp_text_input() its gives me file upload option but doesnt save file

// Save Fields

add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
    function woocommerce_product_custom_fields_save($post_id)
    {
        // Custom Product Text Field
        $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
        if (!empty($woocommerce_custom_product_text_field))
            update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
    
    }

this save action work with others hook but doesnt work with file upload.

2. second try

add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields_file_upload');
function woocommerce_product_custom_fields_file_upload()
{
    global $woocommerce, $post; ?>
   <div class="form-row form-row-wide">
			<input type="file" id="my_file" name="my_file" />
			<input type="hidden" name="my_file_field" />
			<label for="my_file"><a>Select a cool image</a></label>
			<div id="my_filelist"></div>
		</div>
<?php
}

add_action( 'wp_ajax_fileupload', 'my_file_upload' );
add_action( 'wp_ajax_nopriv_fileupload', 'my_file_upload' );

function my_file_upload(){

	$upload_dir = wp_upload_dir();

	if ( isset( $_FILES[ 'my_file' ] ) ) {
		$path = $upload_dir[ 'path' ] . '/' . basename( $_FILES[ 'my_file' ][ 'name' ] );

		if( move_uploaded_file( $_FILES[ 'my_file' ][ 'tmp_name' ], $path ) ) {
			echo $upload_dir[ 'url' ] . '/' . basename( $_FILES[ 'my_file' ][ 'name' ] );
		}
	}
	die;
}


add_action( 'woocommerce_product_options_general_product_data', 'misha_save_what_we_added' );

function misha_save_what_we_added( $order_id ){

	if( ! empty( $_POST[ 'my_file_field' ] ) ) {
		update_post_meta( $order_id, 'my_file_field', sanitize_text_field( $_POST[ 'my_file_field' ] ) );
	}

}

this also gives me upload option but file is not save.
i want to have upload option in Prodcut-data General tabs and want the downable links of upload file in single product pages…
how can achieve this function

This can be done very easily with ACF plugin.

1 Like

This can be done with jcodex woocommerce checkout field editor very easily. This plugin is free and very easy to use.

1 Like