Without any doubt, WooCommerce is the most popular open-source eCommerce platform. WooCommerce default fields are awesome, but sometimes you may need to add a few extra fields on your shopping website. If you can not add these fields yourself, then you may need to hire someone for this job. So, In this post, I am going to process adding WooCommerce custom fields to the product. You should follow the article and I will show you a very easy way how to add WooCommerce custom fields to products.

With WooCommerce you can make a beautiful online shopping website. Because there are a lot of WooCommerce plugins and themes available on the WordPress directory. One of the most important causes of WooCommerce success it is very flexible and very easy to customize. When you selling online, The customer’s information is mainly key. So, you may wish to collect a piece of extra information from the customers. In that situation, the best method would be creating extra custom fields to the website and make visible to customers. In this tutorial, I have decided to show you how to add custom fields to WooCommerce products without any plugins.

WooCommerce Custom Fields on Product Page

First, I would like to introduce What are WooCommerce custom fields? In very simple thinking, custom field That means adding any kind of form field Or add extra information to the product or posts and pages. But, You may need to add the following fields on your website.

  • Text field
  • Textarea
  • Dropdown/select field
  • Radio buttons
  • Checkboxes
  • File uploads
  • Date fields
  • Number fields

WooCommerce Custom Fields on Product Page

Required WooCommerce Hook

The first important thing is to use the right hook. There is WooCommerce product options hook. Looks Like below.

  • woocommerce_product_options_general_product_data – General Tab
  • woocommerce_product_options_inventory_product_data – Inventory Tab
  • woocommerce_product_options_shipping – Shipping Tab
  • woocommerce_product_options_advanced – Advanced Tab

I am going to use the woocommerce_product_options_general_product_data action hook. If you want to add your fields to any other tab than the general one, just simply modify the hook name. learn More WooCommerce Hook.

// Display Fields using WooCommerce Action Hook
add_action( 'woocommerce_product_options_general_product_data', 'woocom_general_product_data_custom_field' );

WooCommerce Input Fields Types

  • Text Field – woocommerce_wp_text_input()
  • Number Field – woocommerce_wp_text_input()
  • Radio – woocommerce_wp_radio()
  • Checkbox – woocommerce_wp_checkbox()
  • Dropdown Select – woocommerce_wp_select()
  • Textarea – woocommerce_wp_textarea_input()
  • Hidden Field – woocommerce_wp_hidden_input()

Adding WooCommerce New Fields


function woocom_general_product_data_custom_field() {
  // Create a custom text field
  
  // Text Field
  woocommerce_wp_text_input( 
    array( 
      'id' => '_text_field', 
      'label' => __( 'Custom Text Field', 'woocommerce' ), 
      'placeholder' => 'Custom text field',
      'desc_tip' => 'true',
      'description' => __( 'Enter the custom value here.', 'woocommerce' ) 
    )
  );

  // Number Field
  woocommerce_wp_text_input( 
    array( 
      'id' => '_number_field', 
      'label' => __( 'Custom Number Field', 'woocommerce' ), 
      'placeholder' => '', 
      'description' => __( 'Enter the custom value here.', 'woocommerce' ),
      'type' => 'number', 
      'custom_attributes' => array(
         'step' => 'any',
         'min' => '15'
      ) 
    )
  );

  // Checkbox
  woocommerce_wp_checkbox( 
    array( 
      'id' => '_checkbox', 
      'label' => __('Custom Checkbox Field', 'woocommerce' ), 
      'description' => __( 'Check me!', 'woocommerce' ) 
    )
  ); 

  // Select
  woocommerce_wp_select( 
    array( 
      'id' => '_select', 
      'label' => __( 'Custom Select Field', 'woocommerce' ), 
      'options' => array(
         'one' => __( 'Custom Option 1', 'woocommerce' ),
         'two' => __( 'Custom Option 2', 'woocommerce' ),
        'three' => __( 'Custom Option 3', 'woocommerce' )
      )
    )
  );

  // Textarea
  woocommerce_wp_textarea_input( 
     array( 
       'id' => '_textarea', 
       'label' => __( 'Custom Textarea', 'woocommerce' ), 
       'placeholder' => '', 
       'description' => __( 'Enter the custom value here.', 'woocommerce' ) 
     )
 );

}


Save or Update WooCommerce Meta Data

Once your WooCommerce product fields have been created, So, the next step is to save the information. For saving the information I have to use the following hook woocommerce_process_product_meta

// Hook to save the data value from the custom fields
add_action( 'woocommerce_process_product_meta', 'woocom_save_general_proddata_custom_field' );

Again, I will use this hook to call one callback function to save or update created metadata.

/** Hook callback function to save custom fields information */
function woocom_save_general_proddata_custom_field( $post_id ) {
  // Save Text Field
  $text_field = $_POST['_text_field'];
  if( ! empty( $text_field ) ) {
     update_post_meta( $post_id, '_text_field', esc_attr( $text_field ) );
  }
  
  // Save Number Field
  $number_field = $_POST['_number_field'];
  if( ! empty( $number_field ) ) {
     update_post_meta( $post_id, '_number_field', esc_attr( $number_field ) );
  }
  // Save Textarea
  $textarea = $_POST['_textarea'];
  if( ! empty( $textarea ) ) {
     update_post_meta( $post_id, '_textarea', esc_html( $textarea ) );
  }
  
  // Save Select
  $select = $_POST['_select'];
  if( ! empty( $select ) ) {
     update_post_meta( $post_id, '_select', esc_attr( $select ) );
  }
  
  // Save Checkbox
  $checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
  update_post_meta( $post_id, '_checkbox', $checkbox );
  
  // Save Hidden field
  $hidden = $_POST['_hidden_field'];
  if( ! empty( $hidden ) ) {
     update_post_meta( $post_id, '_hidden_field', esc_attr( $hidden ) );
  }
}

Please look esc_attr() and esc_html() two functions, this two functions used to secure data.

How To Display WooCommerce Fields Values

You are done creating WooCoomerce custom fields with saving the field’s values. So, You should display this field’s values in your website. For displaying values, you need to use WordPress get_post_meta() function. Read Code Reference.

  // Display Custom Field Value
  <?php echo get_post_meta( $post->ID, 'custom-field-slug', true );?>

  // You can also use
 <?php echo get_post_meta( get_the_ID(), 'custom-field-slug', true );?>

Completely, WooCommerce custom fields displaying done. So, you have educated how to add WooCommerce custom fields and add more data to your website products by editing the WooCommerce product page template. You can add more extra options using a plugin. But, I wouldn’t recommend the plugin. Because you should learn these functions. So, try it yourself.

I believe and I hope you liked the article. If you’re looking for an eCommerce expert for creating an eCommerce website, then please check the details of my services o Fiverr. To Check: Create an eCommerce Website. I will be happy to help.

Conclusion

Thank you for reading and If you have any questions, please feel free to comment. Don’t forget to check The Best WooCommerce Themes To Create An ECommerce Website 2020.