Менять картинку на странице товара при клике на цвет WooCommerce

177

20 сентября 2018, 04:50

Как можно сделать без использования плагинов, чтобы при клике на цвет менялась картинка товара? Существует ли какой-то способ связать цвета и вариативные картинки и вывести их в одном цикле?

Все это находится в single-product/add-to-cart/variable.php

Answer 1

<div class="color-selection size-1">
    <div data-slug="blue" class="entry" style="color: #3481c7;"></div>
    <div data-slug="gray" class="entry" style="color: #eeeeee;"></div>
    <div data-slug="yellow" class="entry" style="color: #edb82c;"></div>
    <input id="pa_color" type="hidden" class="color_val" data-attribute_name="attribute_pa_color"
           name="attribute_pa_color" value="light-blue">
</div>
Все это находитсяв в single-product/add-to-cart/variable.php

Answer 2

C woocomerce не работал но примерно так вы сможете зацепится к цвету, немного поправьте под себя или покажите относительные пути к картинкам товара, и разметку товара

$('[data-slug]').on("click", function() {
    slug = $(this).data("slug");
    $('#imageContainer').attr("src", "/img/products/product-slug.png");
});