php - WooCommerce : add custom fields to product variations

Question

I need help adding custom fields to my Product Variations and Simple Product pages. I tried using RemiCorson's info (http://www.remicorson.com/woocommerce-custom-fields-for-variations/), but I keep getting an error. I tried to duplicate what I saw in this user's posts for ISBN but it's not working for me.

The problem with the code below is that it doesn't show up on the live site. All help is greatly appreciated, I've spent most of today trying to figure out what I'm doing wrong.

Adding 6 custom text fields and 1 check box to both Simple Product and Variable Product pages in Woocommerce. These are not fields to be supplied (i.e. filled out) by the shopper, but rather custom information I want displayed on my product pages (and NOT within a tab).

// 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">';

  // Custom fields will be created here...

// Text Field
woocommerce_wp_text_input( 
    array( 
        'id'          => '_ISBN_field', 
        'label'       => __( 'ISBN', 'woocommerce' ), 
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( 'ISBN.', 'woocommerce' ) 
    )
);
function woo_add_custom_general_fields_save( $post_id ){

// Customer text ISBN Field
$woocommerce_text_field = $_POST['_ISBN_field'];
if( !empty( $woocommerce_text_field ) )
    update_post_meta( $post_id, '_ISBN_field', esc_attr( $woocommerce_text_field ) );
else
    update_post_meta( $post_id, '_ISBN_field', '' );
}
// Display Custom Field Value
echo get_post_meta( $post->ID, '_ISBN_field', true );

}
/* WooCommerce */

/* ----------------------------------------------------------------------------------- */
/* Start WooThemes Functions - Please refrain from editing this section */
/* ----------------------------------------------------------------------------------- */

Answer 1

I have never needed to bother with woocommerce_product_after_variable_attributes_js, you just need to add the input and then deal with saving it.

Another thing that has changed since Remi's article was published is that the WooCommerce variation meta data is no longer printed in a <Table> element... and is now a <div> element. This is important for how you structure your new content.

Here's is how you'd add a meta field to a variation:

// regular variable products
add_action( 'woocommerce_product_after_variable_attributes', 'add_to_variations_metabox', 10, 3 );
add_action( 'woocommerce_save_product_variation', 'save_product_variation', 20, 2 );


/*
 * Add new inputs to each variation
 *
 * @param string $loop
 * @param array $variation_data
 * @return print HTML
 */
function add_to_variations_metabox( $loop, $variation_data, $variation ){

    $custom = get_post_meta( $variation->ID, '_custom', true ); ?>

        <div class="variable_custom_field">
            <p class="form-row form-row-first">
                <label><?php echo __( 'Custom Data:', 'plugin_textdomain' ); ?></label>
                <input type="text" size="5" name="variation_custom_data[<?php echo $loop; ?>]" value="<?php echo esc_attr( $custom ); ?>" />
            </p>
        </div>

    <?php 

}

/*
 * Save extra meta info for variable products
 *
 * @param int $variation_id
 * @param int $i
 * return void
 */
function save_product_variation( $variation_id, $i ){

    // save custom data
    if ( isset( $_POST['variation_custom_data'][$i] ) ) {
        // sanitize data in way that makes sense for your data type
        $custom_data = ( trim( $_POST['variation_custom_data'][$i]  ) === '' ) ? '' : sanitize_title( $_POST['variation_custom_data'][$i] );
        update_post_meta( $variation_id, '_custom', $custom_data );
    }

}