'How i able to work with pagination of custom woocommerce shop page?

Hi I have created a custom product archive page in woocommerce and created a custom design for the pagination as well..but i unable to make it dynamic. Have any idea how to work with pagination? My code of reference is below-

I am trying to go to the second page with tha pagination but it is not working. I have searched most of the forum but i did not get much help. Can you please help me to solve this?

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header( 'shop' ); ?>

<section class="banner_section inner_banner">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                            <div class="main_heading">
                                <h1>OUR PRODUCT RANGE</h1>
                                <p>
                                    Our product range is shown below - deli & ready meal items cannot ne ordered online, please contact us for all orders.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                </section>

<section class="filter_section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h2 class="title_heading text-center">Filter By</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <select class="form-control" id="sel1">
                                <option>Product</option>
                                <option>2</option>enter code here
                                <option>3</option>
                                <option>4</option>
                                </select>
                            </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <select class="form-control" id="sel1">
                            <option>Product</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                          </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                            <select class="form-control" id="sel1">
                            <option>Product</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                          </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <select class="form-control" id="sel1">
    <option>Product</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
                    </div>
                </div>
            </div>
            <div class="requirement_box">
                <h3>Select your requirements</h3>
                <button type="button" class="btn clear_btn">Clear all</button>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="checkbox">
                                        <label><input type="checkbox" value="">Gluten free</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="checkbox">
                                        <label><input type="checkbox" value="">Dairy free</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="checkbox">
                            <label><input type="checkbox" value="">Vegetarian</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="checkbox">
                                        <label><input type="checkbox" value="">Nut free</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="checkbox">
                                        <label><input type="checkbox" value="">Vegan</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button type="button" class="btn filter_btn">Filter</button>
                        </div>
                    </div>
                </div>
                </section>


<section class="product_section our_product_section">
                <div class="container">
                    <div class="row">
                      <?php
               $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                $meta_query  = WC()->query->get_meta_query();
                $tax_query   = WC()->query->get_tax_query();
                $tax_query[] = array(
                    'taxonomy' => 'product_visibility',
                    'field'    => 'name',
                    'terms'    => 'featured',
                    'operator' => 'NOT IN',
                );

                $args = array(
                    'post_type'           => 'product',
                    'post_status'         => 'publish',
                    'ignore_sticky_posts' => 1,
                    'posts_per_page'      => 6,
                    'paged' => $paged,
                    'orderby'             => $atts['orderby'],
                    'order'               => $atts['order'],
                    'meta_query'          => $meta_query,
                    'tax_query'           => $tax_query,
                );

                


                $loop = new WP_Query($args);
                if ($loop->have_posts()) {
                    while ($loop->have_posts()) : $loop->the_post(); ?>
                            <div class="col-md-4">
            <div class="product_cntr">
                <div class="product_grid_box">
                <span class="offer_text">New</span>
                <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' );?>
                    <a href="<?php the_permalink(); ?>"><img src="<?php  echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>" class="img-fluid"/></a>
                    <div class="icon_box">
                    <span class="heart_icon"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/purpel_heart.png" ></span>
                    <span class="heart_icon"><?php
echo sprintf('<a href="%s" data-quantity="1" class="%s" %s>%s</a>', esc_url($product->add_to_cart_url()), esc_attr(implode(' ', array_filter(array(
    'button',
    'product_type_' . $product->get_type(),
    $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
    $product->supports('ajax_add_to_cart') ? 'ajax_add_to_cart' : ''
)))), wc_implode_html_attributes(array(
    'data-product_id' => $product->get_id(),
    'data-product_sku' => $product->get_sku(),
    'aria-label' => $product->add_to_cart_description(),
    'rel' => 'nofollow'
)), __('<img src="'. get_template_directory_uri() . '/assets/img/purpel_cart.png" >'));
?></span>
                    </div>
                    
                </div>
                <h3 class="product_title"><a href="<?php the_permalink(); ?>"><?php echo the_title(); ?></a></h3>
<?php $price = get_post_meta( get_the_ID(), '_price', true ); ?>
                    <span class="product_price"><?php echo wc_price( $price ); ?></span>
                </div>
            </div>
<?php endwhile;
                } else {
                    echo __('No products found');
                }
               
              
                wp_reset_postdata();
                ?>
<div class="pagination">
  <a href="#">&laquo;</a>
  <a class="active" href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</div>
</div>
</section>

<section class="newsletter_section">
<div class="container header_container">
<div class="row">
<div class="col-md-6">
<div class="newsletter_box">
<h3><?php the_field('newsletter_heading');?></h3>
<p>
    <?php the_field('newsletter_text');?>
</p>
</div>
</div>
<div class="col-md-6">
<div class="input-group subscribe_box">
<input type="email" class="form-control" placeholder="Enter your email">
<span class="input-group-btn">
<button class="btn" type="submit">Subscribe</button>
</span>
</div>
</div>
</div>
</div>
</section>

<?php get_footer( 'shop' ); ?>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source