在woocommerce網站的產品列表上的快速編輯選項上添加自定義產品字段

Question

如何在woocommerce商店的產品列表的快速編輯屏幕上添加自定義產品字段/ s？

Answer 1

我真的不知道這是否是做的最好的辦法，但對我來說

基本上我的總體目標是添加自定義字段的產品，我設法做到這一點（添加自定義的偉大工程字段到單個產品頁面）在這些有用的內容的幫助下。

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

我建議在繼續之前先檢查這些鏈接。

現在，我想要做的就是將這些自定義字段添加到產品列表上的快速添加選項。

這就是資源稀缺的地方。

基本上這是我做到的。

1. 將您的自定義字段（html表單）添加到快速編輯選項。 我迷上了'woocommerce_product_quick_edit_end'行動來完成這一點。 該鉤子上發現woocommerce->包括 - >管理 - >則須─> HTML的快速編輯product.php上線195

2. 保存您的自定義字段。 我迷上了'woocommerce_product_quick_edit_save'行動來完成這一點。 該鉤子上發現woocommerce->包括 - >管理 - >類-WC-管理員-後types.php功能上線929

先前的'quick_edit_save' 內有2個步驟可以實現，但它會保留值，但是通過快速編輯選項更新自定義字段後，數據將保留在後端，但不會填充到UI上的自定義字段。這就是爲什麼我們需要第三步。

添加產品內部的自定義字段的元數據列表柱，然後用JS出提取元數據然後將其填充到自定義字段

我鉤入「manage_product_posts_custom_column」行動，添加自定義HTML標籤（股利或其他）來保存我的自定義字段元數據

然後我用JavaScript來從元數據進行提取數據，並將其填充到自定義字段

第3步只是WooCommerce如何執行此過程的副本。

對於referrence，看看功能'render_product_columns' 的 woocommerce->包括 - >管理 - >類-WC-管理-後的類型。PHP

也可在位於快速edit.js看一看woocommerce->資產 - > js->管理員

例如代碼： 注意，下面的代碼是用於說明和指導目的，我的實際代碼很長很複雜。

步驟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 

}); 

步驟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); 

步驟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部分

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

}); 
}); 

確保排隊腳本

希望這可以幫助任何人，再次，我不確定這是否是最好的方式來做到這一點，但在檢查WooCommerce源代碼時，似乎WooCommerce 沒有提供方便的掛鉤輕鬆完成此任務（至少尚未）

如果您有比這更好的方法，請分享。