Add custom product field to quick edit options in product listing on woocommerce site

I'm not sure if this is the best way to do it, but it works great for me.

Basically my overall goal is to add custom fields for a product, I was able to do that (adding custom fields to individual product pages) with these helpful links.

http://www.remicorson.com/mastering-woocommerce-products-custom-fields/ http://www.remicorson.com/woocommerce-custom-fields-for-variations/

I recommend checking these links first before continuing.

Now I would like to add these custom fields to the quick add option in the product list.

This is where the resource becomes scarce.

This is basically how I did it.

• Add your custom field (html forms) in quick edit options. I followed the action 'woocommerce_product_quick_edit_end' to accomplish this. This hook is in woocommerce-> includes-> admin-> views-> html-quick-edit-product.php on line 195

• Save your custom field. To do this, I connected to the 'woocommerce_product_quick_edit_save' action . This hook is in woocommerce-> includes-> admin-> class-wc-admin-post-types.php inside the 'quick_edit_save' function on line 929

The previous 2 steps do the trick, it preserves the values, however, after updating the custom field with the quick edit option, the data is saved to the backend, but not populated in the custom field in the UI. This is why we need a third step.

3. Add custom field metadata inside product list column, then use js to fetch metadata, then populate it into custom field

I hooked up to the 'manage_product_posts_custom_column' action to add my own HTML tags (div or whatever) to store my custom field metadata

Then I used javascript to extract data from metadata and populate it into custom fields

Step 3 is just a copy of how WooCommerce performs this process.

For reference, consider the 'render_product_columns' function woocommerce-> includes-> admin-> class-wc-admin-post-types.php

Also take a look at quick-edit.js located at woocommerce-> assets-> js-> admin

Example code: Please note that the code below is used for illustration and guidance, my actual code is quite long and complex.

Step 1:

add_action( 'woocommerce_product_quick_edit_end', function(){

    /*
    Notes:
    Take a look at the name of the text field, '_custom_field_demo', that is the name of the custom field, basically its just a post meta
    The value of the text field is blank, it is intentional
    */

    ?>
    <div class="custom_field_demo">
        <label class="alignleft">
            <div class="title"><?php _e('Custom Field Demo', 'woocommerce' ); ?></div>
            <input type="text" name="_custom_field_demo" class="text" placeholder="<?php _e( 'Custom Field Demo', 'woocommerce' ); ?>" value="">
        </label>
    </div>
    <?php

} );

      

        
        
        
      

    

Step 2:

add_action('woocommerce_product_quick_edit_save', function($product){

/*
Notes:
$_REQUEST['_custom_field_demo'] -> the custom field we added above
Only save custom fields on quick edit option on appropriate product types (simple, etc..)
Custom fields are just post meta
*/

if ( $product->is_type('simple') || $product->is_type('external') ) {

    $post_id = $product->id;

    if ( isset( $_REQUEST['_custom_field_demo'] ) ) {

        $customFieldDemo = trim(esc_attr( $_REQUEST['_custom_field_demo'] ));

        // Do sanitation and Validation here

        update_post_meta( $post_id, '_custom_field_demo', wc_clean( $customFieldDemo ) );
    }

}

}, 10, 1);

      

        
        
        
      

    

Step 3:

add_action( 'manage_product_posts_custom_column', function($column,$post_id){

/*
Notes:
The 99 is just my OCD in action, I just want to make sure this callback gets executed after WooCommerce's
*/

switch ( $column ) {
    case 'name' :

        ?>
        <div class="hidden custom_field_demo_inline" id="custom_field_demo_inline_<?php echo $post_id; ?>">
            <div id="_custom_field_demo"><?php echo get_post_meta($post_id,'_custom_field_demo',true); ?></div>
        </div>
        <?php

        break;

    default :
        break;
}

}, 99, 2);

      

        
        
        
      

    

JS part

jQuery(function(){
jQuery('#the-list').on('click', '.editinline', function(){

    /**
     * Extract metadata and put it as the value for the custom field form
     */
    inlineEditPost.revert();

    var post_id = jQuery(this).closest('tr').attr('id');

    post_id = post_id.replace("post-", "");

    var $cfd_inline_data = jQuery('#custom_field_demo_inline_' + post_id),
        $wc_inline_data = jQuery('#woocommerce_inline_' + post_id );

    jQuery('input[name="_custom_field_demo"]', '.inline-edit-row').val($cfd_inline_data.find("#_custom_field_demo").text());


    /**
     * Only show custom field for appropriate types of products (simple)
     */
    var product_type = $wc_inline_data.find('.product_type').text();

    if (product_type=='simple' || product_type=='external') {
        jQuery('.custom_field_demo', '.inline-edit-row').show();
    } else {
        jQuery('.custom_field_demo', '.inline-edit-row').hide();
    }

});
});

      

        
        
        
      

    

Make sure to enter script

Hope this helps everyone, again, I'm not sure if this is the best way to do it, but after researching the WooCommerce source, it seems WooCommerce does not provide a convenient hook to accomplish this task with ease (at least not yet)

If you have a better approach please share it.