WooCommerce: Agregar un contenedor div para etiqueta img del producto

Deseamos poner un contenedor a la imagen del producto de WooCommerce, esta vez agregaremos un div con la clase 'wrapper' , antes de la etiqueta img del producto.

Codigo scripts

Codigo scripts , que le puedes implementar en tu js de tu proyecto:

document.addEventListener( 'DOMContentLoaded', function () {
	var imagen = document.querySelectorAll('.product-category img');
	var i;
	for (i = 0; i < imagen.length; i++) {
		// Creamos un div
		var wrapper = document.createElement('div');
		// Agregamos al div creado la clase wrapper 
		wrapper.classList.add('wrapper'); 
	
		wrapper.appendChild(imagen[i].cloneNode(true));
		//console.log(wrapper.appendChild(original[i].cloneNode(true))) ;
		//console.log(original[i].cloneNode(true)) ;

		imagen[i].replaceWith(wrapper);		
	}  
 });

Inspeccionando codigo Html original

Como podemos ver antes de la etiqueta img del producto , todavia no hemos agregado el div con la clase 'wrapper' 

Inspeccionando el resultado del codigo Html

Inspeccionando el resultado del codigo Html, donde vemos que se agregado el div con la clase 'wrapper' , antes de la etiqueta img del producto

Explicación Codigo

Con este codigo seleccionamos todos las imagenes de los productos

Recorremos todas las imagenes de los productos

Creamos un DIV

Agregamos la clase wrapper al DIV creado 

Dentro del DIV con la clase wrapper , agregamos y clonamos todo el contenido de la etiqueta img del producto :

Recuerda que estamos recorriendo todos las imagenes del producto imagen[i]  

Resultado:

<img src="ruta_imagen" alt="" width="" height="">

Por medio de appendChild podemos incluir en un nodo un nuevo hijo

Podemos crear un clon de un nodo por medio de cloneNode
Elemento_a_clonar.cloneNode(true/false);

Si le ponemos true , clona todo el elemento CON los hijos
Si le ponemos false , clona todo el elemento SIN los hijos

Por ultimo el contenido de la etiqueta img del producto es reemplazado por el contendo de wrapper 

RESULTADO:

<div class="wrapper">
    <img src="ruta_imagen" alt="" width="" height="">
</div>

Referencia:

https://victoraqui.com/efecto-css-hover-zoom-en-imagenes-divi/

Todo sobre appendChild, insertBefore, replaceChild, removeChild y cloneNode

http://www.codexexempla.org/curso/curso_4_3_d.php