WooCommerce Custom Products Per Page Dropdown

Introduction

1. In this tutorial, you will learn to add dropdown which controls maximum how many products to show on a page.
2. This tutorial is the continuation of custom sorting tutorial
3. We will add a dropdown with selection options 4, 8, 16, 32 and All to control our products per page logic
4. We will add our code logic to our existing plugin repository in GitHub in a new branch v2
5. 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
6. Lets we examine each part individually to understand the logic crystal clear

Explanation: Adding query string variables

1. 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
2. Direct link to the method in code repository branch v2

3. 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
4. On line 9 we added our query variable show which accepts the number of products to show per page
5. Once our query variable string also appended to the existing query vars array we return the variable $vars
6. This whole method is a callback method which attached to the filter query_vars please check the line number 15 for better understanding
7. Now we can use the query var show in our code we will see that in the next section

Explanation: Method controls product per page

1. 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
2. Direct link to the method in code repository branch v2

3. This method accepts a single parameter $per_page which accepts integer value by default WooCommerce assigns 16
4. The shop page more technically we can say product archive page which shows 16 products per page
5. Now we will change this argument variable $per_page value to see how this affect the number of products showing on a page
6. 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
7. 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
8. At last, we return the variable $per_page
9. 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

Explanation: Template For Product Per Page Dropdown

1. 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
2. Lets we see the method template_products_per_page of the class VG_Sort
3. Direct link to the method in code repository branch v2

3. 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
4. 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
5. On that time, our HTML content present in the path plugin-root/templates/products-per-page.php will be outputted on the archive page

Explanation: Dropdown HTML

1. 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
2. Direct link to the template in code repository branch v2

3. The HTML is straight forward so will explain important aspects only instead of explaining like what is form, label, etc
4. On line 7 for our form, we added our class vg-sort-show to the class attribute
5. 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
6. 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
7. On line 17 the function wc_query_string_form_fields (official documentation) is used to outputs hidden form inputs for each query string variable

Explanation: Dropdown CSS Enqueuing

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

3. 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
4. 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
5. 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

Explanation: Dropdown CSS File

1. The CSS file is located in the path plugin-root/asset/css/main.css
2. Direct link to the CSS file in code repository branch v2

3. On line 1 we are applying our CSS to form class vg-sort-show
4. On line 2 we provided rule float: right to move our form towards the right end of the parent element
5. 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
6. On line 4 applied padding 0.75rem to top and bottom then 0 for left and right
7. 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)

Conclusion

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