WordPress Woocommerce: галерея вариантов продукта на одной странице

Question

Мне нужно изменить вариант выбранных продуктов, когда я нажму на изображение, связанное с ним.Так же, как отображаемое изображение меняет изменение щелчка от выпадающего (но наоборот).Я потратил несколько дней на поиски решения, которое должно быть таким простым.Это разрешимо с написанием некоторого кода?Я не хочу плагины, как образцы.Я не родился англоговорящим, так что надеюсь, это достаточно понятно.Спасибо за ЛЮБОЙ вид помощи.

Здесь: http://obrazyzedreva.cekuj.net/produkt/svata-rodina/

Wordpress, Woocommerce, настроить шаблон

Answer 1

Вот как я это решил:

часть product-image.php

---

<div>
    <div>
        <?php 
        if( $product->is_type( 'variable' ) ){
            ?>
            <div>
            <div>
                <strong>Vyberte si variantu:</strong>
            </div>
                <?php 
                $variations = $product->get_available_variations();
                foreach ( $variations as $variation ) {                 
                    echo '<div style="display:inline-block">';
                        echo '<img class="selector_'. $variation['variation_id'] .'" width="80" height="80" src=' . $variation['image']['url'] . ' style="margin-right:7px;">';                 
                    echo '</div>';
                }
                ?>  
            </div>
            <script type="text/javascript"> 
                jQuery(function($){
                    <?php foreach ( $variations as $variation ) {
                        foreach($variation['attributes'] as $attributes) {
                            ?>                  
                            $('.selector_<?php echo $variation['variation_id'] ?>').click(function(){
                                $('select[name="attribute_model-vyrobni-cislo"] option[value="<?php echo $attributes ?>"]').attr("selected","selected").trigger('change');
                            });
                        <?php
                        }
                    }
                    ?>
                });
            </script>
            <?php
        }
        ?>  
    </div>  
</div>