Antes de proceder te recomiendo realizar un respaldo de tu sitio web para evitar pérdida de información. Te recomiendo el plugin Duplicator es fácil de usar y gratis. También debes utilizar Elementor para que te pueda funcionar esto, si quieres saber más de Elementor te dejo este artículo dale click aquí.

Paso 1. Hacer que las miniaturas se vean más pequeñas y estilizadas

✅ Copiamos el código

/* Functionality: Custom thumbnail size in product image gallery
 * Date:  2021-03-10
 * Author: Rafael Azuaje
 */
/* DESKTOP */
.woocommerce .flex-control-thumbs {
    margin: 10px 0px 10px -5px !important; /* Thumbnails separation top and bottom */
    width: 100% !important; /* Controls width of thumbnails container on desktop - Horizontally */
	display: flex;
}
/* Controls thumbnails width on desktop - vertically
 * Enable this ONLY for VERTICAL display
 */ 
ol.flex-control-nav.flex-control-thumbs li {
	width: 15% !important; 
}
/* Enable this ONLY for HORIZONTAL display */
/*ol.flex-control-nav.flex-control-thumbs li {
	width: 18% !important; 
}*/
/* PHONES */
@media (max-width:414px){
	ol.flex-control-nav.flex-control-thumbs li {
		width: 18% !important; /* Controls thumbnails width on mobile - Horizontally */
	}
}
/* TABLETS */
@media (min-width:568px) and (max-width:768px){
	/* Controls thumbnails container width on tablet - vertically
	 * Enable this ONLY for VERTICAL display */
	.woocommerce .flex-control-thumbs {
    	margin: 10px 0px 10px -5px !important; 
    	width: 15% !important;
	}
	/* Controls width of thumbnails container on tablet - horizontally
	 * Enable this ONLY for HORIZONTAL display */
	/*.woocommerce .flex-control-thumbs {
    	width: 70% !important; 
	}*/
	ol.flex-control-nav.flex-control-thumbs li {
		width: 90% !important; /* Controls thumbnails image width on tablet - vertically */
	}
}
@media (min-width:769px) and (max-width:1024px){
	/* Controls thumbnails container width on tablet - vertically
	 * Enable this ONLY for VERTICAL display */
	.woocommerce .flex-control-thumbs {
    	margin: 10px 0px 10px -5px !important; 
    	width: 12% !important;
	}
	/* Controls width of thumbnails container on tablet - horizontally
	 * Enable this ONLY for HORIZONTAL display */
	/*.woocommerce .flex-control-thumbs {
    	width: 70% !important; 
	}*/
	ol.flex-control-nav.flex-control-thumbs li {
		width: 100% !important; /* Controls thumbnails image width on tablet - vertically */
	}
}

✅ Nos vamos al editor del tema en WordPress. Ubicado en Apariencias > Editor de temas > Seleccionar el tema activo (esquina superior derecha) > luego seleccionar el archivo style.css

✅ Al final del editor de temas pega el código que habíamos copiado anteriormente.

✅ Ahora vamos a comentar las opciones que dicen vertical y descomentar las opción que son para horizontal en desktop y tablet (en móvil no se modifica nada).

✅ Por último le damos click en actualizar archivo.

En otra pestaña abrimos un producto y pulsamos CTRL + F5 para limpiar la cache. Y verificamos que el estilo esté modificado correctamente en todos los dispositivos (Desktop, tablet y móvil). Hasta este punto tenemos las miniaturas pequeñas y estilizadas en la parte inferior, si lo quieres dejar asi esta bien. Si quieres colocar las miniaturas en la parte vertical continua con el siguiente paso. Lo siguiente que haremos es que las miniaturas se vean de forma vertical para desktop y tablet, en móvil les recomiendo dejarlo en la parte inferior por términos de usabilidad y experiencia de usuario.

Paso 2. Colocar las miniaturas a la izquierda

✅ Copiamos el código.

/* Functionality: Product page image thumbnails on left side
 * Date:  2021-03-10
 * Author: Rafael Azuaje
 * Disable this segment if you want to display horizontally
 */
@media (min-width:568px) {
	.woocommerce .flex-control-nav { 
		position: absolute; 
		top:-10px; 
		left: 0px;
	}
	.flex-control-thumbs {
		display: flex;
		flex-direction: column;
	}
}
@media (min-width:568px) and (max-width:768px){
	.woocommerce .flex-viewport {
		width: 86.5% !important;
		left: 100px !important;
	}
}
@media (min-width:769px) and (max-width:1024px){
	.woocommerce .flex-viewport {
		width: 87% !important;
		left: 95px !important;
	}
}
@media (min-width:1025px){
	.woocommerce .flex-viewport {
		width: 85% !important;
		left: 80px !important;
	}	
}

✅ Lo pegamos en el editor de tema al final (como lo hicimos en el paso de arriba) y le damos click en actualizar.

✅ Vamos a editar el código del paso del arriba. Descomentamos las opciones en vertical y comentamos las opciones en horizontal en desktop y tablet (en movil no se modifica nada).

✅ Le damos click en actualizar.

Actualizamos la pagina de producto con CTRL + F5 y verificamos que se hayan aplicado las modificaciones en escritorio y tablet.

Importante:

• Si van a modificar los valores, lo pueden hacer dentro de un rango aceptable para que no tengan ningún tipo de inconveniente.
• Es importante que la plantilla no tenga código personalizado o que otra persona lo haya modificado para que no afecte esa galería y no tengan inconvenientes.

Déjanos tus dudas en los comentarios.