title: Multiple thumbnails in checkout section on woocommerce/fancy product designer
body: <p>In my Woocommerce website users can design their own up to 6 different images via <a href="https://fancyproductdesigner.com/" rel="nofollow noreferrer">Fancy product designer</a> plugin. I'm trying to output those users thumbnails on cart items in checkout page instead of just showing one product image.</p>
  
  <p><a href="https://www.invitationer-til-fest.dk/produkt/elegant-delux-invitation-bryllup-nr-6-design-selv/" rel="nofollow noreferrer">Website</a> I'm trying to make this possible. </p>
  
  <p><a href="https://i.stack.imgur.com/02xJ0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/02xJ0.jpg" alt="enter image description here"></a> (example photo)</p>
  
  <hr>
  
  <p><strong>class-wc-cart.php</strong></p>
  
  <pre><code>$dom = new DOMDocument;
  libxml_use_internal_errors(true);
  $dom-&gt;loadHTML( $thumbnail );
  $xpath = new DOMXPath( $dom );
  libxml_clear_errors();
  
  $doc = $dom-&gt;getElementsByTagName("img")-&gt;item(1);
  $src = $xpath-&gt;query(".//@src");
  $srcset = $xpath-&gt;query(".//@srcset");
  
  // custom image from customer 
  foreach ( $src as $s ) {
      $s-&gt;nodeValue = $fpd_data['fpd_product_thumbnail'];
  }
  foreach ( $srcset as $s ) {
      $s-&gt;nodeValue = $fpd_data['fpd_product_thumbnail'];
  }
  return $dom-&gt;saveXML( $doc );
  </code></pre>
  
  <p>I use a foreach to loop through the images from fancy product designer. But it's like it's just lists the first image in my checkout. </p>
  
  <p>Any idea if it's even possible or I should use another approach in the <code>class-wc-cart.php</code> file in woocommerce.</p>
  
  <hr>
  
  <p><strong>class-wc-product.php</strong></p>
  
  <pre><code>//the additional form fields
  public function add_product_designer_form() {
  
          global $post;
          $product_settings = new FPD_Product_Settings($post-&gt;ID);
  
          if( $product_settings-&gt;show_designer() ) {
              ?&gt;
              &lt;input type="hidden" value="&lt;?php echo esc_attr( $post-&gt;ID ); ?&gt;" name="add-to-cart" /&gt;
              &lt;input type="hidden" value="" name="fpd_product" /&gt;
              &lt;input type="hidden" value="" name="fpd_product_thumbnail[]" /&gt;
              &lt;input type="hidden" value="&lt;?php echo isset($_GET['cart_item_key']) ? $_GET['cart_item_key'] : ''; ?&gt;" name="fpd_remove_cart_item" /&gt;
              &lt;?php
  
              if( !fpd_get_option('fpd_wc_disable_price_calculation') )
                  echo '&lt;input type="hidden" value="" name="fpd_product_price" /&gt;';
  
              do_action('fpd_product_designer_form_end', $product_settings);
          }
  }
  </code></pre>
  
  <p>In the code there is a function "<strong>after_product_designer</strong>" where I add some jquery code to get the input field that is supposed to post multiple fpd_thumbnails from FPD. </p>
  
  <p>It's in <strong>if(order.product != false)</strong></p>
  
  <pre><code>    var values = [];
  
  if(&lt;?php echo fpd_get_option('fpd_cart_custom_product_thumbnail'); ?&gt;) {
      // $cartForm.find('input[name="fpd_product_thumbnail"]').val(dataURL); (OLD/Original)
  
      $('input[name="fpd_product_thumbnail[]"]').each(function(){ // NEW 
       values.push($(this).val(dataURL));
      });
  }
  </code></pre>