Load WP_Query via AJAX breaks WooCommerce Product JS

I am planning to create a menu to sort my products dynamically. Each time a sorting method is selected (i.e. by price) I want to refresh the products and have an ajax call load in a new WP_Query.

I am successful so far at loading the products via a button which triggers an AJAX call, but my problem is that once the products load there are some issues with their normal functionality.

The products are variables, and usually when you have selected which variable options you like a price will be outputted. This no longer happens and I’m wondering how I can refresh the variable product’s JS so that it works.

Here is what my functions.php look like.

//Enqueue Ajax Scripts
function enqueue_product_show_ajax() {
    wp_register_script( 'product-show-ajax-js', get_template_directory_uri() .   '/js/product-show-ajax.js', array( 'jquery' ), '', true );
    wp_localize_script( 'product-show-ajax-js', 'product_show_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    wp_enqueue_script( 'product-show-ajax-js' );
}
add_action('wp_enqueue_scripts', 'enqueue_product_show_ajax');

function ajax_show_product() {

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        // Indicate the product category - in this case "Training"
        'product_cat' => 'training',
        'orderby' => '_price',
        'order' => 'desc'
    );
    $loop = new WP_Query( $args );
    if ( $loop->have_posts() ) {
        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <div class="product-node">
            <?php wc_get_template_part( 'content', 'single-product' ); ?>
            </div>
        <?php endwhile;
    }
    wp_reset_postdata();

    die();

}

//Add Ajax Actions
add_action('wp_ajax_show_product', 'ajax_show_product');
add_action('wp_ajax_nopriv_show_product', 'ajax_show_product');

Here is my AJAX call in my product-show-ajax.js

$('.ajax').on('click', function(){
    show_products(); 
});

//Main ajax function
function show_products() {

    $.ajax({
        type: 'GET',
        url: product_show_ajax.ajax_url,
        data: {
            action: 'show_product',
        },
        beforeSend: function ()
        {
            //Eventually show a loader here
        },
        success: function(data)
        {
            //Eventually hide loader here
            $( '.product-container' ).html(data);;
        },
        error: function()
        {
            //If an ajax error has occured, do something here...
            $(".product-container").html('<p>There has been an error</p>');
        }
    });
}

So to recap, my problem is that WooCommerce specific JS to do with variable products isn’t running, I’m guessing because it’s loaded before the products and so when the ajax function shows the products the JS that was loaded for them hasn’t binded to any of the elements.

How can I make sure WooCommerce specific JS is reloaded once my product loads?

Thanks All!