For large online stores, it’s practically necessary to have a dropdown menu that allows you to change the number of products shown per page. If you’re like me, you don’t want to browse through 50 pages of 10 products each to find what you want—I much prefer selecting “View All Products” and scrolling through everything to get the product I want.
Since WooCommerce is one of the most popular e-commerce plugins on WordPress today, it surprised me to know that it doesn’t let you dynamically change the number of products shown per page with a dropdown menu. Searching for this function brought me to many forums posts and blog posts saying “Oh, just change the number of posts shown on your blog in your Reading Settings.” With the right set of search words, however, I managed to find this gem by Derek Schmidt.
His code helped me add in the dropdown that will change the number of products shown per page, but it doesn’t automatically load your selected option upon refresh or page change. If you read through the comments, Adrian posts some code but WordPress filtered out some of the characters. There’s also some jQuery that’s involved, but was left out.
Here is what I came up with from Derek’s and Adrian’s code. It works and it’s easy to customize. Remember to sub out “yourdomain.com” towards the end of the code with the address of your domain or subdomain.
It took me a while to figure out the jQuery. Adrian had posted this in reference to forcing the dropdown to select the currently used option, but this refers to the option index instead of the option value (note: the following line of code isn’t necessary – it’s included in the code above but edited to use the option’s value instead of its index):
I didn’t feel like writing a loop to figure out the option’s position within the dropdown, so I changed it to use the option value.
So if you have a large store using WooCommerce, try out this code. Your customers will be able to change the number of products they want to see per page, which improves user experience.