title: Custom WooCommerce Template - Product Variation Main Image Doesn't Change
body: <p>I am using a custom template for WooCommerce so that we can change the layout of the page. It works great, however the product image isn't changing with the variation of a product. I.e. if they select 'red' the main image doesn't change. Instead, only the thumbnail in position #1 does. I know it's related to the layout, because if I revert back to the old layout it works correctly. Does anyone know why this might be? I've searched throughout, but just can't work it out. This is the coding in my new layout, although I don't think this is to blame (perhaps something's missing though). I also don't get any errors in the console:</p>
  
  <pre><code>&lt;div class="product-container"&gt;
  &lt;div class="product-main"&gt;
  &lt;div class="row content-row mb-0"&gt;
  
      &lt;div class="product-gallery large-&lt;?php echo flatsome_option('product_image_width'); ?&gt; col"&gt;
      &lt;?php
          /**
           * woocommerce_before_single_product_summary hook
           *
           * @hooked woocommerce_show_product_sale_flash - 10
           * @hooked woocommerce_show_product_images - 20
           */
          do_action( 'woocommerce_before_single_product_summary' );
      ?&gt;
      &lt;/div&gt;
  
      &lt;div class="producttext"&gt;
          &lt;?php
  $content = get_the_content('Read more');
  print $content;
          ?&gt;
      &lt;/div&gt;
  
  
      &lt;div class="product-info summary col-fit col entry-summary &lt;?php flatsome_product_summary_classes();?&gt;"&gt;
  
          &lt;?php
              /**
               * woocommerce_single_product_summary hook
               *
               * @hooked woocommerce_template_single_title - 5
               * @hooked woocommerce_template_single_rating - 10
               * @hooked woocommerce_template_single_price - 10
               * @hooked woocommerce_template_single_excerpt - 20
               * @hooked woocommerce_template_single_add_to_cart - 30
               * @hooked woocommerce_template_single_meta - 40
               * @hooked woocommerce_template_single_sharing - 50
               */
              do_action( 'woocommerce_single_product_summary' );
          ?&gt;
  
      &lt;/div&gt;&lt;!-- .summary --&gt;
  
      &lt;div id="product-sidebar" class="mfp-hide"&gt;
          &lt;div class="sidebar-inner"&gt;
              &lt;?php
                  do_action('flatsome_before_product_sidebar');
                  /**
                   * woocommerce_sidebar hook
                   *
                   * @hooked woocommerce_get_sidebar - 10
                   */
                  if (is_active_sidebar( 'product-sidebar' ) ) {
                      dynamic_sidebar('product-sidebar');
                  } else if(is_active_sidebar( 'shop-sidebar' )) {
                      dynamic_sidebar('shop-sidebar');
                  }
              ?&gt;
          &lt;/div&gt;&lt;!-- .sidebar-inner --&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- .row --&gt;
  &lt;/div&gt;&lt;!-- .product-main --&gt;
  
  &lt;div class="product-footer"&gt;
      &lt;div class="container"&gt;
          &lt;?php
              /**
               * woocommerce_after_single_product_summary hook
               *
               * @hooked woocommerce_output_product_data_tabs - 10
               * @hooked woocommerce_upsell_display - 15
               * @hooked woocommerce_output_related_products - 20
               */
              do_action( 'woocommerce_after_single_product_summary' );
          ?&gt;
  
          &lt;hr&gt;
  
      &lt;/div&gt;&lt;!-- container --&gt;
  
  &lt;/div&gt;&lt;!-- product-footer --&gt;
  &lt;/div&gt;&lt;!-- .product-container --&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I pulled apart the HTML for the image from the dev console, and the following item is missing:</p>
  
  <p>data-o_data-thumb=" "</p>
  
  <p>from:</p>
  
  <pre><code> &lt;div data-thumb="https://mywebsite.com/wp-content/uploads/2018/09/slim-
   bifold-minimal-extra_013_0087_OPTIONS-600x400.jpg" class="woocommerce-      
   product-gallery__image slide first is-selected is-ready" 
   style="position: absolute; left: 0%;" aria-selected="true" data-o_data-
   thumb="https://mywebsite.com/wp-content/uploads/2015/10/mens-leather-
   walletslim-bifold-minimal-extra_013_0087-386x258.jpg"&gt;
  </code></pre>
  
  <p>My code basically finished after "aria-selected="true" and doesn't have the end piece. Any idea where this is called and the code to place to get it working? </p>