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 online shopping website.  If you can not add these fields yourself, 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.

What are WooCommerce Custom Fields?

Custom fields add additional fields to the Add/Edit Product display screen in WooCommerce. They’re perfect for storing standalone data about products. Here are some examples of when you need to use WooCommerce custom fields:

  • To store a unique product barcode, stock or reference quantity.
  • For including additional methods for individuals to work together together with your products. This is likely to be by including additional buttons (e.g. ‘Enquire about this product), icons or social sharing hyperlinks.
  • To show multimedia content concerning the product, such as embedded video or audio tracks.
  • For including shortcodes offered by different plugins, such as a WooCommerce Add to Quote or Wishlist plugins.
  • To store further notes concerning the prices or alternate price options. For instance, for those who’re using a bulk discount WooCommerce plugin and want to list the quantity-based discounts, then you’ll be able to add this information to a custom field.

The concept of a custom field is that it shops distinctive data. Since the data saved within the field is exclusive, you may show it within the WooCommerce front end – e.g. on the product element page, store or category pages. However, you wouldn’t expect to make use of this data to group or filter products. If you wish to filter by that type of data, then you want a custom taxonomy instead.

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

Copy to Clipboard

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.



Copy to Clipboard

OR, if needed, You can follow the following code for display WooCommerce Custom Fields.



Copy to Clipboard

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.