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

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>';
		}

Answer 1

[Роман Финк]

Изображение товара в цикле вывода каталога выводится экшеном 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>';
    }

}

Comments

[Hikky]

Ура работает! Очень долго мучился, оказалось, что все проще. Спасибо огрооомное!

А как можно вывести миниатюру, а не полную картинку?

[Роман Финк]

Hikky, $image_size = 'thumbnail';