Custom field “Additional product image”

Hi @loralora

Thanks for reaching out!

Can you please tell me how can I add the choice of an additional image from multimedia / or upload a new one, in the product card?

To better picture what you are referring to here, can you please share with us a clear screenshot of what you see on your end so that we could address you more effectively?

If you don’t already have a screenshot service installed, you can try https://snipboard.io or https://skitch.com/. You can share the direct link to the image as a response to this topic.

Hello

Thanks for your reply.
I’ve added the text fields that I need – and all is well.
But I need to add one more image (see screenshot) or a gallery of images if possible (see screenshot).

My task is to create an additional image for each product and display it in the product description. (I have markup in the description.php file)

More details: There is 1 product image main from woocommerce.
There is also a product gallery. But I need to add the possibility of an additional 1 photo of a product or gallery.

Please help me. What hook or action do I need to find?

https://drive.google.com/file/d/15kh6Cq6cFAO2MnXx8ZyCjd7gSj2mHaQV/view?usp=sharing

https://drive.google.com/file/d/1n9C5K9ui-r5IGLUYUP2MxkZf465rnugz/view?usp=sharing

Hello

while I have this code, the upload form appears, but then I don’t know exactly how to continue. Could you help me with this if possible?

add_action( 'add_meta_boxes', 'image_metabox' );
 
function image_metabox() {
 
	add_meta_box(
		'image_meta', 
		'Image Upload for descriotion', 
		'image_uploader_callback', 
		'product', 
		'normal', 
		'default' 
	);
 
}



function image_uploader_callback( $product) {     
    wp_nonce_field( basename( __FILE__ ), 'image_nonce' );
    $image_stored_meta = get_post_meta( $post_id );
    
	?>
	
     <div class="image-preview-wrapper">
        <img id="image-preview" src="<?php if ( isset ( $image_stored_meta['image_meta'] ) ) echo $image_stored_meta['image_meta'][0]; ?>" style="max-width: 250px;">
        
        <input type="hidden" name="image_meta" id="image-meta">
        <button type="button" id="image-upload-button" class="button">Upload Image</button>
        <button type="button" id="image-remove-button" class="button">Remove Image</button>
    </div>
  
    
    <?php
}

further japonimauch then I need to save the field. and you need a java script to open the window….but how?

Hello @loralora,

My task is to create an additional image for each product and display it in the product description. (I have markup in the description.php file)

May I ask why are you going with this route to add images to the description? You can just add them directly from the product editor page.

Link to image: https://d.pr/i/iFrA64

More details: There is 1 product image main from woocommerce.
There is also a product gallery. But I need to add the possibility of an additional 1 photo of a product or gallery.

If I understand this part correctly, you want to add more than one image to the product gallery. This is the default behaviour of WooCommerce as you can see in the screenshot below, perhaps your theme is the limiting element here. Have you tried switching to Storefront?

Link to image: https://d.pr/i/BP5DXS

Look forward to hearing back from you.

Hello

Thank you very much for your answer.

I went this route because I split the Description.php file into 4 columns of content. Where in columns 1-3 I displayed custom text fields with an additional description.
For example: product material or model height.
and column 4 is empty – I need to display an additional image there.

The content of the additional description that you show is already displayed at the bottom of 1-4 columns with additional custom fields. I want to keep this ability to add and insert visual content for product managers.

And the second reason: I use a multi-vendor plugin. I was add (with the help of their support) this field from the vendor’s dashboard.

function add_custom_product_data_tabs_discr( $tabs ) {
    $tabs['advanced1'] = array(
        'label' => __( 'Additional description', 'your-text-domain' ),
        'target' => 'custom_tab_product_data_discr',
        'class' => array(),
        'priority' => 52,
    );
    return $tabs;
}
add_filter( 'mvx_product_data_tabs', 'add_custom_product_data_tabs_discr' );


function add_custom_product_data_content_discr( $pro_class_obj, $product, $post ) {
     //prnt_r($product->get_id());die;

     $image_descr = get_post_meta($product->get_id() , '_image_descr', true );
           //print_r($hh);
    ?>
    <div role="tabpanel" class="tab-pane fade" id="custom_tab_product_data_discr"> <!-- just make sure tabpanel id should replace with your added tab target -->
        <div class="row padding">
             <div class="form-group">
             <label class="control-label col-sm-3 col-md-3" for="product_images_container"><?php echo __( 'Image for additional description', 'woocommerce' ); ?></label>
             <div class="col-md-6 col-sm-9">
                 
                  <div class="form-group-image-down-l">
                      
                 <div class="featured-img upload_image">
                     <a href="#" class="upload_image_button tips <?php echo $image_descr ? 'remove' : ''; ?>" <?php echo current_user_can( 'upload_files' ) ? '' : 'data-nocaps="true" '; ?>data-title="<?php esc_attr_e( 'Image for additional description', 'woocommerce' ); ?>" data-button="<?php esc_attr_e( 'Select an image', 'woocommerce' ); ?> " rel="<?php echo esc_attr( $post->ID ); ?>">
                         <div class="upload-placeholder pos-middle">
                             <iclass=""></i>
                             <p><?php _e( 'Click to upload Image', 'dc-woocommerce-multi-vendor' );?></p>
                         </div>
                         <img src="<?php echo $image_descr ? esc_url( wp_get_attachment_image_src( $image_descr, 'medium' )[0] ) : esc_url( wc_placeholder_img_src() ); ?>" />
                         <input type="hidden" name="_image_descr" class="upload_image_id" value="<?php echo esc_attr( $image_descr ); ?>" />
                     </a>
                 </div>
                
                  </div>
                
             </div>
         </div>
</div>
</div>

    <?php
}
add_action( 'mvx_product_tabs_content', 'add_custom_product_data_content_discr', 10, 3 );

function save_custom_product_data_discr( $product, $post_data ) {
     
         if( isset($post_data['post_ID']) && isset($post_data['_image_descr'])){
         update_post_meta( absint( $post_data['post_ID'] ), '_image_descr', $post_data['_image_descr']);
     }


}
add_action( 'mvx_process_product_object', 'save_custom_product_data_discr', 15, 4 );

But unfortunately, I do not have enough knowledge to do it myself for the product panel.

2. I would like a solution with the ability to display 1 image.
   Of course, if you suggest a solution for the gallery, I will save it and use it further.

Thanks again

• This reply was modified 2 years, 1 month ago by N.g.

Hi there @loralora

Thanks for reaching back, clarifying things further.

This is a development topic, unfortunately not covered in our forums. However, I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

Please see our Support Policy: https://www.woocommerce.com/support-policy/

For assistance with customization or development with your site, we recommend that you seek help from:

• A local web developer
• Codeable.io
• WooExperts
• Stackexchange

If you are comfortable coding yourself and have questions, I would also recommend that you consider:

• WooCommerce developer Portal
• WooCommerce Slack Community
• Advanced WooCommerce Facebook group

I hope that helps you to figure it out.

Feel free to get back to us if you have further questions.

• This reply was modified 2 years ago by anastas10s. Reason: rephrase