how to add default product sorting of woocommerce on the custom page template?

I have created a custom page template in which I load the listing of products using WooCommerce functions but not templates. But now I want to implement the default WooCommerce sorting functionality on my custom page template. How can I implement this?

I do not want to use WooCommerce templates. I simply want to make a sorting function like the default on with the use of WooCommerce functions.

Here is my custom page template code:

<?php
/**
 Template Name: Shop page custom layout template
 */

get_header(); ?>

<?php
    $full_product_list = array();
$loop = new WP_Query( array( 'post_type' =>array( 'product', 'product_variation' ), 'posts_per_page' => -1,) );

while ( $loop->have_posts() ) : $loop->the_post();
    $theid = get_the_ID();
    $product = new WC_Product($theid); ?>
    <?php $product_url=$product->add_to_cart_url(); ?>
    <ul><li><a href="<?php echo get_the_permalink(); ?>">
<?php
   echo '<h3>' . get_the_title() . '</h3>';
    echo woocommerce_get_product_thumbnail();
    if ( $product->is_on_sale() ) : 
       echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale">' . __( 'Sale!', 'woocommerce' ) . '</span>', $post, $product ); 
    endif; 
    if ( $price_html = $product->get_price_html() ) : ?>
    <span class="price"><?php echo $price_html; ?></span>
    <?php endif; 
    if ( $rating_html = $product->get_rating_html() ) : ?>
    <?php echo $rating_html; ?>
<?php endif; ?>

  <?php $cart_url="/construction/shop/?add-to-cart=".$theid; ?>
   <a class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_sku="" data-product_id="<?php echo $theid ?>" data-quantity="1" href="<?php echo $cart_url; ?>" rel="nofollow">Add to cart</a>
    </a></li></ul>
<?php
endwhile; wp_reset_query();

?>
<?php get_footer(); ?>