Как вывести изображение товара на странице каталога?

Question

[Hikky]

Всем привет, такая ситуация:

Хочу вывести изображение товара в каталоге, для категорий и самих товаров, при этому сделать это через picture, чтобы была возможность выводить картинки в формате webp.

Вывод картинки карточки товара в каталоге находится в content-product.php и имеет следующий вид:

Code

$image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
		$image = $product->get_image( $image_size );
		echo $image;

Мне нужно вывести примерно в таком же формате, как это реализовано в content-product-cat.php - для изображений категорий:

Code

$small_thumbnail_size = apply_filters( 'subcategory_archive_thumbnail_size', 'woocommerce_thumbnail' );
		$dimensions           = wc_get_image_size( $small_thumbnail_size );
		$thumbnail_id         = get_term_meta( $category->term_id, 'thumbnail_id', true );
	
		if ( $thumbnail_id ) {
			$image        = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );
			$image        = $image[0];
		} else {
			$image        = wc_placeholder_img_src();
		}
	
		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( $category->name ) . '"></picture></div>';
		}