Wordpress Woocommerce：单一产品页面的变体库答案

【问题标题】：Wordpress Woocommerce: Single product page gallery of variationsWordpress Woocommerce：单一产品页面的变体库
【发布时间】：2019-02-01 16:06:31
【问题描述】：

我需要的是当我点击与之相关联的图像时更改所选产品的变化。与显示的图像相同的方式从下拉列表中更改单击变化（反之亦然）。我花了几天时间寻找解决方案，这一定很简单。写一些代码可以解决吗？我不想要像样本这样的插件。我不是天生会说英语的人，所以希望它是可以理解的。感谢您提供任何帮助。

这里： http://obrazyzedreva.cekuj.net/produkt/svata-rodina/

Wordpress、Woocommerce、自定义模板

【问题讨论】：

标签： wordpress woocommerce

【解决方案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>

【讨论】：