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

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

0 голосов
/ 28 августа 2018

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

Here you can see the example of it, in the screenshot

Итак, я попытался отредактировать 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'] .">";
}
?>

UPDATE

А вот мой действительный файл 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' );
...