Блог

Я настраиваю раскрывающееся поле variation в WooCommerce и столкнулся с проблемой включения изображений вариантов рядом с названием варианта.

Я попытался включить ‘attribute’ => $image в массив, но это не сработало.

Это код, над которым я работаю

 <form class="variations_form" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $available_variations ) ) ?>">
                    <div class="variations">
                        <?php
                        foreach ( $attributes as $attribute_name => $options ) : ?>
                            <tr>
                                <td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
                                <td class="value">
                                    <?php
                                        $selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
                                        wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
                                        echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
                                    ?>
                                </td>
                            </tr>
                        <?php endforeach;
                        ?>
                    </div>
                </form>
  

Идея состоит в том, чтобы показать небольшой предварительный просмотр изображения варианта слева от названия варианта.

Например, как на скриншоте ниже:

Приветствуется любая помощь.