Add image upload custom field at dokan template new-product.php

Question

I am using dokan plugin for a multivendor website, I want to add image upload custom field in the template new-product.php, I used CMB2 plugin to create image upload custom field with WooCommerce like this

          function themebox_metaboxes() {

        // Start with an underscore to hide fields from custom fields list
         $prefix = 'themebox_met_';

         // Product Settings
         $header_settings = new_cmb2_box( array(
         'id'            => 'Extra_settings',
         'title'         => esc_html__( 'Extra Settings', 'themebox' ),
         'object_types'  => array( 'product'), // Post type
         'context'       => 'normal',
         'priority'      => 'high',
         'show_names'    => true,

           ) );

         $header_settings->add_field( array(
        'name'       => esc_html__( 'Add Image Detail size 590x300 px', 'themebox' ),
        'id'         => $prefix . 'img_detail',
        'type'             => 'file'
    ) );

     }

I want to add this custom image upload field in template form new-product.php and when save form in dokan the image upload custom field update with an image added in dokan .....exactly like featured product image in WooCommerce

Answer 1

You can override the new-product.php and new-product-single.php file and then add your field on the product upload/edit file. To add new field for product edit/add the template you will have to add a new field in this template (Override via child-theme) - dokan-lite/templates/products/new-product-single.php. However, there are some other steps required to successfully save them.

You need to modify the Dokan product upload template and then you have to add an extra field by overriding the template. After adding the input filed you have to save the value of the field. On that place you have to use do_action( 'dokan_new_product_added', $product_id, $post_data ); this hook to save the field data.

When you will edit the product that time you have to use do_action( 'dokan_product_updated', $post_id ); to re-save.

Thanks :)

Answer 2

function save_add_product_meta($product_id, $postdata){

    if ( ! dokan_is_user_seller( get_current_user_id() ) ) {
            return;
        }
 if ( ! empty( $postdata['title'] ) ) {
            update_post_meta( $product_id, 'title', $postdata['title'] );
        }
        if ( ! empty( $postdata['subtitle'] ) ) {
            update_post_meta( $product_id, 'subtitle', $postdata['subtitle'] );
        }
         if ( ! empty( $postdata['subdescription'] ) ) {
            update_post_meta( $product_id, 'subdescription', $postdata['subdescription'] );
        }
          if ( ! empty( $postdata['vidimg'] ) ) {
        update_post_meta( $product_id, 'vidimg', $postdata['vidimg'] );
          }
}

/*
* Showing field data on product edit page
*/

add_action('dokan_product_edit_after_product_tags','show_on_edit_page',99,8);
function show_on_edit_page($post, $post_id){
$subtitle         = get_post_meta( $post_id, 'subtitle', true );
$title         = get_post_meta( $post_id, 'title', true );
$subdesc        = get_post_meta( $post_id, 'subdescription', true );
  $vidimg = get_post_meta( $post_id, 'vidimg', true );

?>


    <div class="dokan-form-group">
       <h6 class="auto">Ajoutez du contenu pour mettre en valeur cette oeuvre !</h6>
        <input type="hidden" name="title" id="dokan-edit-product-id" value="<?php echo esc_attr( $post_id ); ?>"/>
        <label for="new_field" class="form-label"><?php esc_html_e( 'Autre Titre', 'dokan-lite' ); ?></label>
        <?php dokan_post_input_box( $post_id, 'title', array( 'placeholder' => __( 'product code', 'dokan-lite' ), 'value' => $title ) ); ?>
        <p class="help-block">50 caractères maximum (conseillé)</p>
     </div> 
         
     <div class="dokan-form-group">
        <input type="hidden" name="subtitle" id="dokan-edit-product-id" value="<?php echo esc_attr( $post_id ); ?>"/>
        <label for="subtitle" class="form-label"><?php esc_html_e( 'Sous titre', 'dokan-lite' ); ?></label>
        <?php dokan_post_input_box( $post_id, 'subtitle', array( 'placeholder' => __( 'product code', 'dokan-lite' ), 'value' => $subtitle ) ); ?>
         <p class="help-block">80 caractères maximum (conseillé)</p>
     </div>   
    <div class="dokan-form-group">
        <label for="subdescription" class="form-label">Paragraphe d'introduction</label>
            <div class="dokan-rich-text-wrap">
                    <?php dokan_post_input_box( $post_id, 'subdescription',  array('placeholder' => 'ajouter une description', 'value' => $subdesc ), 'textarea' ); ?>         
        </div> 
    </div>

 <div class="dokan-feat-image-upload">
    <?php
    $wrap_class        = ' dokan-hide';
    $instruction_class = '';
    $feat_image_id     = 0;

    if (!empty($vidimg) ) {
        $wrap_class        = '';
        $instruction_class = ' dokan-hide';
        $imaid =attachment_url_to_postid($vidimg);
    }
    ?>

    <div class="instruction-inside<?php echo esc_attr( $instruction_class ); ?>">
        <input type="hidden" name="vidimg" class="dokan-feat-image-id" value="<?php echo esc_attr($vidimg ); ?>">

        <i class="fa fa-cloud-upload"></i>
        <a href="#" class="dokan-feat-image-btn btn btn-sm"><?php esc_html_e( 'Upload a product cover image', 'dokan-lite' ); ?></a>
    </div>

    <div class="image-wrap<?php echo esc_attr( $wrap_class ); ?>">
        <a class="close dokan-remove-feat-image">&times;</a>
        <?php if ( ! empty($vidimg) ) { ?>
           <img src="<?php echo esc_url(wp_get_attachment_url($vidimg )  ); ?>" alt="">
        <?php } else { ?>
            <img height="" width="" src="" alt="">
        <?php } ?>
    </div>
</div><!-- .dokan-feat-image-upload -->
         <?php
    }