How to Add WooCommerce Storefront Product Pagination

Table of Contents

Do you want to add pagination on the Shop page of your WooCommerce store? Pagination is defined as the process of separating print or digital content into discrete pages.

For online content, pagination refers to the automated process of adding consecutive numbers to identify the pages’ sequential order.

Your WooCommerce shop page will benefit from being broken into separate pages to make them more user-friendly.

Storefront Product Pagination

Moreover, it would help if you also refined the pagination controls. Many people think of this element as an afterthought, and this affects the overall design.

However, the importance of pagination is subjective and depends on the content you have.

For example, for Google’s search results, pagination is important because as much as they want to give you the most relevant information on the first pages, there are many times.

In this brief tutorial, you will see how easy it is to add pagination without using a plugin. Let us delve into some coding.

Steps to Add Numeric Pagination on the Shop Page in the Storefront Theme

Here are the simple steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add numeric pagination on the shop page
Add the following code to the functions.php file:

function njengah_pagination() {

    if( is_singular() )

        return;

     global $wp_query;

     $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;

    $max   = intval( $wp_query->max_num_pages );

    /** Add current page to the array */

    if ( $paged >= 1 )

        $links[] = $paged;

    /** Add the pages around the current page to the array */

    if ( $paged >= 5 ) {

        $links[] = $paged - 1;

        $links[] = $paged - 2;

    }
    echo '<div class="navigation"><ul>' . "\n";

    /** Previous Post Link */

    if ( get_previous_posts_link() )

        printf( '<li>%s</li>' . "\n", get_previous_posts_link() );

    /** Link to first page */

    if ( ! in_array( 1, $links ) ) {

        $class = 1 == $paged ? ' class="active"' : '';




        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

    }
    /** Link to current page*/

    sort( $links );

    foreach ( (array) $links as $link ) {

        $class = $paged == $link ? ' class="active"' : '';

    }

    /** Link to last page,*/

    if ( ! in_array( $max, $links ) ) {

        if ( ! in_array( $max - 1, $links ) )

            echo '<li>…</li>' . "\n";
        $class = $paged == $max ? ' class="active"' : '';

    }

    /** Next Post Link */

    if ( get_next_posts_link() )

        printf( '<li>%s</li>' . "\n", get_next_posts_link() );
    echo '</ul></div>' . "\n";

}

This is the outcome:

If you want to add this pagination to your archive pages or any other, add the following code.

<?njengah_pagination()); ?>

Conclusion

This is a simple and straightforward way of adding number pagination to the Shop page of our WooCommerce store without the use of a plugin.

You just need to copy that code to your function.php file and call the function in your archives.php template.

Additionally, you need to add some CSS styling so that it can match your brand design. If you are stuck and need help from a skilled WordPress developer, please ask for help.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Add WooCommerce Storefront Product Pagination

Storefront Product Pagination

Steps to Add Numeric Pagination on the Shop Page in the Storefront Theme

Conclusion

Similar Articles

Related