How to Add New Fields in Dokan Product Form

Dokan has made it possible for non-technical people to design their own marketplace like Amazon in less than 30 minutes. This plugin has become very popular because of its functionality as well as its many customization options.

As a Dokan user, you must be quite familiar with our transparent transaction process, regular updates aligning with trends, 24X7 active support team, and rich collection of documentation. In spite of all these facilities, we are publishing a series of blogs to give more benefits to our users.

In this continuity, today we'll show you step-by-step how you can add a new customized field according to your needs in the Dokan product form.

Why You May Need to Add New Fields in Dokan Product Form

The Dokan multivendor solution lets its users build different types of marketplaces with advanced and unique features. Also, you'll get many customization options to align your site for your business needs. One of them is to add a new field on the product upload form of Dokan.

As you'll not get that facility by default inside Dokan, you need to write a little bit of code for adding a new custom field. Here we will show you the whole process so you can easily implement it inside your marketplace.

You can check all the Dokan Multi Vendor Documentation here!

5 Steps to Add New Fields in Dokan Product Form

Below are the 5 steps you need to create new fields on the Dokan product form and show the value from frontend-

Step 1: Create a Child Theme

Firstly, create a child theme. Further, you'll need this child theme to make adjustments to the file, as this enhancement is related to the theme.

You can follow this guide to create a child theme with ease. Alternatively, there are many plugins available inside the WordPress repository to create a child theme. You can use them as well.

Step 2: Implement the Code Inside Your Child Theme

Next, open your child-theme functions.php and paste the below code-


/*
* Adding extra field on New product popup/without popup form
*/

add_action( 'dokan_new_product_after_product_tags','new_product_field',10 );

function new_product_field(){ ?>

     <div class="dokan-form-group">

              <input type="text" class="dokan-form-control" name="new_field" placeholder="<?php esc_attr_e( 'Product Code', 'dokan-lite' ); ?>">
        </div>

   <?php
}

/*
* Saving product field data for edit and update
*/

 add_action( 'dokan_new_product_added','save_add_product_meta', 10, 2 );
 add_action( 'dokan_product_updated', 'save_add_product_meta', 10, 2 );

function save_add_product_meta($product_id, $postdata){

    if ( ! dokan_is_user_seller( get_current_user_id() ) ) {
            return;
        }

        if ( ! empty( $postdata['new_field'] ) ) {
            update_post_meta( $product_id, 'new_field', $postdata['new_field'] );
        }
}

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

add_action('dokan_product_edit_after_product_tags','show_on_edit_page',99,2);

function show_on_edit_page($post, $post_id){
$new_field         = get_post_meta( $post_id, 'new_field', true );
?>
   <div class="dokan-form-group">
        <input type="hidden" name="new_field" id="dokan-edit-product-id" value="<?php echo esc_attr( $post_id ); ?>"/>
        <label for="new_field" class="form-label"><?php esc_html_e( 'Product Code', 'dokan-lite' ); ?></label>
        <?php dokan_post_input_box( $post_id, 'new_field', array( 'placeholder' => __( 'product code', 'dokan-lite' ), 'value' => $new_field ) ); ?>
        <div class="dokan-product-title-alert dokan-hide">
         <?php esc_html_e( 'Please enter product code!', 'dokan-lite' ); ?>
        </div>
     </div> <?php

    }

// showing on single product page
add_action('woocommerce_single_product_summary','show_product_code',13);

function show_product_code(){
      global $product;

        if ( empty( $product ) ) {
            return;
        }
 $new_field = get_post_meta( $product->get_id(), 'new_field', true );

        if ( ! empty( $new_field ) ) {
            ?>
                  <span class="details"><?php echo esc_attr__( 'Product Code:', 'dokan-lite' ); ?> <strong><?php echo esc_attr( $new_field ); ?></strong></span>
            <?php
        }
}

This code is written in 4 steps-

Added a field on the product upload form (With pop-up or without pop-up)
Saved and updated field value while saving the product
Showed the extra field on the product edit page
Displayed the extra field data on a single product page

Step 3: Check The New Custom Field on Upload Form

Now, go to the product upload form. Here you can see the new field after that tag field –

In order to add the field after the tag field, we've used the action-

dokan_new_product_after_product_tags.

It will add the field after the tag. You can add multiple fields too.

Step 4: Test the New Product Field On Your Product Edit Page

Now, fill out the product form and create your product. It will redirect you to the product edit page with the new custom field value –

Here, we've used these actions to save and update product meta –

dokan_new_product_added & dokan_new_product_updated

In order to show the field on the edit product page, we used this action –

dokan_product_edit_after_product_tags

Step 5: Display New Field Data on a Single Product Page

Now you may want to show new field data on your single product page. The last part of the code helps you to do this. To serve this purpose we've used the action-

woocommerce_single_product_summary

You can do some changes to the code we've included above if you need to add more fields on your Dokan product page.

You can check out this video,

You may also like to read: Create Amazing Customizable Registration Forms for Dokan!

Conclusion

Running a successful marketplace can be a daunting task. You have to face many challenges. We are always ready to help you with any problems related to the marketplace developed with Dokan.

Now, you know the process of adding a new custom field to your Dokan product form. To get further help do comment below or contact our 24X7 support service.

Products