WooCommerce Products Custom Fields

The right hooks

The first step is to hook an action to woocommerce_product_options_general_product_data. The function linked to this hook will be responsible of the new fields display. A second hook will be taken into account to save fields values: woocommerce_process_product_meta. Basically these two actions will be done using that code:

// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

Adding New Fields

The snippet above link two custom functions to the right hooks. Now we need to create those functions. Let’s start bye the first one, woo_add_custom_general_fields(), that will create the fields. Here is how the function will look like

function woo_add_custom_general_fields() {
    global $woocommerce, $post; 
    echo '<div class="options_group">';
    // Custom fields will be created here...
    echo '</div>';
}

To create our fields we will mainly use WooCommerce builtin function like (All these functions are located in WooCommerce/Admin/WritePanels/writepanels-init.php.):

• woocommerce_wp_text_input()
• woocommerce_wp_textarea_input()
• woocommerce_wp_select()
• woocommerce_wp_checkbox()
• woocommerce_wp_hidden_input()

Text Field Type

To create a text field type, you will need to use that code:

// Text Field
woocommerce_wp_text_input(
    array(
        'id' => '_text_field',
        'label' => __( 'My Text Field', 'woocommerce' ),
        'placeholder' => 'http://',
        'desc_tip' => 'true',
        'description' => __( 'Enter the custom value here.', 'woocommerce' )
    )
);

Please note the use of desc_tip to display those little nice bubble to the right of the field instead of displaying the default field description. This attribute works for every field type.

Number Field Type

To create a number field type, you will have to use that code:

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

The main difference here is the type attribute set to number. You can also define custom attributes like step, and min, or even max. In the code above, step is the default one (1), and min is set to zero. Basically that means that we expect a positive value here (at least greater than zero).

Textarea Field Type

To create a textarea, here is the code to use:

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

Nothing really complex here…

Dropdown Select Field Type

To create a dropdown select, use the following code:

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

The options attributes defines available options within an array.

Checkbox Field Type

To create a checkbox, use this code below:

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

Hidden Field Type

You can also create hidden fields with the following code:

// Hidden field
woocommerce_wp_hidden_input(
    array( 
        'id' => '_hidden_field', 
        'value' => 'hidden_value'
    )
);

Products Select Field Type

There’s a really nice way to create a customized dropdown select for WooCommerce products with that code:

// Product Select
?>
<p class="form-field product_field_type">
    <label for="product_field_type"><?php _e( 'Product Select', 'woocommerce' ); ?></label>
    <select id="product_field_type" name="product_field_tvype[]" class="ajax_chosen_select_products" multiple="multiple" data-placeholder="<?php _e( 'Search for a product&hellip;', 'woocommerce' ); ?>">
        <?php
            $product_field_type_ids = get_post_meta( $post->ID, '_product_field_type_ids', true );
            $product_ids = ! empty( $product_field_type_ids ) ? array_map( 'absint', $product_field_type_ids ) : null;
            if ( $product_ids ) {
                foreach ( $product_ids as $product_id ) {
                    $product = get_product( $product_id );
                    $product_name = woocommerce_get_formatted_product_name( $product );
                    echo '<option value="' . esc_attr( $product_id ) . '" selected="selected">' . esc_html( $product_name ) . '</option>';
                }
            }
        ?>
    </select> 
    <img class="help_tip" data-tip='<?php _e( 'Your description here', 'woocommerce' ) ?>' src="<?php echo $woocommerce->plugin_url(); ?>/assets/images/help.png" height="16" width="16" />
</p>
<?php

Custom Field Type

You can also create custom fields. In the example below, i created a “double field”. You can customize that code and use as many fields as you want that will be merged into one single array:

// Custom field Type
?>
<p class="form-field custom_field_type">
    <label for="custom_field_type"><?php echo __( 'Custom Field Type', 'woocommerce' ); ?></label>
    <span class="wrap">
        <?php $custom_field_type = get_post_meta( $post->ID, '_custom_field_type', true ); ?> 
        <input placeholder="<?php _e( 'Field One', 'woocommerce' ); ?>" class="" type="number" name="_field_one" value="<?php echo $custom_field_type[0]; ?>" step="any" min="0" style="width: 80px;" />
        <input placeholder="<?php _e( 'Field Two', 'woocommerce' ); ?>" type="number" name="_field_two" value="<?php echo $custom_field_type[1]; ?>" step="any" min="0" style="width: 80px;" />
    </span>
    <span class="description"><?php _e( 'Place your own description here!', 'woocommerce' ); ?></span>
</p>
<?php

Custom fields can be pretty much everything, just make sure that you use the form-field class to make them pretty!

Saving Fields Values

Now that you created your WooCommerce product fields, you need to create a function to save their values once you edit the update or publish button. As we saw earlier, we will use a function called woo_add_custom_general_fields_save() hooked to woocommerce_process_product_meta. Basically the idea behind this function is pretty simple: we check if the field is empty and if not we create a post meta usingupdate_post_meta(). Please note that we use esc_attr() and esc_html() to secure data just a bit. Here is the code to save each field type values:

