如何在woocommerce商店的产品列表中的快速编辑屏幕上添加自定义产品字段？
答案 0 :(得分：15)
我不确定这是否是最好的方法，但它对我很有用
基本上我的总体目标是为产品添加自定义字段，我设法做到这一点（在单个产品页面中添加自定义字段）借助这些有用的内容。
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/ http://www.remicorson.com/woocommerce-custom-fields-for-variations/
我建议您先行检查这些链接。
现在，我想要做的是将这些自定义字段添加到产品列表中的快速添加选项。
资源稀缺的地方。
基本上我就是这样做的。
将自定义字段（html表单）添加到快速编辑选项中。 我迷上了＆＃39; woocommerce_product_quick_edit_end＆＃39; 操作来实现这一目标。 此挂钩位于第195行
woocommerce-＆gt; includes-＆gt; admin-＆gt; views-＆gt; html-quick-edit-product.php 上>保存自定义字段。 我迷上了＆＃39; woocommerce_product_quick_edit_save＆＃39; 操作来实现这一目标。 这个钩子可以在＆＃39; quick_edit_save＆＃39; woocommerce-＆gt; includes-＆gt; admin-＆gt; class-wc-admin-post-types.php 中找到strong>功能第929行
前面的两个步骤可以解决问题，它会保留值，但是在通过快速编辑选项更新自定义字段后，数据会保留在后端，但不会填充到UI上的自定义字段。这就是我们需要第三步的原因。
我迷上了＆＃39; manage_product_posts_custom_column＆＃39; 操作，以添加自定义HTML标记（div或其他）来保存我的自定义字段元数据
然后我使用javascript从元数据中提取数据并将其填充到自定义字段
第3步只是WooCommerce如何完成此过程的副本。
如需参考，请查看 woocommerce-＆gt;包含 - ＆gt; admin-＆gt; class-wc-admin-post-的功能＆＃39; render_product_columns＆＃39; types.php
另请参阅位于 woocommerce-＆gt; assets-＆gt; js-＆gt; admin
的 quick-edit.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 没有提供方便的钩子来轻松完成这项任务（至少还没有）
如果你有更好的方法，请分享。