Nicola Mustone

Happiness Lead @ Automattic


Adding custom fields to the vendor registration form

Updated and tested with WooCommerce 4.9.2 and Product Vendors 2.1.47.

With Product Vendors 2.0 being released a while ago, the developers added many new features, including the vendor registration form which you requested so many times.

By using the shortcode [wcpv_registration] in a page, the user will see a form to register an account and a vendor account, if not logged in, or only the fields to register the vendor account if they are already logged in.

The form anyway, could not be enough for someone. You may want to add more fields to the vendor, like their social profiles. Like always, there’s a way, with some custom code, to do it.

The example code adds two new fields to the Vendor taxonomy and the registration form to allow vendors to specify their Facebook and Twitter URLs.

Open your functions.php file in wp-content/themes/your-child-theme-name/ and add this code at the end of the file:

/**
* Register term fields
*/
add_action( 'init', 'register_vendor_custom_fields' );
function register_vendor_custom_fields() {
add_action( WC_PRODUCT_VENDORS_TAXONOMY . '_add_form_fields', 'add_vendor_custom_fields' );
add_action( WC_PRODUCT_VENDORS_TAXONOMY . '_edit_form_fields', 'edit_vendor_custom_fields', 10 );
add_action( 'edited_' . WC_PRODUCT_VENDORS_TAXONOMY, 'save_vendor_custom_fields' );
add_action( 'created_' . WC_PRODUCT_VENDORS_TAXONOMY, 'save_vendor_custom_fields' );
}
/**
* Add term fields form
*/
function add_vendor_custom_fields() {
wp_nonce_field( basename( __FILE__ ), 'vendor_custom_fields_nonce' );
?>
<div class="form-field">
<label for="facebook"><?php _e( 'Facebook', 'domain' ); ?></label>
<input type="url" name="facebook" id="facebook" value="" />
</div>
<div class="form-field">
<label for="twitter"><?php _e( 'Twitter', 'domain' ); ?></label>
<input type="url" name="twitter" id="twitter" value="" />
</div>
<?php
}
/**
* Edit term fields form
*/
function edit_vendor_custom_fields( $term ) {
wp_nonce_field( basename( __FILE__ ), 'vendor_custom_fields_nonce' );
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="facebook"><?php _e( 'Facebook', 'domain' ); ?></label></th>
<td>
<input type="url" name="facebook" id="facebook" value="<?php echo esc_url( get_term_meta( $term->term_id, 'facebook', true ) ); ?>" />
</td>
</tr>
<tr class="form-field">
<th scope="row" valign="top"><label for="twitter"><?php _e( 'Twitter', 'domain' ); ?></label></th>
<td>
<input type="url" name="twitter" id="twitter" value="<?php echo esc_url( get_term_meta( $term->term_id, 'twitter', true ) ); ?>" />
</td>
</tr>
<?php
}
/**
* Save term fields
*/
function save_vendor_custom_fields( $term_id ) {
if ( ! wp_verify_nonce( $_POST['vendor_custom_fields_nonce'], basename( __FILE__ ) ) ) {
return;
}
$old_fb = get_term_meta( $term_id, 'facebook', true );
$old_twitter = get_term_meta( $term_id, 'twitter', true );
$new_fb = esc_url( $_POST['facebook'] );
$new_twitter = esc_url( $_POST['twitter'] );
if ( ! empty( $old_fb ) && $new_fb === '' ) {
delete_term_meta( $term_id, 'facebook' );
} else if ( $old_fb !== $new_fb ) {
update_term_meta( $term_id, 'facebook', $new_fb, $old_fb );
}
if ( ! empty( $old_twitter ) && $new_twitter === '' ) {
delete_term_meta( $term_id, 'twitter' );
} else if ( $old_twitter !== $new_twitter ) {
update_term_meta( $term_id, 'twitter', $new_twitter, $old_twitter );
}
}
add_action( 'wcpv_registration_form', 'vendors_reg_custom_fields' );
function vendors_reg_custom_fields() {
?>
<p class="form-row form-row-first">
<label for="wcpv-facebook"><?php esc_html_e( 'Facebook', 'domain' ); ?></label>
<input type="text" class="input-text" name="facebook" id="wcpv-facebook" value="<?php if ( ! empty( $_POST['facebook'] ) ) echo esc_attr( trim( $_POST['facebook'] ) ); ?>" />
</p>
<p class="form-row form-row-last">
<label for="wcpv-twitter"><?php esc_html_e( 'Twitter', 'woocommerce-product-vendors' ); ?></label>
<input type="text" class="input-text" name="twitter" id="wcpv-twitter" value="<?php if ( ! empty( $_POST['twitter'] ) ) echo esc_attr( trim( $_POST['twitter'] ) ); ?>" />
</p>
<?php
}
add_filter( 'wcpv_shortcode_registration_form_validation_errors', 'vendors_reg_custom_fields_validation', 10, 2 );
function vendors_reg_custom_fields_validation( $errors, $form_items ) {
if ( filter_var( $form_items['facebook'], FILTER_VALIDATE_URL ) === false ) {
$errors['facebook'] = __( 'Facebook field format is not correct. Please enter your Facebook page URL.', 'domain' );
}
if ( filter_var( $form_items['twitter'], FILTER_VALIDATE_URL ) === false ) {
$errors['twitter'] = __( 'Twitter field format is not correct. Please enter your Twitter profile URL.', 'domain' );
}
return $errors;
}
add_action( 'wcpv_shortcode_registration_form_process', 'vendors_reg_custom_fields_save', 10, 2 );
function vendors_reg_custom_fields_save( $args, $items ) {
$term = get_term_by( 'name', $items['vendor_name'], WC_PRODUCT_VENDORS_TAXONOMY );
if ( isset( $items['facebook'] ) && ! empty( $items['facebook'] ) ) {
$fb = esc_url( $items['facebook'] );
update_term_meta( $term->term_id, 'facebook', $fb );
}
if ( isset( $items['twitter'] ) && ! empty( $items['twitter'] ) ) {
$twitter = esc_url( $items['twitter'] );
update_term_meta( $term->term_id, 'twitter', $twitter );
}
}
view raw functions.php hosted with ❤ by GitHub

