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-var

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 );
    }

}

Answer 2

I have found the following code from here working with WooCommerce 4.8.0

/**
 * Create new fields for variations
 *
*/
function hrx_variation_settings_fields( $loop, $variation_data, $variation ) {

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => 'isbn_field[' . $variation->ID . ']', 
            'label'       => __( 'ISBN', 'texdomain' ), 
            'placeholder' => '',
            'desc_tip'    => 'true',
            'description' => __( 'ISBN', 'texdomain' ),
            'value'       => get_post_meta( $variation->ID, 'isbn_field', true )
        )
    );

}
add_action( 'woocommerce_product_after_variable_attributes', 'hrx_variation_settings_fields', 10, 3 );

/**
 * Save new fields for variations
 *
*/
function hrx_save_variation_settings_fields( $post_id ) {

    // Text Field
    $isbn_value = $_POST['isbn_field'][ $post_id ];
    if( ! empty( $isbn_value ) ) {
        update_post_meta( $post_id, 'isbn_field', esc_attr( $isbn_value ) );
    }
    

}
add_action( 'woocommerce_save_product_variation', 'hrx_save_variation_settings_fields', 10, 2 );

WooCommerce : add custom fields to product variations