在 woocommerce 网站的产品列表上的快速编辑选项上添加自定义产品字段

Question

如何在 woocommerce 商店的产品列表的快速编辑屏幕上添加自定义产品字段？

Answer 1

我不确定这是否是最好的方法，但它对我很有用

基本上，我的总体目标是为产品添加自定义字段，在这些有用的 tuts 的帮助下，我设法做到了（将自定义字段添加到单个产品页面）。

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->includes->admin->views->html-quick-edit-product.php 的 line 195

2. 保存您的自定义字段。 我加入了 'woocommerce_product_quick_edit_save' 操作来完成此操作。 这个钩子位于 行的 'quick_edit_save' 函数中的 woocommerce->includes->admin->class-wc-admin-post-types.php 上929

前面的 2 个步骤可以解决问题，它确实保留了值，但是在通过快速编辑选项更新自定义字段后，数据会保留在后端，但不会填充到 UI 上的自定义字段中。这就是为什么我们需要第三步。

1. 在商品列表栏内添加自定义字段元数据，然后使用js将元数据提取出来填充到自定义字段中

我加入了 'manage_product_posts_custom_column' 操作以添加自定义 HTML 标签（div 或其他）来保存我的自定义字段元数据

然后我使用 javascript 从元数据中提取数据并将其填充到自定义字段中

第 3 步只是 WooCommerce 如何执行此过程的副本。

作为参考，请查看woocommerce->includes->admin->class-wc-admin-post-types.php的函数'render_product_columns' /p>

还可以查看位于 woocommerce->assets->js->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 没有提供方便的钩子来轻松完成这项任务（至少现在还没有）

如果您有比这更好的方法，请分享。