Adjusting the JupiterX WooComemrce Product Gallery thumbnails

functions.php

<?php 


   //change the image size used in thumbnails
  add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
      return array(
          'width' => 300,
          'height' => 200,
          'crop' => 1,
      );
  });
  
  
?>

theme.css

/* 
  - Remove max width on the thumbnail slider
  - allow the thumbnail images to be as large as you need   
*/

body.woocommerce div.product div.woocommerce-product-gallery .flex-control-thumbs { max-width:100% !important;}
body.woocommerce div.product div.woocommerce-product-gallery .flex-control-thumbs li {max-width: 300px !important;} 

theme.js

jQuery(document).ready(function($) {
    
    //Update the number of slides to show in the thumbnail slider (slick.js)
    $('body').on('init','.flex-control-nav', function(){
        
        setTimeout(function(){ //should work without this but I am out of time
            
            //This is the important line, but you need to run it after Slick has fully initialised. 
            //Unfortunately JupiterX will add most of HTML dynamically for the slider, so you can't just wait for $('.flex-control-nav') to init
            //4 = number of thumbnails you want
            $('.flex-control-nav').slick('slickSetOption', 'slidesToShow', 4); 
            
        },500);
        
    });
    
});