WooCommerce Customized Pagination

Can anyone assist me with a state of affairs I’ve on my customized archive-product.php?

I’m attempting so as to add pagination to my grid I’ve made however have no idea the place to start out. That is the code for my merchandise:

<?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="merchandise" class="row view-group">
        <?php $question = new WP_Query( $args );
            if ( $the_query->have_posts() ) {
            world $wpdb;
            whereas ( $the_query->have_posts() ) : $the_query->the_post();
            $picture = wp_get_attachment_image_src( get_post_thumbnail_id( $the_query->post->ID ), 'single-post-thumbnail' );
        ?>

  <div class="merchandise 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 $picture[0]; ?>" alt="<?php get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ); ?>" alt="" /></a>
    </div>
    <div class="caption card-body">
        <?php world $woocommerce;
            $foreign money = get_woocommerce_currency_symbol();
            $worth = get_post_meta( get_the_ID(), '_regular_price', true); 
        ?>
        <h4 class="group card-title interior list-group-item-heading text-grey"><?php echo $foreign money; echo $worth; ?> pcm</h4>
        <i class="fa fa-bath"></i> <?php echo $product->get_attribute( 'loos' ); ?>
        <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 interior list-group-item-text daring no-margin font-size14 text-grey"><?php the_title(); ?></p>
        <p class="group interior 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 category="btn btn-primary padding40 daring" href="<?php the_permalink(); ?>">Full Particulars</a>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-6 text-right">
                <a category="btn btn-success padding20 daring" href="<?php echo esc_url( home_url( '/request-call-back' ) ); ?>">Organize To View</a>
            </div>
        </div>
    </div>
    <div class="img-event">
        <a category="btn btn-danger padding40 width100 daring" href="tel:01472222333">Name 01472 222333</a>  
    </div>
</div>
</div>
  <?php endwhile;
    } else {
      echo __( 'No merchandise discovered' );
    }
  ?>
</div>
</div>

sorry for the messy code I’ll optimise it when it is full