How to add custom pagination page navigation to WooCommerce

How to add custom pagination page navigation to WooCommerceIf you have used the WooCommerce eCommerce plugin for WordPress, you have seen that the default Next and Previous Page links pagination page navigation is not very pretty. Today’s snack is a Tutorial that shows you how to add the WordPress plugin WP-PageNavi to a WooCommerce WordPress site in 3 easy steps to make your product archive page navigation easier to use and improve it’s look with numbered blocks instead of just next/previous links.

You can download this free WordPress Pagination plugin at: WordPress.org’s Plugin Repository – WP-PageNavi.

Step 1:

You should download and install WP-PageNavi into your WordPress plugins directory and then activate the plugin in your WordPress Dashboard.

Step 2:

Once it is installed, you can set up the options using the settings page for this plugin in your WordPress Dashboard.

Step 3:

After you have the settings set up, add this code below to your current theme’s Functions.php file to have WP-PageNavi’s pagination replace WooCommerce’s default page navigation:

/**
 * Replace WooCommerce Default Pagination with WP-PageNavi Pagination
 *
 * @author WPSnacks.com
 * @link http://www.wpsnacks.com
 */
remove_action('woocommerce_pagination', 'woocommerce_pagination', 10);
function woocommerce_pagination() {
		wp_pagenavi(); 		
	}
add_action( 'woocommerce_pagination', 'woocommerce_pagination', 10);

That’s it, now you have a much better looking and easier to use Pagination Page Navigation on your WooCommerce Product Archive Pages.

   Related Sponsored Links

Disclaimer: The information contained in this website is for general information purposes only and in no event will this site or its owners be liable for any losses or damages associated with your use of our site or content. Click here to see our full Disclaimer.

Comments

  1. mattrhysdavies says:

    I’ve tried deploying this, the links show correctly, but the content doesn’t change when you paginate your way through.
     
    Any ideas?
     

    •  @mattrhysdavies Sorry, but I’m not sure why it wouldn’t be working.  I just  checked to make sure it works with the most recent update of the plugins and it is working correctly.  You are using this with both the WooCommerce and WP-PageNavi plugins?  Also, how do you have your permalinks set up?

      • mattrhysdavies says:

         @WPSnacks Thanks for getting back to me. It turns out I was just making a hideous oversight and had another loop further up the page. I really appreciate the information provided and the reply.
         
        Thanks,
        Matt

  2. Sorry, but I’m not sure why it wouldn’t be working.  I just  checked to make sure it works with the most recent update of the plugins and it is working correctly.  You are using this with both the WooCommerce and WP-PageNavi plugins?  Also, how do you have your permalinks set up?

  3. purpleblaze says:

    Thanks for the great post! Was very useful! How would I change the location? I want it at the top of the page instead of the bottom… 

  4. JohanVandeMerwe says:

    Thanks, this was real easy and it works like a charm.

  5. colorfultimes says:

    Appreciated. Thanks.

  6. eric_wijaya says:

    Thanks, work like a charm

  7. I had to add these lines to remove the woocommerce pagination: remove_action(‘woocommerce_pagination’, ‘woocommerce_catalog_ordering’, 20); remove_action(‘woocommerce_pagination’, ‘woocommerce_pagination’, 10); remove_action(‘woocommerce_pagination’, ‘woocommerceframework_pagination’, 10); remove_action(‘woocommerce_pagination’, ‘woocommerce_pagination_wrap_open’, 5); remove_action(‘woocommerce_pagination’, ‘woocommerce_pagination_wrap_close’, 25);

  8. f1mktsol says:

    I had to add some CSS to get rid of the Woo and allow only WP PageNavi to display:
    .woo-pagination {display: none; }

  9. FlorifelBalaisValdenibro says:

    I’ve followed the steps above but nothing happened. Still no pagination in my recent products. Pls help me. thanks.

  10. mikulspatel says:

    I’ve followed the steps above but nothing happened. Still no pagination in my category products. Pls help me. thank you.

Leave a Comment

*