如何为WooCommerce产品创建面板添加自定义图片字段？

下面是实现可选择、删除图片自定义字段的完整代码，替换你现有的代码即可：

// 注册媒体上传所需的JS脚本
add_action('admin_enqueue_scripts', 'custom_product_image_field_enqueue_scripts');
function custom_product_image_field_enqueue_scripts() {
    // 只在产品编辑页面加载脚本
    global $post_type;
    if ($post_type === 'product') {
        wp_enqueue_media();
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // 上传按钮点击事件
                $('.custom-product-image-upload-btn').click(function(e) {
                    e.preventDefault();
                    var button = $(this);
                    var customUploader = wp.media({
                        title: '选择产品自定义图片',
                        library: { type: 'image' },
                        button: { text: '选择图片' },
                        multiple: false
                    }).on('select', function() {
                        var attachment = customUploader.state().get('selection').first().toJSON();
                        button.siblings('.custom-product-image-id').val(attachment.id);
                        button.siblings('.custom-product-image-preview').html('<img src="' + attachment.url + '" style="max-width: 150px; max-height: 150px;">');
                        button.siblings('.custom-product-image-remove-btn').show();
                    }).open();
                });

                // 删除按钮点击事件
                $('.custom-product-image-remove-btn').click(function(e) {
                    e.preventDefault();
                    var button = $(this);
                    button.siblings('.custom-product-image-id').val('');
                    button.siblings('.custom-product-image-preview').html('');
                    button.hide();
                });
            });
        </script>
        <?php
    }
}

// 显示自定义字段
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_image_field');
function woocommerce_product_custom_image_field() {
    global $post;
    // 获取已保存的图片ID
    $image_id = get_post_meta($post->ID, '_custom_product_image_id', true);
    // 获取图片URL用于预览
    $image_url = $image_id ? wp_get_attachment_image_url($image_id, 'medium') : '';

    echo '<div class="product_custom_field">';
    // 保留你原来的文本字段
    woocommerce_wp_text_input(array(
        'id' => '_custom_product_text_field',
        'placeholder' => '自定义产品文本字段',
        'label' => __('自定义产品文本字段', 'woocommerce'),
        'desc_tip' => 'true'
    ));

    // 新增图片自定义字段区域
    echo '<p class="form-field">';
    echo '<label for="_custom_product_image_id">' . __('自定义产品图片', 'woocommerce') . '</label>';
    echo '<div class="custom-product-image-preview" style="margin: 10px 0;">';
    if ($image_url) {
        echo '<img src="' . esc_url($image_url) . '" style="max-width: 150px; max-height: 150px;">';
    }
    echo '</div>';
    echo '<button type="button" class="button custom-product-image-upload-btn">' . __('上传图片', 'woocommerce') . '</button>';
    echo '<button type="button" class="button custom-product-image-remove-btn" style="' . ($image_id ? '' : 'display:none;') . '">' . __('删除图片', 'woocommerce') . '</button>';
    echo '<input type="hidden" id="_custom_product_image_id" name="_custom_product_image_id" value="' . esc_attr($image_id) . '" class="custom-product-image-id">';
    echo '</p>';
    echo '</div>';
}

// 保存自定义字段
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
function woocommerce_product_custom_fields_save($post_id) {
    // 保存文本字段
    $text_field = $_POST['_custom_product_text_field'] ?? '';
    update_post_meta($post_id, '_custom_product_text_field', esc_attr($text_field));

    // 保存图片字段
    $image_id = $_POST['_custom_product_image_id'] ?? '';
    if (!empty($image_id)) {
        update_post_meta($post_id, '_custom_product_image_id', absint($image_id));
    } else {
        delete_post_meta($post_id, '_custom_product_image_id');
    }
}

功能说明 #

• 图片选择：点击「上传图片」按钮会打开WordPress原生媒体库，仅支持选择单张图片
• 预览显示：选中图片后自动显示缩略图预览，方便确认
• 删除操作：点击「删除图片」按钮可清空预览并移除已保存的图片数据
• 数据存储：图片ID会保存到产品自定义元数据_custom_product_image_id中，后续在前端可通过该ID调用图片（比如用wp_get_attachment_image($image_id, 'medium')输出图片）

内容的提问来源于stack exchange，提问作者userName