問題描述

我創(chuàng)建了一個(gè)自定義插件，可在 woocommerce 單個(gè)產(chǎn)品頁(yè)面中動(dòng)態(tài)顯示自定義字段.字段顯示、添加到購(gòu)物車和添加到訂單數(shù)據(jù)和電子郵件.但是，我嘗試了好幾天來(lái)添加文件上傳字段，但沒有運(yùn)氣.該字段顯示在前端，如:

i have created a custom plugin which dynamically displays custom fields in woocommerce single product page. Fields are displayed, added to cart and added to order data and emails. However i'm trying for days to add a file upload field with no luck. The field is displayed in the frontend like:

add_action( 'woocommerce_before_add_to_cart_button', 'display_custom_fields' );
function display_custom_fields() {
?>
    <p class="form-row validate-required" id="image" >
        <span class="woocommerce-input-wrapper">
        <label for="image" class=""><?php echo $stamp_welcome_text; ?> </label> 
        
        <input type="file" name="image" accept="image/*" >
        </span>
    </p>
<?php
}

然后添加到購(gòu)物車中:

add_filter( 'woocommerce_add_cart_item_data', 'add_cart_item_data', 10,3 );
function add_cart_item_data( $cart_item_data, $product_id ) {
    if ($_FILES['image'] ) {
        require_once( ABSPATH . 'wp-admin/includes/image.php' );
        require_once( ABSPATH . 'wp-admin/includes/file.php' );
        require_once( ABSPATH . 'wp-admin/includes/media.php' );
        $attachment_id = media_handle_upload( 'image', 0 );
        if ( is_wp_error( $attachment_id ) AND $_FILES['image']['size'] > 0) {
            die($attachment_id->get_error_message().'. Παρακαλ? επικοινων?στε μαζ? μα?.');
        } else $cart_item_data['image'] = $attachment_id;
    }
    return $item_cart_data;
}

當(dāng)然，這只是代碼的一部分.其余字段工作正常.是的，如果有人想知道，我只嘗試過代碼本身.

Of course this is only part of the code.The rest of the fields are working perfect. Yes, i have tried the code only by itself if anyone wonders.

我一直在玩"用了幾天，我不知道出了什么問題.非常感謝任何幫助:)

I have been "playing" around with it for days and i can't figure out what's wrong. Any help is highly appreciated :)

推薦答案

您可以嘗試以下操作，將上傳的圖像數(shù)據(jù)存儲(chǔ)為自定義購(gòu)物車項(xiàng)目數(shù)據(jù)并將其保存為自定義訂單項(xiàng)目元數(shù)據(jù):

You could try the following, that will store uploaded image data as custom cart item data and save it as custom order item meta data:

// Display additional product fields (+ jQuery code)
add_action( 'woocommerce_before_add_to_cart_button', 'display_additional_product_fields', 9 );
function display_additional_product_fields(){
    ?>
    <p class="form-row validate-required" id="image" >
        <label for="file_field"><?php echo __("Upload Image") . ': '; ?>
            <input type='file' name='image' accept='image/*'>
        </label>
    </p>
    <?php
}


// Add custom fields data as the cart item custom data
add_filter( 'woocommerce_add_cart_item_data', 'add_custom_fields_data_as_custom_cart_item_data', 10, 2 );
function add_custom_fields_data_as_custom_cart_item_data( $cart_item, $product_id ){
    if( isset($_FILES['image']) && ! empty($_FILES['image']) ) {
        $upload       = wp_upload_bits( $_FILES['image']['name'], null, file_get_contents( $_FILES['image']['tmp_name'] ) );
        $filetype     = wp_check_filetype( basename( $upload['file'] ), null );
        $upload_dir   = wp_upload_dir();
        $upl_base_url = is_ssl() ? str_replace('http://', 'https://', $upload_dir['baseurl']) : $upload_dir['baseurl'];
        $base_name    = basename( $upload['file'] );

        $cart_item['file_upload'] = array(
            'guid'      => $upl_base_url .'/'. _wp_relative_upload_path( $upload['file'] ), // Url
            'file_type' => $filetype['type'], // File type
            'file_name' => $base_name, // File name
            'title'     => ucfirst( preg_replace('/.[^.]+$/', '', $base_name ) ), // Title
        );
        $cart_item['unique_key'] = md5( microtime().rand() ); // Avoid merging items
    }
    return $cart_item;
}

// Display custom cart item data in cart (optional)
add_filter( 'woocommerce_get_item_data', 'display_custom_item_data', 10, 2 );
function display_custom_item_data( $cart_item_data, $cart_item ) {
    if ( isset( $cart_item['file_upload']['title'] ) ){
        $cart_item_data[] = array(
            'name' => __( 'Image uploaded', 'woocommerce' ),
            'value' =>  str_pad($cart_item['file_upload']['title'], 16, 'X', STR_PAD_LEFT) . '…',
        );
    }
    return $cart_item_data;
}

// Save Image data as order item meta data
add_action( 'woocommerce_checkout_create_order_line_item', 'custom_field_update_order_item_meta', 20, 4 );
function custom_field_update_order_item_meta( $item, $cart_item_key, $values, $order ) {
    if ( isset( $values['file_upload'] ) ){
        $item->update_meta_data( '_img_file',  $values['file_upload'] );
    }
}

// Admin orders: Display a linked button + the link of the image file
add_action( 'woocommerce_after_order_itemmeta', 'backend_image_link_after_order_itemmeta', 10, 3 );
function backend_image_link_after_order_itemmeta( $item_id, $item, $product ) {
    // Only in backend for order line items (avoiding errors)
    if( is_admin() && $item->is_type('line_item') && $file_data = $item->get_meta( '_img_file' ) ){
        echo '<p><a href="'.$file_data['guid'].'" target="_blank" class="button">'.__("Open Image") . '</a></p>'; // Optional
        echo '<p><code>'.$file_data['guid'].'</code></p>'; // Optional
    }
}

// Admin new order email: Display a linked button + the link of the image file
add_action( 'woocommerce_email_after_order_table', 'wc_email_new_order_custom_meta_data', 10, 4);
function wc_email_new_order_custom_meta_data( $order, $sent_to_admin, $plain_text, $email ){
    // On "new order" email notifications
    if ( 'new_order' === $email->id ) {
        foreach ($order->get_items() as $item ) {
            if ( $file_data = $item->get_meta( '_img_file' ) ) {
                echo '<p>
                    <a href="'.$file_data['guid'].'" target="_blank" class="button">'.__("Download Image") . '</a><br>
                    <pre><code style="font-size:12px; background-color:#eee; padding:5px;">'.$file_data['guid'].'</code></pre>
                </p><br>';
            }
        }
    }
}

此代碼位于活動(dòng)子主題(或活動(dòng)主題)的 functions.php 文件中.

This code goes in functions.php file of your active child theme (or active theme).

在 Woocommerce 4.3.x 版中進(jìn)行測(cè)試，可與所有類型的默認(rèn) WooCommerce 產(chǎn)品配合使用.

Tested in Woocommerce version 4.3.x and working with default WooCommerce products from all types.

這篇關(guān)于WooCommerce單品添加圖片文件上傳字段的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！