Woocommerce Product Image Flip on Hover

I am working with a wordpress theme called X theme. My lead dev guy bailed and this function is not working. The purpose of it is to flip to the first image in that products gallery when a mousein/out event occurs. The query is looking for a proceeding post ID which is not there or doesn’t meet the criteria for the query. So instead I would like it to simply get the image a better way because this doesn’t work consistently.

function x_woocommerce_shop_thumbnail() {
              GLOBAL $product;

              $stack            = x_get_stack();
              $stack_thumb      = 'entry-full-' . $stack;
              $stack_shop_thumb = $stack_thumb;
              $id               = get_the_ID();
              $rating           = $product->get_rating_html();
              woocommerce_show_product_sale_flash();
              echo '<div class="entry-featured">';
                echo '<a id="id'.$id.'" value="'.$id.'" href="'.get_the_permalink().'">';
                  echo get_the_post_thumbnail( $id , $stack_shop_thumb ); 
                  global $wpdb;
                  foreach($wpdb->get_results('SELECT ID FROM wp_posts WHERE post_parent = "'.$id.'" AND post_type = "attachment" ORDER BY ID DESC LIMIT 1') as $key => $row){
                    $file = '_wp_attached_file';
                    $childId = $row->ID;
                    global $wpdb;
                    $query = 'SELECT meta_value FROM wp_postmeta WHERE meta_key = "'.$file.'" AND post_id = "'.$childId.'"';
                    $otherImage = $wpdb->get_var($query);
                    if($otherImage != ''){
                        echo '<img id="otherImage" src="/wp-content/uploads/'.$otherImage.'"/>';
                    }
                  }
                  if ( ! empty( $rating ) ) {
                    echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
                  }
                echo '</a>';
              echo "</div>";
             }

The java & jQuery for the flip (is running in the footer of theme)

Read More
    //Product Hover Image Switch

    jQuery(document).ready(function() {

        jQuery('[id^=id]').mouseover(function(){

            if(jQuery(this).children('#otherImage').attr('src') != ''){

                jQuery(this).fadeTo(200, 0, function(){

                    var source = jQuery(this).children('#otherImage').attr('src'),

                        original = jQuery(this).children('.wp-post-image').attr('srcset');

                    jQuery(this).children('.wp-post-image').attr('srcset', source);

                    jQuery(this).children('#otherImage').attr('src', original);

                }).fadeTo(200, 1);

            }

        });

        jQuery('[id^=id]').mouseout(function(){

            if(jQuery(this).children('#otherImage').attr('src') != ''){

                jQuery(this).fadeTo(200, 0, function(){

                    var source = jQuery(this).children('#otherImage').attr('src'),

                        original = jQuery(this).children('.wp-post-image').attr('srcset');

                    jQuery(this).children('.wp-post-image').attr('srcset', source);

                    jQuery(this).children('#otherImage').attr('src', original);

                }).fadeTo(200, 1);
            }
        });
    });

Related posts