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.
7 comments
mikulspatel
mikulspatel

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

FlorifelBalaisValdenibro
FlorifelBalaisValdenibro

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

f1mktsol
f1mktsol

I had to add some CSS to get rid of the Woo and allow only WP PageNavi to display:

.woo-pagination {display: none; }

karzin
karzin

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);

JohanVandeMerwe
JohanVandeMerwe

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