If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #21493

    Hi all–

    I need some help troubleshooting a problem I have with images not changing when a variation is selected. It was doing fine until I updated Woocommerce and updated to the most recent version of Propulsion.

    Here is an example of the issue.

    http://www.pearlsinternational.com/shop/ (Purchase code hidden if logged out) /

    Essentially when you select a pearl color under the item, I want it to change the image to match that color. All of the variations have the appropriate image attached to them and they are also all included in the product image slideshow. Like I said, this was working fine until the update. :(

    I have already followed the instructions on these threads:

    http://www.kriesi.at/support/topic/ (Purchase code hidden if logged out) -variation


    Additionally, I have my thumbnail image container hidden (on purpose- http://www.kriesi.at/support/topic/invisible-variations-images) using the following in css/custom.css:

    .single-product .thumbnails_container{

    display: none !important;


    Because thumbnails are not visible and selecting a variation is not changing the image as it should, customers are unable to view the correct product.

    What changed to cause this to stop working? How do I fix it?




    open up propulsionconfig-woocommercewoocommerce-mod.js and replace the code after following line:

    /* Bildanpassung bei Variationen */


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

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

    //unify select dropdowns
    var el = jQuery(this);


    el.on('change', function()
    }, 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;

    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');

    if (index != 0){
    container.find('.slideshow li a:eq(0)').css( "display", "none" );

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

    var current = jQuery('.numeric_controls a:eq('+index+')').addClass('activeslideThumb');
    container.find('.numeric_controls a:eq('+index+')').trigger('click');

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




    Perfect, worked like a charm! Thanks for the quick response!



    Glad Dude fixed it. :)



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

The topic ‘Variable Product Image Problem – Again’ is closed to new replies.