WooCommerce Product Data Custom Field

WooCommerce Product Data Custom Tab

8 Jul, 2020
Chrille Hedberg
Custom Field | WooCommerce

In this article, we’ll look at how to create your own custom field for product data in WooCommerce. Some time ago, I wrote an article about sometimes wanting to collect or add some certain information in an order, and therefore wrote about how to add custom fields in the WooCommerce checkout. This time it’s about storing information in the backend, directly in the product. I’ve built my own little tab into one of my webshops, to be able to add data as a little “reminder” to myself.

WooCommerce Product Data Custom Tab And Custom Data Field

It is possible to enter a simple text field (single line), number fields, checkbox, radio buttons, dropdown, and a multi-line text field.

With a little Googling, you can find plugins that can do this for one as well. Plugin Republic has one that seems to be able to do the trick.

WooCommerce input field

  • Single Line Text Field – woocommerce_wp_text_input()
  • Number field – woocommerce_wp_text_input()
  • Radio button – woocommerce_wp_radio()
  • Checkbox – woocommerce_wp_checkbox()
  • Dropdown – woocommerce_wp_select()
  • Multi-line Text Field – woocommerce_wp_textarea_input()
  • Hidden Field – woocommerce_wp_hidden_input()

The arguments that can be used are (id, type, label, description, desc_tip, laceholder).

Add a custom tab

In order to add a tab as the one in the image, the one called “Egen flick” (in the image), you first of all need a child theme. If you don’t have a child theme and add this code to your functions.php, they’ll be overwritten the next time you update the theme, and it’ll be all gone!

Option 1: add the code to functions.php
Option 2: create a file and put all PHP code there, and call the file within the functions.php.

To call the file from within functions.php, use:

include_once('itprojekt_custom_woocommerce_product_tab.php');

If you want to get started straight away, I have already created a PHP file for you with all the code in it. Just download, edit the field names, and upload it to your server!

WooCommerce Product Data Custom Tab And Custom Data Field

The number field has a minimum value set to 15, and has switches on the side to step one at a time.

WooCommerce Product Data Custom Tab And Custom Data Field

The dropdown works just like a regular dropdown. =)

Create tab

To create the tab in WooCommerce, add the following code at the top of the file:

<?php

We'll start by connecting to the hook 'woocommerce_product_data_tabs'

add_filter( 'woocommerce_product_data_tabs', 'itp_egen_flik');

function itp_egen_flik( $product_data_tabs ) {
 $product_data_tabs['custom tab'] = array(
 'label' = > __( 'Custom tab', 'woocommerce'), // Enter the name of the tab
 'target' = > 'itp_egen_flik_data',
 );
 return $product_data_tabs;
}

/** We want a little icon on the tab too */

function wcpp_custom_style() {?>
<style>
#woocommerce-product-data ul.wc-tabs li.egen-flik_options a:before { font-family: WooCommerce; content: '\e006'; }
</style>

Add custom field

If you use option 1, and paste the code into functions.php, remove < ?php } at the top of the file and copy from the first add_action.

<?php 
}
add_action( 'admin_head', 'wcpp_custom_style');

Here we'll add the different fields

