Adding custom fields to the vendor registration form

angry at woocommerces php code

We recently had a client request to add form fields to Product Vendors for Woocommerce.

While there is no documentation online for this, we did find a blog by a staff member or associate of Woocommerce.

The blog roughly covers ‘form field validation’ with an out of date example. We ended up doing it the old way by going through each file of Product Vendors and tracing each function. Although it’s easy for us to do, we did notice a lot of confusion and others who were trying to accomplish form validation themselves and getting nowhere…

No.. You are not crazy. The example given for Product Vendors Woocommerce form registration validation does not work!

The example given is outdated since WordPress and Woocommerce changed the way they handle form validation. We thought we would share the solution and hope it saves some people out there a lot of heartache for what should be such a basic task.

angry at woocommerces php code

First let’s start with a basic example.

This will give you two new fields in the Vendor taxonomy and the Registration form. The new fields for this example are: Facebook and Twitter urls.

Open your functions.php file in wp/content/themes/your-child-theme-name/ and add the code below to it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/**
* 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_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 );
}
}

What does the code do?

From line 1 to line 50, the code adds the two new fields to the taxonomy. This way, 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 52 to 73 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 75 to line 88, 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 90 to 101, saves the fields in the vendor taxonomy.

The Form Validation Solution

So here is the part most of you have probably come here looking for… How to validate the form fields. Copy the below and put it in the same file, but put it on line 89 before the ‘wcpv_shortcode_registration_form_process’ which is on line 90. That way before processing and saving, it will check to make sure the two example fields are not empty before continuing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
add_action( 'wcpv_shortcode_registration_form_validation', 'wc_custom_vendors_validation', 10, 2 );
function wc_custom_vendors_validation( $errors, $form_items ) {

if ( empty( $form_items['facebook'] ) ) {
$errors[] = __( 'Facebook is a required field. Please enter your facebook page url' );
}

if ( empty( $form_items['twitter'] ) ) {
$errors[] = __( 'Twitter is a required field. Please enter your facebook page url' );
}

wp_send_json( array( 'errors' => $errors ) );

}

That’s it! Save functions.php and try your registration page. Submit it blank and you should have the Twitter and Facebook error showing as a required field.

Some people are going wrong outside of this example and using: return $errors;

Please use the above, as errors are now sent in json utilising the wordpress api (wp_send_json). So the correct way which is shown in the example above is to use: wp_send_json( array( ‘errors’ => $errors ) );

Hope that helps and feel free to leave comments below.

21 thoughts on “Adding custom fields to the vendor registration form

  1. OH MY GOD!!!!!!! FINALLLLLLLLLLLLLLLY!!!!! THANK YOU! I had been looking for 2 days and found nothing that worked. I agree, they badly need to update their documentation!

    • Hi Mark. Great to hear. You can use something like recaptcha. Simply put this directly under the function:

      1
      2
      vendors_reg_custom_fields() { ?>
      <script src='https://www.google.com/recaptcha/api.js' async defer></script>


      at the very end just before closing the php after the rest of your form fields put:

      1
      2
      3
      4
      5
      <p class="form-row form-row-wide">
              <div class="g-recaptcha" data-sitekey="YOUR-RECAPTCHA-SITE-KEY-HERE"></div>
      </p>
      <?php
      }

  2. Gabriel Sosa says:

    I tried to add captcha. However, it began to give me a http error 500. I had to go back and restore files with my local back up. Please let me know why the error and how do I add captcha on the form.

    • Hi Gabriel,

      Sorry for the late reply. Did you happen to check the error_log to see what the exact error was?

  3. Can you please also do one for adding file attachments to the form?
    I want the vendors to upload some documents for proof of identity.
    Thanks!

    • Hi Jay, it would require a file to be saved on the server and also be secured (as its proof of identity) and then retrieved via the wp-admin area so you can view it. It would require a fair bit of code. It would not be a simple couple of lines of code I could just give you.

  4. Thanks Stuart for this tutorial. I want to ask, how do we do the server side integration of the Google reCaptcha?

    • Hi Sam,

      Thank you for that. Glad to hear you found it helpful.

      You can use something like google’s recaptcha.

      Get recptcha account (its free) and take note of your key. (https://www.google.com/recaptcha/) You will need it in the example given below:

      Simply put this directly under the function:

      1
      2
      vendors_reg_custom_fields() { ?>
      <script src='https://www.google.com/recaptcha/api.js' async defer></script>


      at the very end just before closing the php after the rest of your form fields put:

      1
      2
      3
      4
      5
      <p class="form-row form-row-wide">
              <div class="g-recaptcha" data-sitekey="YOUR-RECAPTCHA-SITE-KEY-HERE"></div>
      </p>
      <?php
      }

  5. Hi Stuart,

    Great article!

    Could you please advise as to how I can add the T’s & C’s checkbox to this vendor registration form?

    Happy Holidays!
    Thanks

    • Hi Leighton, Happy New Years 🙂

      Yes, it’s quite simple. Its the same as adding other form fields.

      Inside this function: function add_vendor_custom_fields()

      Simply add a checkbox field inside the function along with the other form fields you have added. If you were adding it by its self an example would be:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      function add_vendor_custom_fields() {
       wp_nonce_field( basename( __FILE__ ), 'vendor_custom_fields_nonce' );
      ?>
      <div class="form-field">
       <label for="termsandconditionsexample"><?php _e( 'I HAVE READ AND AGREE TO THE TERMS AND CONDITIONS', 'domain' ); ?><span class="required">*</span></label>
       <input type="checkbox" name="termsandconditionsexample" id="termsandconditionsexample" value="" />
       <em class="wcpv-field-note">PUT TERMS AND CONDITIONS HERE IF YOU WANT OR REMOVE THIS PART, YOU MAY NOT WANT IT</em>
      </div>
      <?php
      }

      Dont forget to add it into the admin edit section. You will put this inside the same functions file but inside the function edit_vendor_custom_fields( $term ) function.

      An example based on the above would be:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      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="termsandconditionsexample">
                  <?php _e( 'I HAVE READ AND AGREE TO THE TERMS AND CONDITIONS', 'domain' ); ?>
                  <span class="required">*</span>
              </label>
          </th>
          <td>
              <input type="checkbox" name="termsandconditionsexample" id="termsandconditionsexample" value="1" <?php if(esc_html( get_term_meta( $term->term_id, 'termsandconditionsexample', true ) ) == 1): ?> checked <?php endif; ?> />
              <em class="wcpv-field-note">PUT TERMS AND CONDITIONS HERE IF YOU WANT OR REMOVE THIS PART, YOU MAY NOT WANT IT.</em>
          </td>
      </tr>
      <?php
      }

      Dont forget to add the new field to the validation function too if its for terms and conditions. An example would be:

      1
      2
      3
      4
      5
      wc_custom_vendors_validation {
          if ( empty( $form_items['termsandconditionsexample'] ) ) {
              $errors[] = __( 'Terms and conditions is a required checkbox' );
          }
      }

      Hope that makes sense to you.

  6. Sascha Zeidler says:

    Thank you a lot! 🙂

    Is there an easy way to add custom fields to the Store Settings Page in the Backend (?page=wcpv-vendor-settings), too?
    We’re using Product Vendor in Germany and need two custom fields for “Imprint” and “T&C” that a vendor once registered can fill.

    Again, thanks a lot!

    • i have not had to do that for anyone yet as it’s yet to be requested. Sorry I couldn’t be much help. If I have any clients request this work I will be sure to update the blog and comments section.

  7. Max van Dongen says:

    Hi, I would like to create a bankaccount field, soo the output shouldn’t be a “http://” . How can I remove the “http://” before the input?

    Thanks for helping

    • Hi Max,

      Are you able to give me a bit more information on this? Do you mean you have http:// currently displaying in a form field and want it removed? Where is the http displaying?

  8. Hello,
    Coul you please help? How and where could I add recaptcha code to the WooCommerce Vendor Registration form? I have copied and pasted the beginning and end of the form below:

    Beginning of the form:

    *
    <input type="text" class="input-text" name="firstname" id="wcpv-firstname" value="” tabindex=”1″ />

    *
    <input type="text" class="input-text" name="lastname" id="wcpv-lastname" value="” tabindex=”2″ />

    end of the form:

    *

    <input type="submit" class="button" name="register" value="” tabindex=”8″ />

  9. Hi Stuart,

    Woow, thank you so much for this great -and so helpful article! You got it all for me: adding custom fields + reCaptcha + T&C checkbox! You made my day!

    I think you can add the reCaptcha and T&C checkbox at the end of your article as this is really valuable! And it will prevent lazy people from asking it many times ^^.

    Thank you again!

    • Hi Marc,

      So glad so many people have found it useful. That is a good idea to add it to the article as many people have asked the question but didn’t check the comments. If i ever get a bit more time I will do that 😉

  10. Hi Stuart! Great post!

    I have followed your tips and works great! I have added a new field without any trouble.
    One more question, 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 I don’t know how to access to them…

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts Recent CommentsCategories Our Facebook