Image Flipper Woocommerce image resolution to low - php

Question

I was looking for a way to make a "flip image" in the woocommerce product loop when you hover mouse, I know there are plugins that do this function but I think it's a very simple thing to need to use a plugin, I've been searching and I ended up finding a solution.
here's the code:
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id);
}
and the css:
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1){
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1):hover {
opacity: 0;
transition: opacity 0.5s;
}
my code did the job but the image is coming at a very low resolution
is there a way for it not to appear with such a low resolution?
I'm using a storefront child theme

Answer 1

nevermind I found out that some information was missing in my code here is the solution I found:
you need to set the image size: wp_get_attachment_image();
//set image size full size
wp_get_attachment_image($secondary_image_id, 'full');
//set image size medium size
wp_get_attachment_image($secondary_image_id, 'medium');
//set image size thumbanil size (default)
wp_get_attachment_image($secondary_image_id, 'thumbnail');
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id, 'full');
}