Изображение товара в цикле вывода каталога выводится экшеном woocommerce_template_loop_product_thumbnail, который висит на хуке woocommerce_before_shop_loop_item_title. Вы можете заменить функцию вывода изображения своей и вывести что угодно.
Например так:
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'fink_template_loop_product_thumbnail', 10 );
function fink_template_loop_product_thumbnail() {
global $product;
$image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
$product_id = $product->get_id();
$image = get_the_post_thumbnail_url( $product_id, $image_size ); //Получаем url картинки
if ( $image ) {
$image = str_replace( ' ', '%20', $image );
$image_webp = str_replace( ['.png', '.jpg', '.jpeg', '.gif'], '.webp', $image );
echo '<div class="product__catalog-img"><picture><source srcset="' . esc_url($image_webp) . '" type="image/webp"><img src="' . esc_url($image) . '" alt="' . esc_attr( $product->get_name() ) . '"></picture></div>';
}
}