WooCommerce Product Data Custom Tab

WooCommerce Product Data Custom Tab

In this article, we’ll look at how to create your own custom tab for product data in WooCommerce. Some time ago, I wrote an article about sometimes wanting to collect or add 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.

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, placeholder).

Add a custom tab

In order to add a tab like the one in the image, the one called ”Egen flik” (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('intertech_custom_woocommerce_product_tab.php');

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! 🙂

Nyhetsbrev

Tjänster

Hemsida

Enkel att uppdatera, sköta om och utöka vid behov.

WordPress

Snabb sida som visas bra i alla enheter.
Läs mer

Webbshop

Med en webbshop i WooCommerce kan du sälja produkter och tjänster.

WooCommerce

Ta betalt med Klarna, Swish eller avbetalning - direkt online.
Läs mer

Affärssystem

Få koll på offert, order, inköp, lager och kunder - i samma system.

Odoo

Äg ditt affärssystem - och all data det innehåller. Till 100%!
Läs mer