Как получить изображение вариации продукта WooCommerce

Содержание

Вопрос или проблема
Ответ или решение
Понимание структуры WooCommerce
Шаг 1: Изменение функции для показа изображения
Шаг 2: Модификация кода в cart.php
Заключение

Вопрос или проблема

Я создаю тему для WooCommerce, но у меня проблемы с изменением изображений продукции, когда пользователь выбирает варьирование товара.

Я установил разные изображения для каждой вариации на заднем плане, и это функция, которую я использую для вызова изображения товара.

Что мне нужно добавить к этой функции, чтобы получить изображение вариации вместо общего изображения товара?

function show_featured_image() {
    global $product;
    echo '<div class="product_fetured_image">';
    echo '<div class="feautred_image"><img src="' . get_the_post_thumbnail_url() . '"></div>';
    echo '</div>';
}

Вот продукт, установленный для отображения в корзине в cart.php

$_product     = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );

$product_id   = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );

$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

if ( ! $_product->is_visible() ) {
            echo $thumbnail;
        } else {
                    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($_product->id), 'thumbnail' );
                        $cartimgsrc=UNAVAILABLEIMG;
                    if($thumb[0]){
                        $cartimgsrc=$thumb[0];

                   $product = wc_get_product($cart_item['product_id']);
                   if ( $product && $product->is_type( 'variable' ) ) {


                            $product = new WC_Product_Variable( $product_id );
                            $variations = $product->get_available_variations();
                            foreach ( $variations as $variation ) {
                                if($variation['variation_id'] == $cart_item['variation_id'] ){
                                    $cartimgsrc=$variation['image']['thumb_src'];
                                }   
                            }
                         }

                    }

                    echo "<a href="".$_product->get_permalink( $cart_item ).""> <img class="cartthumbimage" height="180px" width="180px" src="".$cartimgsrc."" /></a>";
                    //printf( '<a href="%s">%s</a>', esc_url( $_product->get_permalink( $cart_item ) ), $thumbnail );
        }

Ответ или решение

Для корректного отображения изображения вариации товара в WooCommerce, в вашем коде необходимо внести определенные изменения. В данном ответе мы разберем, как правильно получить изображение вариации товара, а также покажем, как это можно интегрировать в ваш существующий код.

Понимание структуры WooCommerce

WooCommerce предоставляет возможности для управления товарными вариациями, что позволяет вам устанавливать различные изображения для каждой вариации. Для того чтобы при изменении вариации отображалось соответствующее изображение, нужно использовать соответствующие методы API WooCommerce.

Шаг 1: Изменение функции для показа изображения

Ваша текущая функция show_featured_image() загружает только основное изображение товара. Чтобы корректно работать с вариациями, вам нужно будет модифицировать её. В новой версии функции мы используем объект WC_Product_Variable, чтобы получить нужную вариацию и её изображение.

function show_featured_image() {
    global $product;

    // Проверяем, является ли продукт вариативным
    if ($product->is_type('variable')) {
        // Получаем текущую вариацию, если она выбрана
        $available_variations = $product->get_available_variations();
        $variation_id = $_GET['variation_id'] ?? ''; // здесь вы можете получить ID вариации, выбранной пользователем

        // Находим нужную вариацию
        foreach ($available_variations as $variation) {
            if ($variation['variation_id'] == $variation_id) {
                // Выводим изображение вариации
                $image = wp_get_attachment_image_src($variation['image_id'], 'full');
                echo '<div class="product_fetured_image">';
                if ($image) {
                    echo '<div class="feautred_image"><img src="' . esc_url($image[0]) . '" alt="" /></div>';
                }
                echo '</div>';
                break;
            }
        }
    } else {
        // Если не вариация, отображаем обычное изображение
        echo '<div class="product_fetured_image">';
        echo '<div class="feautred_image"><img src="' . esc_url(get_the_post_thumbnail_url()) . '" alt="" /></div>';
        echo '</div>';
    }
}

Шаг 2: Модификация кода в cart.php

В коде, отвечающем за отображение изображения товаров в корзине (cart.php), уже описан подход к получению изображения вариации. Проверьте вашу логику и убедитесь, что код выполняет необходимые действия по извлечению изображения вариации:

if ($product && $product->is_type('variable')) {
    $product = new WC_Product_Variable($product_id);
    $variations = $product->get_available_variations();
    foreach ($variations as $variation) {
        if ($variation['variation_id'] == $cart_item['variation_id']) {
            $cartimgsrc = wp_get_attachment_image_url($variation['image_id'], 'thumbnail');
            break;
        }
    }
}

Заключение

Следуя выше представленной инструкции, вы сможете корректно отображать изображения вариаций товаров в WooCommerce. Убедитесь, что вся необходимая информация о вариациях передается правильно, и при выборе вариации обновляется изображение товара. Такой подход не только улучшит пользовательский опыт, но также повысит общий потенциал вашего интернет-магазина.

Теперь у вас есть подробное руководство по получению изображения вариации товара в WooCommerce. Удачи в дальнейшей разработке вашего тема и не забывайте тестировать изменения для обеспечения их стабильной работы!