WooCommerce Custom Pagination

Question

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

Answer 1

Hope you are doing good.

You can use the below sample code:

Updated: I have updated my Gist link to added code of template. Create a template with name template-product.php

<?php
/**
 * @author Baikare Sandeep
 * 
 * Template Name: Product
 */


get_header(); ?>

<?php 
    $args = array(
        'posts_per_page'=> 12,
        'post_type' => 'product',
        'post_status'   => 'publish',
        'paged'     => get_query_var('paged') ? get_query_var('paged') : 1
    ); 
?>

<div class="container marginT10P">
    <div id="products" class="row view-group">
        <?php $the_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;

            $big = 999999999; // need an unlikely integer
             echo paginate_links( array(
                'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
                'format' => '?paged=%#%',
                'current' => max( 1, get_query_var('paged') ),
                'total' => $the_query->max_num_pages
            ) );

            wp_reset_postdata();
    } else {
      echo __( 'No products found' );
    }
  ?>
</div>
</div>


<?php
get_footer();

I have tested it, and working with pagination.

Hope this will help you.