Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #23050

    Hi!!

    I have some products with colors variations in my shop, and i want the image variable product change when I choose an option, coul it be posible?

    Otherwhise I need to put the name of the photos in a mouseover label in the product page with grid gallery layout…

    Thanks a lot!!

    #118367

    You can use following script:

    /* Bildanpassung bei Variationen */
    jQuery(document).ready(function($) {
    variation_adjustment('.variations select');
    });

    function variation_adjustment(select_el)
    {
    var selects = jQuery(select_el);

    //unify select dropdowns
    selects.each(function()
    {
    var el = jQuery(this);

    change_variation_image();

    el.on('change', function()
    {
    setTimeout(function(){
    change_variation_image();
    }, 100);
    });

    });
    }

    function change_variation_image()
    {
    var currentVariationId = jQuery('.single_variation_wrap .variations_button input[name="variation_id"]').val(),
    productid = jQuery('form.variations_form').data('product_id'),
    variationsdata = jQuery('form.variations_form').data('product_variations');

    if ( !productid || !currentVariationId ) return;

    var currentvariation = variationsdata.filter(function (currentvariation) { return currentvariation.variation_id == currentVariationId });

    if(typeof currentvariation[0] == "undefined" || !currentvariation[0]) return;

    var imglink = currentvariation[0].image_link;

    if(imglink){
    jQuery('.slideshow li a img').each(function()
    {
    var imgscr = jQuery(this).attr("src");

    if(imglink == imgscr || imglink.replace(/-d+xd+./, ".") == imgscr.replace(/-d+xd+./, ".")){
    var index = jQuery(this).parents('li').index();
    var container = jQuery(this).parents('.slideshow_container');

    var controls = container.next('.thumbnails_container'),
    thumbs = controls.find('.slideThumb');

    thumbs.removeClass('activeslideThumb');
    container.find('.slidecontrolls a:eq('+index+')').trigger('click');

    if (index != 0){
    setTimeout(function(){
    container.find('.slideshow li a:eq(0)').css( "display", "block" );
    }, 1500);
    }

    }

    });
    }
    }

    Add it to the very bottom of wp-contentthemesflashlightconfig-woocommercewoocommerce-mod.js

    How it works:

    1) You MUST use the “Image Slideshow at the top of the entry” gallery layout – another layout will not work.

    2) Then set all your product images (including variation images as slideshow images (green “Add image to slideshow button”)

    3) Afterwards you need to set (the same images) as “variation images”

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Woocommerce variable prodcut images’ is closed to new replies.