将自定义上传的图片文件添加到 WooCommerce 产品表和发票 PDF

Question

Hello community,

I want to show an image uploaded via custom-field on the product table and finally on the PDF invoice …

I use this solution: Add image file upload field to WooCommerce single products ( LoicTheAztec 's answer)

to make the image-upload work and now I want to extent this solution to show the image (img-name or img-url) also on the product table (emails) and finally on the PDF invoice …

How can I do this? Can someone help me?

Here ist the code from my functions.php:

// -----------------------------------------
    
    // Image-Upload 
    
// -----------------------------------------
    
    // Display additional product fields (+ jQuery code)
    add_action( 'woocommerce_before_variations_form', 'display_additional_product_fields', 9 );
    function display_additional_product_fields(){
        global $product;
        $id = $product->get_id();
        if(($id == 41745 ) || ($id == 41769 )):
        ?>
        <p class="_customvariations form-row validate-required" id="image" >
            <label for="file_field"><span style="color:#000000; font-weight:600;"><?php echo __("Bild hochladen") . ''; ?></span>
                <input type='file' name='image' accept='image/*'>
            </label>
        </p>
        <?php
        endif;
    }
    
    
    // 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' => __( 'Individuelles Bild', 'woocommerce' ),
                'value' =>  str_pad($cart_item['file_upload']['title'], 16, ' ', 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">'.__("Individuelles Bild öffnen") . '</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">'.__("Individuelles Bild herunterladen") . '</a><br>
                        <pre><code style="font-size:12px; background-color:#eee; padding:5px;">'.$file_data['guid'].'</code></pre>
                    </p><br>';
                }
            }
        //}
    }

Thank you very much!

Edit:

Thanks Vincenzo Di Gaetano! Great answer, but I miss one little thing :

I would like to show the image-filename on the email attached PDF-invoice (I use woocommerce germanized plugin for german market, but I think this is not relevant because of order item meta).

I have a working custom textfield (code below) which shows the custom text everywhere, also on the email attached PDF-invoice. But I can't get this work for my image file-upload …

// -----------------------------------------

// Custom textfield

// -----------------------------------------


// 1. Show custom input field above Add to Cart

add_action( 'woocommerce_before_variations_form', 'wasentogo_product_add_on', 9 );

function wasentogo_product_add_on() {
    global $product;
    $id = $product->get_id();
    if(($id == 41745 ) || ($id == 41775 )):
    

    $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['_custom_text_add_on'] ) : '';

    echo '<p class="_customvariations"><label><span style="color:#000000; font-weight:600;">Text eingeben</span><input name="custom_text_add_on" value="' . $value . '" maxlength="25"><abbr class="required" title="required"></abbr> max. 25 Zeichen</label></p>';
    
    endif;

}

// -----------------------------------------

// 2. Throw error if custom input field empty

add_filter( 'woocommerce_add_to_cart_validation', 'wasentogo_product_add_on_validation', 10, 3 );

function wasentogo_product_add_on_validation( $passed, $product_id, $qty ){

   if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {

      wc_add_notice( 'Sie müssen erst einen individuellen Text eingeben!', 'error' );

      $passed = false;

   }

   return $passed;

}

// -----------------------------------------

// 3. Save custom input field value into cart item data

add_filter( 'woocommerce_add_cart_item_data', 'wasentogo_product_add_on_cart_item_data', 10, 2 );

function wasentogo_product_add_on_cart_item_data( $cart_item, $product_id ){

    if( isset( $_POST['custom_text_add_on'] ) ) {

        $cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );

    }

    return $cart_item;

}

// -----------------------------------------

// 4. Display custom input field value @ Cart

add_filter( 'woocommerce_get_item_data', 'wasentogo_product_add_on_display_cart', 10, 2 );

function wasentogo_product_add_on_display_cart( $data, $cart_item ) {

    if ( isset( $cart_item['custom_text_add_on'] ) ){

        $data[] = array(

            'name' => 'Individueller Text',

            'value' => sanitize_text_field( $cart_item['custom_text_add_on'] )

        );

    }

    return $data;

}

