Получить и показать вариант изображения на WooCommerce

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

Поэтому я попытался отредактировать код файла шаблона single-product/add-to-cart/variable.php, чтобы получить эскизы, но ничего не вернул:

<?php
$product = new WC_Product_Variable( $product_id );
$variations = $product->get_available_variations();

foreach ( $variations as $variation ) {
echo "<img src = " . $variation['image']['url'] .">";
}
?>

ОБНОВИТЬ

А вот и мой реальный файл Variable.php:

<?php

defined( 'ABSPATH' ) || exit;

global $product;

$attribute_keys = array_keys( $attributes );

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<form class = "variations_form cart" action = "<?php echo esc_url(     apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method = "post" enctype='multipart/form-data' data-product_id = "<?php echo absint( $product->get_id() ); ?>" data-product_variations = "<?php echo htmlspecialchars( wp_json_encode( $available_variations ) ); // WPCS: XSS ok. ?>">
<?php do_action( 'woocommerce_before_variations_form' ); ?>

<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
    <p class = "stock out-of-stock"><?php esc_html_e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php else : ?>
    <table class = "variations" cellspacing = "0">
        <tbody>
                <tr>
                    <td colspan = "2" class = "alert-color is-bold"><?php _e( 'Please choose product options&hellip;', 'woocommerce' ); ?></td>
                </tr>
            <?php foreach ( $attributes as $attribute_name => $options ) : ?>
                <tr>
                    <td class = "label"><label for = "<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
                    <td class = "value">
                        <?php
                            wc_dropdown_variation_attribute_options( array(
                                'options'   => $options,
                                'attribute' => $attribute_name,
                                'product'   => $product,
                            ) );
                            echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class = "reset_variations" href = "#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
                        ?>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

    <div class = "single_variation_wrap">
        <?php
            /**
             * Hook: woocommerce_before_single_variation.
             */
            do_action( 'woocommerce_before_single_variation' );

            /**
             * Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
             *
             * @since 2.4.0
             * @hooked woocommerce_single_variation - 10 Empty div for variation data.
             * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
             */
            do_action( 'woocommerce_single_variation' );

            /**
             * Hook: woocommerce_after_single_variation.
             */
            do_action( 'woocommerce_after_single_variation' );
        ?>
    </div>
<?php endif; ?>

<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>

<?php
do_action( 'woocommerce_after_add_to_cart_form' );