Show products per page drop down

Question

So i have a wordpress woocommerce site and I would like to add a button under the pagenumbers (do you call this pagination?) so the user can select himself how many products to view per page, ie 20, 40, 80 etc.

I would like it to be at the bottom under the page numbers, I have tried a solution that leaves the drop down at the top, near where it says "Showing products 1-20.." not quite where I want it.

Any ideas? point me to a thread or tutorial on this?

Thanks for reading!

Mike

example i like https://www.funko.com/shop (see bottom)

Answer 1

If I'm understanding your comment properly, then the solution is quite simple. In the StackOverflow answer you have this line right at the top:

add_action( 'woocommerce_before_shop_loop', 'ps_selectbox', 25 );

What that line does is take the function you created (ps_selectbox) and it hooks it into the woocommerce_before_shop_loop action hook. WooCommerce is littered with these action hooks, specifically for this purpose, so that we can add in our own functions and changes without having to edit their core code.

So if the only issue you're looking to address with the answer from StackOverflow (https://stackoverflow.com/a/55292815) is to change where the dropdown appears, then you just need to change the first line:

add_action( 'woocommerce_after_shop_loop', 'ps_selectbox', 5 );

There's two things changed there. 1) I changed the action to woocommerce_after_shop_loop, this will make it appear below the products. 2) I changed the priority number of the add_action to 5 instead of 25.

I changed the priority number because if we go and look at the default archive-product.php template that comes bundled as part of WooCommerce, we see this:

/**
 * Hook: woocommerce_after_shop_loop.
 *
 * @hooked woocommerce_pagination - 10
 */
do_action( 'woocommerce_after_shop_loop' );

In the comments it's telling us that woocommerce_pagination is being hooked into this same action (by WooCommerce) with a priority of 10.

So by adding your function ps_selectbox at 5 it's coming BEFORE the built in WooCommerce pagination.

If you want it to come after the woocommerce pagination, you'd change your priority value to 15 or 20. You decide if you want to jump in increments of 5 or 10.

If you look through the archive-product.php you'll notice that all of the action hooks list other functions that are already being hooked into them and the priority is spaced by 10s, like so:

/**
 * Hook: woocommerce_before_shop_loop.
 *
 * @hooked woocommerce_output_all_notices - 10
 * @hooked woocommerce_result_count - 20
 * @hooked woocommerce_catalog_ordering - 30
 */

This is done intentionally by WooCommerce so that you/other developers, can wedge their own functions in between the default WooCommerce ones. They leave 9 spots between function hooked for you to hook your own.