add_action('woocommerce_product_data_panels', 'woocom_custom_product_data_fields');
function woocom_custom_product_data_fields() {
 global $post;
 Note that 'id' must match the 'target' parameter above
 ?> <div id = 'itp_egen_flik_data'
 class = 'panel woocommerce_options_panel' > < ?php
 ?> <div class = 'options_group' > < ?php

 Single Line Text Field
 woocommerce_wp_text_input(
 array(
 'id' = > '_itp_enkel_text',
 'label' = > __( 'Single Line', 'woocommerce'),
 'wrapper_class' = > 'show_if_simple', //show_if_simple or show_if_variable
 'placeholder' = > 'Placeholder',
 'desc_tip' = > 'true',
 'description' = > __( 'Description in tooltip.', 'woocommerce' )
  )
 );

 // Number fields
 woocommerce_wp_text_input(
 array(
 'id' = > '_itp_siffror',
 'label' = > __( 'Number field', 'woocommerce'),
 'placeholder' = > '',
 'description' = > __( 'Enter value.', 'woocommerce'),
 'type' = > 'number',
 'custom_attributes' = > array(
 'step' = > 'any',
 'min' = > '15' // Here you can enter a minimum value
  )
  )
 );

 // Checkbox
 woocommerce_wp_checkbox(
 array(
 'id' = > '_itp_kryssruta',
 'label' = > __('Checkbox', 'woocommerce'),
 'description' = > __( 'Check box!', 'woocommerce' )
  )
 );
  
 // Radio button
 woocommerce_wp_radio(
 array(
 'id' = > '_itp_radio',
 'label' = > __('Radio button', 'woocommerce'),
 'description' = > __( 'Choose one of two options', 'woocommerce'),
 'options' = > array(
 'One' = > __( 'Alt 1', 'woocommerce'),
 'Two' = > __( 'Alt 2', 'woocommerce' )
  )
  )
 );
  
 // Dropdown
 woocommerce_wp_select(
 array(
 'id' = > '_itp_rullgardin',
 'label' = > __( 'Dropdown', 'woocommerce'),
 'options' = > array(
 'Alpha' = > __( 'Alpha', 'woocommerce'),
 'Beta' = > __( 'Beta', 'woocommerce'),
 'Gamma' = > __( 'Gamma', 'woocommerce')
  )
  )
 );
  
 // Multi-line Text Field
 woocommerce_wp_textarea_input(
 array(
 'id' = > '_itp_textarea',
 'label' = > __( 'Text area', 'woocommerce'),
 'placeholder' = > '',
 'description' = > __( 'Maybe for a note?', 'woocommerce' )
  )
 );
 ?> </div>
    </div><?php
}

Save the fields

We need to save the fields in the database as well.

/** Might be a good idea to save the data? */
function woocom_save_proddata_custom_fields($post_id) {

 // Save Single Line Field
 $text_field = $_POST['_itp_enkel_text'];
 if (!empty($text_field)) {
 update_post_meta($post_id, '_itp_enkel_text', esc_attr($text_field));
  }

 // Save Number Field
 $number_field = $_POST['_itp_siffror'];
 if (!empty($number_field)) {
 update_post_meta($post_id, '_itp_siffror', esc_attr($number_field));
  }

 // Save Multi-line Field
 $textarea = $_POST['_textarea'];
 if (!empty($textarea)) {
 update_post_meta($post_id, '_itp_textarea', esc_html($textarea));
  }

 // Save Dropdown
 $select = $_POST['_itp_rullgardin'];
 if (!empty($select)) {
 update_post_meta($post_id, '_itp_rullgardin', esc_attr($select));
  }
 // Save Checkbox
 $checkbox = isset($_POST['_itp_kryssruta']) ? 'yes' : 'no';
 update_post_meta($post_id, '_itp_kryssruta', $checkbox);

 // Save Radio Button
 $select = $_POST['_itp_radio'];
 if (!empty($select)) {
 update_post_meta($post_id, '_itp_radio', esc_attr($select));
  }
}
add_action( 'woocommerce_process_product_meta_simple', 'woocom_save_proddata_custom_fields');

?>

If you have used option 1 and pasted the code in your functions.php, make sure to not include the closing ? > at the bottom.

Hope you’ll enjoy your new, custom product data fields! 🙂

Chrille Hedberg

Chrille Hedberg

Jag har jobbat med WordPress i dryga 10 års tid, främst på hobbynivå. Jag har blivit lite av en mästare på att knyta ihop olika tillägg för att få funktioner att lira ihop som de ska. Jag har också blivit rätt bra på det! Har nu startat ITprojekt.se främst för att hjälpa småföretagare som sitter illa till på grund av coronasituationen. Tillsammans med kollegan Martin tar vi olika uppdrag inom just området ITprojekt, men vi taggas lite extra av att kombinera teknik med försäljning. Har bakgrund från vården innan jag skolade om mig till ingenjör och sedan trillade in på bana som säljare. Jobbar nu med teknisk försäljning och är regionansvarig för motsvarande halva Sveriges yta.

0 Comments

Submit a Comment

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

Share This