How to make pagination when displaying woocommerce products?

Question

WordPress

How to make pagination when displaying products? There is a cycle in which I display products, but if there are a lot of them, pagination is needed, tell me how to do it?

<?php get_header();?>

    <div class="content container">
        
    <?php get_sidebar('cat'); ?> 
    <!-- <?php
        $sort=$_GET['product_cat'];
        echo do_shortcode('[products limit=»2″ columns=»4″ orderby=»popularity» class=»quick-sale» on_sale=»true» category="'.$sort.'" ]');
    ?> -->
    
        <div class="products-main">
            <?php  $loop = new WP_Query( array(
            'post_type' => 'product',  // указываем, что выводить нужно именно товары
            'posts_per_page' => 12, // количество товаров для отображения
            'orderby' => 'date', // тип сортировки (в данном случае по дате)
            'product_cat' => $sort,
            )); 

        

            while ( $loop->have_posts() ): $loop->the_post(); ?>
            <div class="product-main">
                <div class="product-img"> <a href="<?php echo get_permalink(); ?>" class="avatar"><img class="responsive-img" src="<?php
                $thumb_id = get_post_thumbnail_id();
                $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);
                echo $thumb_url[0];
                ?>" alt=""></a>
                <div class="product-title"><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></div>
                <div class="product-size">Размер: <?php echo $product->get_attribute('size'); ?> см.</div>
                <div class="product-price__box">
                    <div class="product-price">Цена: <?php echo $product->get_price_html(); ?> грн.</div>
                    <div class="info-cart"><a><img src="/wp-content/themes/dropship/assets/img/cart.png"></a></div>
                </div>
                <div class="product-button">
                    <button class="fast-buy">Быстрая покупка</button>
                </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>

    </div>

<?php get_footer();?>

Answer 1

Add:

<nav class="navigation pagination" role="navigation">
  <h2 class="screen-reader-text">Навигация по записям</h2>
  <div class="nav-links"><span class="page-numbers current"><span class="meta-nav screen-reader-text">Страница </span>1</span>
    <a class="page-numbers" href="http://wptest.ru/page/2/"><span class="meta-nav screen-reader-text">Страница </span>2</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="http://wptest.ru/page/86/"><span class="meta-nav screen-reader-text">Страница </span>86</a>
    <a class="page-numbers" href="http://wptest.ru/page/87/"><span class="meta-nav screen-reader-text">Страница </span>87</a>
    <a class="next page-numbers" href="http://wptest.ru/page/2/">Следующая страница</a>
  </div>
</nav>

You can also withdraw with a hook ...
All the details are here