WooCommerce – Add Extra Gallery Image Upload Field For Product Variations in WooCommerce Product Edit Page

Goal #1: Locate PHP & Javascript files in WooCommerce v7.3.0 plugin that involve uploading WooCommerce Single Product Variation Gallery Images, so I know where everything is and what it looks like in default mode.

Goal #2: Add new PHP & Javascript that will add an extra gallery image upload field for WooCommerce Single Product Variations.

1. First, locate the CSS class for the WooCommerce Single Product Variations Gallery Image upload field (via WordPress admin).
2. Next, locate the corresponding CSS class in the WooCommerce plugin PHP file.
3. Finally, locate the JS file in the WooCommerce plugin that powers the WooCommerce Single Product Variations Gallery Image upload mechanism.

A) In Admin: HTML tags & CSS classes in the WooCommerce Single Product Variations Gallery Image form.

PATH to admin page: WordPress admin > WooCommerce > Products > All Products > Edit Product > Product Data form > Variations tab (make sure Variation metabox is in the open position)

Use the browser Inspector Tool to locate the following HTML tags & CSS classes:

• <div class=“woocommerce_variation wc-metabox open">
• <div class="woocommerce_variable_attributes wc-metabox-content">
• <p class="form-row form-row-first upload_image">
• <a href="#" class="upload_image_button tips remove" rel="50">

upload_image_button is the CSS class we’re looking for.

B) In PHP: The PHP file has matching HTML tags & CSS classes seen in the WooCommerce admin Single Product Variations Gallery Image form from above.

PATH to PHP file: WooCommerce v7.3.0 plugin > includes > admin > meta-boxes > views > html-variation-admin.php (line 15 and line 72):

<div class="woocommerce_variation wc-metabox closed">

<a href="#" class="upload_image_button tips...>

upload_image_button is the CSS class we’re looking for.

C) In JavaScript: This is the CSS class that links the JavaScript to the PHP file, above.

PATH to JS file: WooCommerce v7.3.0 plugin > assets > js > admin > meta-boxes-product-variation.js (line 416):

$( '#variable_product_options' ).on(
				'click',
				'.upload_image_button',
				this.add_image
			);

upload_image_button is the CSS class we’re looking for.

Locating the upload_image_button class in section A, B, and C, above, confirms that I’ve found the correct code in the WooCommerce admin, PHP, and JavaScript files that process Gallery Image uploads in the WooCommerce Single Product Variations form.

Add an extra field in WooCommerce admin to upload extra Single Product Variations Gallery Images

stackoverflow: Add extra image upload field for product variations in WooCommerce backend product edit pages