WordPress static home page pagination not working

Question

I am trying to add the pagination on the home page, But it is not working. Can anyone help me to fix the issue?

    <ul class="xl-products grid- masonry">
        <?php

        if(is_front_page()) {
            $paged = (get_query_var('page')) ? get_query_var('page') : 1;
        }else {
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        }

        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 10,
            'paged'          => $paged,
        );

        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <li class="xl-product-item item- brick">
                <div class="product-box content">

                    <?php woocommerce_template_loop_product_thumbnail(); ?>
                    <div class="info">
                        <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <div class="category">

                            <?php echo wc_get_product_category_list( $loop->post->ID, ', ', '' ); ?>

                        </div>
                        <div class="price-wrapper">
                            <?php woocommerce_template_loop_price(); ?>
                        </div>

                        <div class="cart-btn">
                            <?php woocommerce_template_loop_add_to_cart(); ?>

                        </div>
                        <div class="user">
                            <?php echo get_avatar(get_the_author_meta( 'ID' ), 50); ?>
                            <span class="name"><?php the_author(); ?></span>
                        </div>
                    </div>

                </div>
            </li>

        <?php endwhile; ?>

        <?php else : echo __( 'No products found' ); ?>
        <?php endif; ?>

    </ul><!–/.products–>

    <div style="text-align:center;">
        <?php //echo 4;?>

        <div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
        <div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>

    </div>


    <?php wp_reset_postdata(); ?>

Answer 1

You are using the pagination on the global $wp_query by default, and not on your custom query ($loop). That's probably why it doesn't work properly.

<ul class="xl-products grid- masonry">
    <?php
    global $wp_query;

    if(is_front_page()) {
        $paged = (get_query_var('page')) ? get_query_var('page') : 1;
    }else {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    }

    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 10,
        'paged'          => $paged,
    );
    
    $loop = new WP_Query( $args );
    
    // Reset main wp_query 
    $wp_query = null; 
    $wp_query = $loop;

    if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); ?>

        <li class="xl-product-item item- brick">
            <div class="product-box content">

                <?php woocommerce_template_loop_product_thumbnail(); ?>
                <div class="info">
                    <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="category">

                        <?php echo wc_get_product_category_list( $loop->post->ID, ', ', '' ); ?>

                    </div>
                    <div class="price-wrapper">
                        <?php woocommerce_template_loop_price(); ?>
                    </div>

                    <div class="cart-btn">
                        <?php woocommerce_template_loop_add_to_cart(); ?>

                    </div>
                    <div class="user">
                        <?php echo get_avatar(get_the_author_meta( 'ID' ), 50); ?>
                        <span class="name"><?php the_author(); ?></span>
                    </div>
                </div>

            </div>
        </li>

    <?php endwhile; ?>

    <?php else : echo __( 'No products found' ); ?>
    <?php endif; ?>

</ul><!–/.products–>

<div style="text-align:center;">
    <?php // You $wp_query is still from $loop there ?>
    <div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
    <div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>

</div>

<?php // You can reset from here
$wp_query = null; 
wp_reset_query(); // Reset $wp_query to the real $wp_query 

You don't need to use wp_reset_postdata if you use wp_reset_query (See the doc of wp_reset_query) it's already included in the function.