// -----------------------------------------

// 5. Save custom input field value into order item meta

add_action( 'woocommerce_add_order_item_meta', 'wasentogo_product_add_on_order_item_meta', 10, 2 );

function wasentogo_product_add_on_order_item_meta( $item_id, $values ) {

    if ( ! empty( $values['custom_text_add_on'] ) ) {

        wc_add_order_item_meta( $item_id, 'Individueller Text', $values['custom_text_add_on'], true );

    }

}

// -----------------------------------------

// 6. Display custom input field value into order table

add_filter( 'woocommerce_order_item_product', 'wasentogo_product_add_on_display_order', 10, 2 );

function wasentogo_product_add_on_display_order( $cart_item, $order_item ){

    if( isset( $order_item['custom_text_add_on'] ) ){

        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];

    }

    return $cart_item;

}

// -----------------------------------------

// 7. Display custom input field value into order emails

add_filter( 'woocommerce_email_order_meta_fields', 'wasentogo_product_add_on_display_emails' );

function wasentogo_product_add_on_display_emails( $fields ) {

    $fields['custom_text_add_on'] = 'Individueller Text';

    return $fields;

}

Can someone help me with this part too?

Maybe this screenshot helps to understand what I need. I want to show the img-filename listed on my invoice-PDF

I think I need these two parts from the custom textfield to build something simular for the img-field …

    // 5. Save custom input field value into order item meta

add_action( 'woocommerce_add_order_item_meta', 'wasentogo_product_add_on_order_item_meta', 10, 2 );

function wasentogo_product_add_on_order_item_meta( $item_id, $values ) {

    if ( ! empty( $values['custom_text_add_on'] ) ) {

        wc_add_order_item_meta( $item_id, 'Individueller Text', $values['custom_text_add_on'], true );

    }

}

// -----------------------------------------

// 6. Display custom input field value into order table

add_filter( 'woocommerce_order_item_product', 'wasentogo_product_add_on_display_order', 10, 2 );

function wasentogo_product_add_on_display_order( $cart_item, $order_item ){

    if( isset( $order_item['custom_text_add_on'] ) ){

        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];

    }

    return $cart_item;

}

// -----------------------------------------

Thank you very much again!

Answer 1

Instead of the woocommerce_email_after_order_table hook you can use woocommerce_order_item_meta_start . You can find it inside the template: /woocommerce/emails/email-order-items.php

The uploaded image link will be added to all email templates, including the customer-invoice.php template.

If $file_data = $item->get_meta( '_img_file' ) exists you can access the following information:

• $file_data['file_name'] (including the image file extension)
• $file_data['title'] (without the image file extension)

Since the woocommerce_order_item_meta_start hook doesn't have access to the email object (to check the template id) I thought about adding the image title to all email templates. Through the woocommerce_email_styles hook you can show or hide it based on the email template.

// shows the uploaded image of the order item
add_action( 'woocommerce_order_item_meta_start', 'show_uploaded_image_in_email_templates', 10, 4 );
function show_uploaded_image_in_email_templates( $item_id, $item, $order, $plain_text ) {
    if ( $file_data = $item->get_meta( '_img_file' ) ) {
        echo '<p>
            <a href="' . $file_data['guid'] . '" target="_blank" class="button">' . __( "Individuelles Bild herunterladen" ) . '</a>
            <pre><code style="font-size:12px; background-color:#eee; padding:5px;">' . $file_data['guid'] . '</code></pre>
            <span class="custom_image_filename">' . $file_data['title'] . '</span>
        </p>';
    }
}

// show or hide the image title based on the email template
add_filter( 'woocommerce_email_styles', 'add_woocommerce_email_styles', 10, 2 );
function add_woocommerce_email_styles( $css, $email ) {
    if ( $email->id == 'customer_invoice' ) {
        $css .= '.custom_image_filename { display: inline-block; }';
    } else {
        $css .= '.custom_image_filename { display: none; }';
    }
    return $css;
}

The invoice email will be:

All other emails:

The code has been tested and works. Add it to your active theme's functions.php.