Let’s break it down to understand what it does.

From line 1 to line 50, the code adds the two new fields to the taxonomy. This way, when as an admin you want to manually create or edit a vendor, you can specify their FB and Twitter URLs in the Dashboard.

From line 51 to 76 it validates and saves the fields in the Dashboard, so until now, the code is all to manage the fields in the backend, for administrators.

From line 78 to line 105, it adds the same field to the registration form that you can show on a page by using the shortcode [wcpv_registration]. The fields will appear after the Vendor Description fields, which is a default field shown at the end of the form, before the Submit button.

The last part of the code, from line 107 to the end, saves the fields in the vendor taxonomy.

This is just a simple example with two text fields, as you can imagine you can add any kind of fields, and as many as you want.

One thing that I didn’t mention in the article is how to validate custom fields. I didn’t validate them here because it was not required, but by using the hook wcpv_shortcode_registration_form_validation you can validate the fields before the vendor is created. In example, if you want mandatory fields, you can check if they are empty, and eventually stop the registration and return an error message to the user.

The hook wcpv_shortcode_registration_form_validation accepts two parameters, the first is an array of error messages, the second is an array with all the form fields submitted by the user.

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

¤5.00
¤15.00
¤100.00
¤5.00
¤15.00
¤100.00
¤5.00
¤15.00
¤100.00

Or enter a custom amount


Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly

Subscribe to This Blog

Receive new articles from this blog directly in your inbox! No spam guaranteed!

Join 655 other subscribers