function woo_add_custom_general_fields_save( $post_id ){
    // Text Field
    $woocommerce_text_field = $_POST['_text_field'];
    if( !empty( $woocommerce_text_field ) )
        update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );

    // Number Field
    $woocommerce_number_field = $_POST['_number_field'];
    if( !empty( $woocommerce_number_field ) )
        update_post_meta( $post_id, '_number_field', esc_attr( $woocommerce_number_field ) );

    // Textarea
    $woocommerce_textarea = $_POST['_textarea'];
    if( !empty( $woocommerce_textarea ) )
        update_post_meta( $post_id, '_textarea', esc_html( $woocommerce_textarea ) );

    // Select
    $woocommerce_select = $_POST['_select'];
    if( !empty( $woocommerce_select ) )
        update_post_meta( $post_id, '_select', esc_attr( $woocommerce_select ) );

    // Checkbox
    $woocommerce_checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_checkbox', $woocommerce_checkbox );

    // Custom Field
    $custom_field_type = array( esc_attr( $_POST['_field_one'] ), esc_attr( $_POST['_field_two'] ) );
    update_post_meta( $post_id, '_custom_field_type', $custom_field_type );

    // Hidden Field
    $woocommerce_hidden_field = $_POST['_hidden_field'];
    if( !empty( $woocommerce_hidden_field ) )
        update_post_meta( $post_id, '_hidden_field', esc_attr( $woocommerce_hidden_field ) );

    // Product Field Type
    $product_field_type = $_POST['product_field_type'];
    update_post_meta( $post_id, '_product_field_type_ids', $product_field_type );
}

Here is the result:

Retrieve Fields Values

Now that we successfully created our fields and saved their values, i guess you’d like to display those values on the frontend. In this case the best method would be to work with WooCommerce custom templates. Basically a custom template allows you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates: http://docs.woothemes.com/document/template-structure/

To get those values we just need to use the popular get_post_meta() function. That’s pretty much all you need.

Example:

<?php
    // Display Custom Field Value
    echo get_post_meta( $post->ID, 'my-field-slug', true );
    // You can also use
    echo get_post_meta( get_the_ID(), 'my-field-slug', true );
?>

Create Custom Tabs

Finally here is a quick snippet to create a custom product tab:

add_action( 'woocommerce_product_write_panel_tabs', 'woo_add_custom_admin_product_tab' );
function woo_add_custom_admin_product_tab() {
    ?>
    <li class="custom_tab"><a href="#custom_tab_data"><?php _e('My Custom Tab', 'woocommerce'); ?></a></li>
    <?php
}

I recommend you to style your tab using a bit of CSS (simply add a nice icon and you’re done!).

One More Thing

One more thing: if you want to add your fields to any other tab than the general one you simply need to modify the hook name you linked your woo_add_custom_general_fields() function to. Fo example use that hook woocommerce_product_options_shipping to add your fields to the shipping tab. You can find all the available hooks in  woocommerce/admin/post-types/writepanels/writepanel-product_data.php.

**************************************************************************** This is working fine.
functions.php

/*-----------------------------------------------------------------------------------*/
/* sample_video_icw | InCreativeWeb
/*-----------------------------------------------------------------------------------*/
function add_sample_video_link_icw() {
    global $post;
    //pr($post);
    $samplevideo = get_post_meta( $post->ID, '_sample_video_icw', true );
    if(!empty($samplevideo)){
        echo '<a href="http://www.youtube.com/embed/'.$samplevideo.'?rel=0&wmode=transparent&autoplay=1" class="sample-video-link fancybox fancybox.iframe">Demo</a>';
    }
    //echo '<a href="http://www.youtube.com/embed/9oK0miOgSQ4?rel=0&wmode=transparent&autoplay=1" class="fancybox fancybox.iframe">Demo</a>';
}
add_action( 'woocommerce_before_add_to_cart_button', 'add_sample_video_link_icw' );
add_action( 'woocommerce_after_shop_loop_item', 'add_sample_video_link_icw' );

/*-----------------------------------------------------------------------------------*/
/* sample_video_icw | InCreativeWeb
/*-----------------------------------------------------------------------------------*/
// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
function woo_add_custom_general_fields() {
    global $woocommerce, $post;
    echo '<div class="options_group" style="background: #F1F1F1;border: 5px solid #4BDB1E;">';
    // Text Field
    woocommerce_wp_text_input(
        array( 
            'id' => '_sample_video_icw', 
            'label' => __( 'Sample Video Link', 'woocommerce' ), 
            'placeholder' => '9oK0miOgSQ4',
            'desc_tip' => 'true',
            'description' => __( 'Enter YouTube video link. ex: 9oK0miOgSQ4', 'woocommerce' ) 
        )
    );
    echo '</div>';
}
function woo_add_custom_general_fields_save( $post_id ){
    // Text Field
    $woocommerce_text_field = $_POST['_sample_video_icw'];
    if( !empty( $woocommerce_text_field ) )
        update_post_meta( $post_id, '_sample_video_icw', esc_attr( $woocommerce_text_field ) );
}