Can anybody help me with a situation I have on my custom archive-product.php?

I am trying to add pagination to my grid I have made but do not know where to start. This is the code for my products:

<?php $the_query = new WP_Query( array(
   'posts_per_page'=>12,
   'post_type'=>'product',
   'paged' => get_query_var('paged') ? get_query_var('paged') : 1)
   ); 
?>

<div class="container marginT10P">
    <div id="products" class="row view-group">
        <?php $query = new WP_Query( $args );
            if ( $the_query->have_posts() ) {
            global $wpdb;
            while ( $the_query->have_posts() ) : $the_query->the_post();
            $image = wp_get_attachment_image_src( get_post_thumbnail_id( $the_query->post->ID ), 'single-post-thumbnail' );
        ?>

  <div class="item col-xs-4 col-md-6 col-lg-4">
    <div class="thumbnail card">
      <div class="img-event">
        <a href="<?php the_permalink(); ?>"><img class="group list-group-image img-fluid propertysize" src="<?php echo $image[0]; ?>" alt="<?php get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ); ?>" alt="" /></a>
    </div>
    <div class="caption card-body">
        <?php global $woocommerce;
            $currency = get_woocommerce_currency_symbol();
            $price = get_post_meta( get_the_ID(), '_regular_price', true); 
        ?>
        <h4 class="group card-title inner list-group-item-heading text-grey"><?php echo $currency; echo $price; ?> pcm</h4>
        <i class="fa fa-bath"></i> <?php echo $product->get_attribute( 'bathrooms' ); ?>
        <div class="icon-marginL10"><i class="fa fa-bed"></i> <?php echo $product->get_attribute( 'bedrooms' ); ?></div>
        <div class="icon-marginL10"><i class="fa fa-couch"></i> <?php echo $product->get_attribute( 'lounges' ); ?></div>
        <p class="group inner list-group-item-text bold no-margin font-size14 text-grey"><?php the_title(); ?></p>
        <p class="group inner list-group-item-text font-size14"><?php echo get_post_meta( get_the_ID(), 'grid-description', true ); ?></p>
        <div class="row">
            <div class="col-xs-12 col-md-6 col-lg-6 text-left tabletL-margin">
                <a class="btn btn-primary padding40 bold" href="<?php the_permalink(); ?>">Full Details</a>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-6 text-right">
                <a class="btn btn-success padding20 bold" href="<?php echo esc_url( home_url( '/request-call-back' ) ); ?>">Arrange To View</a>
            </div>
        </div>
    </div>
    <div class="img-event">
        <a class="btn btn-danger padding40 width100 bold" href="tel:01472222333">Call 01472 222333</a>  
    </div>
</div>
</div>
  <?php endwhile;
    } else {
      echo __( 'No products found' );
    }
  ?>
</div>
</div>

sorry for the messy code I will optimise it when it’s complete

$299 Affordable Web Design WordPress