79 responses to “Adding custom fields to the vendor registration form”

  1. Very useful and helpful article – thank you! Although I’m unsure how we can then extract these custom fields for output/display?

    1. Hi Nick,
      The values are term meta, so you can use get_term_meta to get them.

  2. Hi,
    How can I show te fields on the “wcpv-vendor-settings”-page. So vendors can edit the custom fields whenever they want.

  3. Thanks for this code, very helpful! How do I make these custom fields required?

    1. Hi Chanel,
      You can try to add the required attribute to the input fields.

  4. I noticed that “The fields will appear after the Vendor Description fields, which is a default field shown at the end of the form, before the Submit button.”.
    I want my fields to appear before vendor description, have any solution for reordering that.?
    Thank you

    1. Not really. The form has 3 actions, one at the beginning of the form, one before the submit button and one after it.

  5. Hi, Shall i create a password there itself

    1. Sorry, I don’t understand. Can you explain?

  6. I fail to see why so many people have made themselves dependent on the whole woo atmosphere as it seems to be the clumsiest jumble of coding in the WordPress environment. Maybe It should develop a fork for woo folks who keep coding in the age of DOS. Why on earth an end user in 2018 should be wading through reams of code to add two form fields, and would have to do it all over if they change a theme with one mouse click, is beyond me.

    That said through my halo though, thanks for the snippet because having only the name and email address for someone you trust to deliver goods or services to your site’s users, is a hell of a risk. Amazon requires a piece of government ID on top of all your bio data. :-;

    1. Nicola Mustone Avatar
      Nicola Mustone

      Hi Mark,

      I fail to see why so many people have made themselves dependent on the whole woo atmosphere as it seems to be the clumsiest jumble of coding in the WordPress environment.

      then why do you use WooCommerce? It seems that you are not happy with it, but still use it.

      You’re welcome for the snippet!

  7. Hi Nicola

    I’m building a website using vendor and also I add a WPML Plugin (WordPress Multilingual) for Japanese and Spanish. But doesn’t make any effect on the registration form and of course I need to do it manually.

    I don’t usually code and I need a tip to start and don’t ruin it. Please help on this one! Thank you

    1. Nicola Mustone Avatar

      Hi Gerardo,
      I’m sorry but I’m not sure what the issue is here.

    2. I want to give the option for my users in Spanish, Japanese and English in the registration form.

  8. Hi Nicola! Great post!

    I have followed your tips and works great! I have added a new field without any trouble.
    However, there is a way to add this custom fields to the notification email sent to the administrators? The email template is vendor-registration-email-to-admin.php, but I think that I don’t have access to the new custom fields created… or at least how to access to them…

    Thanks!

  9. I just want to change the fieldnames from the form. Is this also possile? Because I want to change it in German…
    Hopefully you can help me, I found nothing about it, only how to add the boxes for facebook and twitter.

  10. Arun siradhana Avatar
    Arun siradhana

    How to show these fields on thank you page???

  11. Arun Siradhana Avatar
    Arun Siradhana

    $vendor_vpa = get_term_meta( $term->term_id, ‘upivpa’, true );
    echo #vednor_vpa

    above code is not working on thank you page. Its not getting term id/vendor id on thank you page using: $term->term_id OR $term_id OR $vendor_id.

    None of the above is working on Woo thank you page

    but, if i am trying:
    $vendor_vpa = get_term_meta( 42, ‘upivpa’, true );
    echo #vednor_vpa

    its working.

    Please help. How to get vendor id or term id of product vendor on woo thank you page
    ???????

  12. Hi! Is there an option to get the custom fields from shortcode-registration-form? I mean, if you want the vendor fill the form and the data goes to the same place that the your mode (by functions.php) goes?

    I hope you have an answer, I really need some help!

    Regards!

  13. Hi! Someone here know how to make existing fields not required? By reading comments and documentation I learned how to edit (add or delete) fields but not how to make them not required field.

  14. How do we get the custom fields to appear in the vendor dashboard/store settings area? I noticed a few others with the same question but did not see a response. Any ideas? Thanks!

  15. hi Nicola,

    this adds the inputs to the form, but how to add them to the Store Settings page, so vendors can edit them after signup?

    here: /wp-admin/admin.php?page=wcpv-vendor-settings

    Thanks!

  16. Hi There,

    Is this code still working on WooCommerce Product Vendors – I have tried it multiple times and I am having no luck.

    The code crashed my site and says Critical Error.

    Are you in a position to assist me by any chance?

    Regards
    Rob

  17. Similarly How to add upload file field and multi select checkbox fields.

  18. The form validation doesn’t appear to work properly. The validation itself works but when all fields are filled in, i just get a blank red error box and the form will not submit. I am using wp_send_json( array( ‘errors’ => $errors ) )
    Any ideas?

    1. Hello,
      I updated the post with code to include validation of the form with the shortcode.

  19. Hi i try to Add an image Field On The Vendor Registration Form In Dokan.
    does anyone have solution please.

    1. Hi, I am also looking for a solution for this. But I have not been able to find any. Were you able to get the custom file upload field working?

  20. Hi,
    I would like to know what if already register member want to join as vendor?
    Email validation and Username validation blocking existing user to become a vendor.
    Any solution of this issue?

  21. I am trying to add a set of radio buttons to choose from in the registration form. I can get them to show up, but doesn’t look like the selected value is being saved. Any help or insight is greatly appreciated!

  22. Nicola – thanks for this great code. I successfully added the fields to my form. My fields – 3 text fields do not need validating so I commented out the following:

    /*add_filter( ‘wcpv_shortcode_registration_form_validation_errors’, ‘vendors_reg_custom_fields_validation’, 10, 2 );
    function vendors_reg_custom_fields_validation( $errors, $form_items ) {
    if ( filter_var( $form_items[‘referencename’], FILTER_VALIDATE_URL ) === false ) {
    $errors[‘referencename’] = __( ‘Reference Name field format is not correct. Please enter your Reference Name.’, ‘text’ );
    }

    if ( filter_var( $form_items[‘referencetelephone’], FILTER_VALIDATE_URL ) === false ) {
    $errors[‘referencetelephone’] = __( ‘Reference Telephone field format is not correct. Please enter your Reference Telephone.’, ‘text’ );
    }
    if ( filter_var( $form_items[referencerelationship], FILTER_VALIDATE_URL ) === false ) {
    $errors[referencerelationship] = __( ‘Reference Relationship field format is not correct. Please enter your Reference Relationship.’, ‘text’ );
    }

    return $errors;

    }
    */

    Unfortunately, when I click submit, my screen freezes (hour glass) and I don’t see “Your request was submitted.” Did I comment out something I need?

    Also, btw, the vendor data does get added on the backend.

    Thank you,
    Lynne

  23. I do not have the issue above anymore. I have resolved it. I do wish you would share how to add the new field(s) to the emails sent to admins and/or vendors. Thanks.

  24. Hello my colleague,
    I want to add this field.
    Field is required
    XX YYYYYYYY (VAT number)
    X = letter A-Z or EU countries code
    Y = digit 0-9
    Please enter a valid EU tax number. If otherwise, registration will be canceled.
    Please help me.

  25. gulshan568357611 Avatar
    gulshan568357611

    Happy new year
    Is there anyone to help me
    In register form how we add new radio button with different role. Also i want new form fields.

Leave a Reply


Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

€1.00
€5.00
€10.00
€5.00
€15.00
€100.00
€5.00
€15.00
€100.00

Or enter a custom amount


Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 655 other subscribers

About The Author

Hi, I’m Nico! Support Lead at Automattic, championing WordPress.com & WooCommerce. Off-duty, I’m at Elemental Beacon, leading epic D&D adventures. Let’s connect, whether it’s about WordPress or a quest!

Advertisements

Don't Miss a Thing!

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 655 other subscribers

Continue Reading

%d