WooCommerce Custom Products Per Page Dropdown

Introduction

In this tutorial, you will learn to add dropdown which controls maximum how many products to show on a page.
This tutorial is the continuation of custom sorting tutorial
We will add a dropdown with selection options 4, 8, 16, 32 and All to control our products per page logic
We will add our code logic to our existing plugin repository in GitHub in a new branch v2
For your easy understanding of the logic lets, we see each and individual method with its filter separately in it’s each section instead of skimming the code from top to bottom
Lets we examine each part individually to understand the logic crystal clear

Here we will explore the snippet of the method add_query_vars_products_per_page from our plugin class VG_Sort which add our query variable show to the query variable array
Direct link to the method in code repository branch v2

This method accepts a single parameter $vars on line 8 (line 8 is relative to the snippet, not the full code in repository this applicable to the upcoming explanations too) which holds all the publicly allowed query variables
On line 9 we added our query variable show which accepts the number of products to show per page
Once our query variable string also appended to the existing query vars array we return the variable $vars
This whole method is a callback method which attached to the filter query_vars please check the line number 15 for better understanding
Now we can use the query var show in our code we will see that in the next section

Here we will explore the snippet of the method custom_products_per_page of the plugin class VG_Sort this method is core logic which controls the number of products to show per page
Direct link to the method in code repository branch v2

This method accepts a single parameter $per_page which accepts integer value by default WooCommerce assigns 16
The shop page more technically we can say product archive page which shows 16 products per page
Now we will change this argument variable $per_page value to see how this affect the number of products showing on a page
On line 10 we are using the WordPress helper function get_query_var which is used to fetch variable for WP_Query class we already appended our variable show we can use that in the query string
1. The function get_query_var holds the two arguments the first one is query string variable’s name the second one is the default value if the query string show is not added in the URL
From line 13 to 24 we used the switch case which handles how many products to show
1. Inside the switch statement if the variable $count matches with any case statement for example if it is matched with 8 then $per_page assigned with the value stored in variable $count
2. If the $count not matched with the any of the case statement then default value of 16 will be assigned to variable $per_page
At last, we return the variable $per_page
Once you attached this callback method to the filter loop_shop_per_page, you can test this functionality by passing query string like http://example.com/shop/?show=4 to your shop page directly

In the previous section, we implemented core logic behind the number of products to show in a page and we tested it by passing value for the query string show
Lets we see the method template_products_per_page of the class VG_Sort
Direct link to the method in code repository branch v2

On line 9 we call the method wc_get_template which is responsible for rendering the dropdown for products per page logic
1. This method first parameter is template name, in the method we used products-per-page.php
2. The second parameter is an optional array parameter where we can pass any value to our template by passing an associative array
3. The third parameter is denoting the template path
4. The fourth parameter is where we pass the path for our template which points to the directory templates which is present inside the plugin directory itself
  1. The function plugin_dir_path identifies the plugin directory by accepting the file name here we use PHP magic constant __FILE__ which returns the file name with the full path
  2. We append the string templates/ to the plugin_dir_path returned string which is point to the directory present inside our plugin root path
On line 12 we hooked our method to action function woocommerce_before_shop_loop which call our render method template_products_per_page before products rendering
On that time, our HTML content present in the path plugin-root/templates/products-per-page.php will be outputted on the archive page

In the previous section, we saw how our template is outputting, now we will see the HTML part of that rendered template plugin-root/templates/products-per-page.php
Direct link to the template in code repository branch v2

The HTML is straight forward so will explain important aspects only instead of explaining like what is form, label, etc
On line 7 for our form, we added our class vg-sort-show to the class attribute
On line 9 for the select tag, we added the attribute onchange with the value this.form.submit() which triggers the form submission when we change the value for e.g. from 4 to 16 it will trigger the form submission
In every option tag, we called the WordPress function selected which accepts three parameters and outputs selected="selected" attribute
1. The first parameter holds the first value to compare
2. The second parameter holds the second value to compare (which is optional)
3. The third parameter is control whether to echo the selected attribute or not (which is optional)
4. Official documentation
On line 17 the function wc_query_string_form_fields (official documentation) is used to outputs hidden form inputs for each query string variable

We are reached the final section of this tutorial this part is responsible for styling and positioning our products per page dropdown
Direct link to the method in code repository branch v2
Lets we explore the method add_assets of the plugin class VG_Sort

On line 9 we imported our CSS main.css which is located in plugin-root/assets/css/main.css using WordPress function wp_enqueue_style the first parameter is handle name it should be unique and the second parameter is CSS file’s URL
plugin_dir_url is similar to plugin_dir_path but it returns URL instead of filesystem directory path which is appended to our CSS file
This callback method is hooked to the action wp_enqueue_scripts on line 12 which is responsible for register and enqueue our asset file in the rendered HTML page

On line 1 we are applying our CSS to form class vg-sort-show
On line 2 we provided rule float: right to move our form towards the right end of the parent element
On line 3 we applying o to both top and right margin 1rem to bottom to align parallel to the sort dropdown and to provide spacing between this and sort dropdown added 1.5rem to margin left
On line 4 applied padding 0.75rem to top and bottom then 0 for left and right
For CSS I referred CSS class woocommerce-ordering of official WooCommerce layout CSS (just inspect the default sort by dropdown form and apply whatever CSS opt for you by referring that)

You learned totally new concept when compared to previous tutorial, instead of altering existing one you added something brand new product per page dropdown
Learned to create new HTML template and render it on the fly with help of a hook function
Learned to add assets to your plugin
Learned few WordPress and WooCommerce functions