WooCommerce Products Per Page Plugin – Changing the Number of Products via Dropdown

products per page

You want your customers to decide how many products per page the online shop shows them? WooCommerce Products Per Page makes that super simple. We have had a closer look at the add-on for you.

The plugin adds a dropdown menu to the main and archive view of your shop, where every visitor can choose how many products he wants to see per page. A very practical little function you will find in many of the larger online shops. The title image shows the output based on our theme “Hamburg”.

Plugin Setup

The handling of WooCommerce Products Per Page couldn’t be simpler. Once installed via Plugins → Install in the WordPress backend, the plugin adds its own admin area, accessible via Settings → Products Per Page. There you can control the appearance and functionality of the dropdown menu:

WooCommerce Products Per Page – Options
WooCommerce Products Per Page – Options
  • The option Dropdown location specifies, whether the dropdown list should be displayed at the top and/or the bottom of the product list.
  • List of dropdown options allows you to define the selection options your customer can choose from. Here’s an example: “6 12 24 36 -1” will display 6 line items, or 12/24/26 products per page respectively, while “-1” stands for “Show All Products”. The increments or gradations can therefore be specified individually, for example to match the number of columns of your theme.
  • Default products per page controls the number of products displayed by default, i.e. when a user visits your shop.
  • Shop columns allows you to control the number of columns your product overview should have.

    Important: This doesn’t work with all themes. Some of the WordPress or WooCommerce themes come with a fixed number of columns, because other elements would otherwise not be able to display correctly.

  • Should the user select a different dropdown value with the option First category page active, then he will be forwarded to the first results page of the product overview.
  • Make sure to select the option ‘GET’ if the HTTP method ‘POST’ isn’t working for you. This will, however, result in the number of products to display to be attached to your online shop URL.

Translation & Language File

The English phrase “products per page” cannot be changed via the admin area. Here the author offers a tip how to translate the output of the plugin. Alternatively, we have created a German language file for you, and this is where you can download it. This file will also translate the admin area.

The installation couldn’t be easier: You only have to unzip the file locally, and then upload the files woocommerce-products-per-page-de_DE.mo and woocommerce-products-per-page-de_DE.po via FTP to the folder wp-content/plugins/woocommerce-products-per-page/languages on your webserver. The developer of the plugin will integrate the language file in one of the next versions of the plugin.

Adjusting the Output

WooCommerce Products Per Page only comes with some pretty basic design properties. That is why the dropdown is not correctly displayed in all themes. In the support area of the plugin you will find several solution approaches for individual integrations.

You can make the following changes to seamlessly integrate WooCommerce Products Per Page into the appearance of our theme “Hamburg“.

Create a JavaScript file with the name hamburg-child.js with the following content:


and then save it to the subfolder assets/js of your Hamburg child theme.

At the end of your file style.plus.woo (in the main folder of the child theme) you now add the instructions:


Lastly, you have to extend the function hamburg_setup() or the relevant function of the child theme in functions.php – in the example below it is hamburg_child_setup():


…. and add the following new functions at the end:

			function hamburg_child_add_scripts() {	wp_register_script(		'hamburg_child_js',		get_stylesheet_directory_uri() . '/assets/js/hamburg-child.js',		array( 'jquery', 'jquery-selectionBox-js' ),		'20150112',		true	);	wp_enqueue_script( 'hamburg_child_js' );}function hhwppp_wrapper_open() {	echo '<div class="row hhwppp-wrapper">';}add_action( 'wppp_before_dropdown_form', 'hhwppp_wrapper_open' );function hhwppp_wrapper_close() {	echo "</div>n";}add_action( 'wppp_after_dropdown', 'hhwppp_wrapper_close' );[/crayon]

Once all that is done, the dropdown output should look exactly like the one shown in the title image of this post. You have some tips on how to adapt the design for other themes? Please feel free to add them in the comment section.

Post Sharing

Author Avatar

Editor at MarketPress. Passionate blogger, corporate blog expert and book author (e.g. "Blog Boosting"). Co-organizer of WP Camp Berlin.

Similar Posts


New Plugin: Slack Connector - Connect WordPress, WooCommerce and Slack

by Michael Firnkes

Initially we merely wanted to optimize our own Slack-processes. With automated notifications from our MarkettPress shop, the blog and our forums. The resul ...

Read more

Role Based Prices for WooCommerce is available again: Different prices for different customer groups

by Michael Firnkes

You want different prices for different customers and users of your online shop? E.g. for subscribers or wholesaler? Or do you need bulk prices? A lot of o ...

Read more

WooCommerce Weekly Review #7: Woo vs Magento, shop security and customer confidence

by Michael Firnkes

What is a WooCommerce shop in practice? And how do you protect it against external attacks? This and more in our Weekly Review. WooCommerce vs Magento: ...

Read more

WooCommerce Weekly Review #6: Translations, WordCamp Switzerland & avoiding legal warnings

by Michael Firnkes

WooCommerce was a hot topic at WordCamp in Switzerland. Progress is being made with the system translations and there are lots of useful new extensions. Th ...

Read more


1 Comment

  1. #1
    Christoforos Drosos

    Hello, your plugin doesnt work on categories, do you know why?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">