Vijayan's Blog

WooCommerce Custom Product Sorting

—

by

admin
in ,

Introduction

  1. In this tutorial you will learn how to add custom sorting for the product archive page
  2. Renaming the existing sorting option
  3. Re-ordering the option in sort dropdown
  4. Overriding sorting form template and add meaningful title for the sorting dropdown
  5. Quick overview of how to create plugin (Yes, all our customisation are plugin based except adding title to the sorting dropdown)

Quick Overview Plugin Creation

  1. Go to the following path wp-content/plugins in your WordPress Project
  2. Create a new directory and name it like vg-woo-sort
  3. For naming the plugin I follow the following convention either my initial or project initial hyphen plugin name
  4. Inside the directory vg-woo-sort create a new PHP file vg-woo-sort.php
  5. Once you created the file, for security purpose add this line first which blocks the direct access to our script
  1. Then add few plugin headers (Plugin Name is must)
  1. Finally go to your Plugins menu in WP Admin Panel you will find your new minimal plugin kindly activate it

Customise Sorting Dropdown

  1. WordPress plugin functionalities can be developed either by procedural or object oriented
  2. Our plugin is developed through object oriented even though it’s simple
  3. Our plugin class VG_Sort has two callback method custom_woocommerce_get_catalog_ordering_args and custom_woocommerce_catalog_orderby
  4. Lets we see each method’s inner working in its individual section

Plugin & Template Full Code

  1. You can find the full code for both plugin and template code in github
  2. The plugin’s core code
  1. The template’s core code

Explanation: Ordering Method

  1. Here we will explore the snippet of the method custom_woocommerce_get_catalog_ordering_args from our plugin class VG_Sort
  1. Here and in all explanation sections the line number denotes each individual snippet’s line number not the full code section
  2. In line no 7 our method accepts single argument $args which is associative array which represents the products sort ordering configs
  3. For inspection purpose once you attached this method with the filter function add print statement print_r($args) next to line 7 and refresh your shop page
  4. In your shop page at the top the argument $args array is printed
  5. Here is the sample for the default sorting option Array ( [orderby] => menu_order title [order] => ASC [meta_key] => )
    1. The first key orderby holds two sorting values
    2. Firstly it sort with menu_order and then product’s title
    3. menu_order which can be adjusted to each products in their backend product edit page
    4. By changing the Menu order value for individual product which is under the container product data you will find set of tabs, in that tabs click the Advanced tab
    5. By changing the number from 0 to any number positive value which push the product to last and negative value will pull the product to the first
    6. If, for more than one product the Menu order is same then it will sort by title
    7. The key order is used to arrange the products either in ascending or descending
    8. The key meta_key is used to sort the product based on some custom key
    9. You can use any key-value pair as described in the official documentation
  6. In line 8 we assign $orderby_value variable by checking the get query string parameter if it’s set then we sanitise it using WP sanitise function wc_clean else assign it from option using WP function get_option which retrieves an option value for the passed option name
  7. The line between 13 and 19 is the core logic to create new sort order for the product archive page
  8. In both conditional statement we compare the get parameter value with the desired order by string and alter the $args parameter (for $args key-value we already discussed in 5th point please refer that if you need to explore more)
  9. Finally in our callback method we return the variable $args

Explanation: Rename & Reorder Method

  1. Here we will explore the snippet of the method custom_woocommerce_catalog_orderby from our plugin class VG_Sort which is used for renaming & reordering
  1. We assume that you attached/hooked this method to the filter function woocommerce_default_catalog_orderby_options and woocommerce_catalog_orderby then only whatever you print and check will work
  2. This method’s main functionality is renaming and reordering the sort dropdown to do that first we need to know the selection option’s name and its display value
  3. So kindly add print statement print_r($sortby) next to the line 2 i.e. after the method definition and refresh the product archive page to check the argument array’s key-value
  4. It will print the array like this Array ( [menu_order] => Default sorting [popularity] => Sort by popularity [rating] => Sort by average rating [date] => Sort by latest [price] => Sort by price: low to high [price-desc] => Sort by price: high to low ) just above the sort order dropdown
  5. As you clearly noted the key, you came to know that now we will override this array’s value also we reorder the key
  6. We override it from the line 3 to 12
    1. If you don’t need any one of the ordering for example if you don’t need default order [menu_order] => Default sorting then remove that key value from the array
    2. We renamed each sort order by overriding the value like from Sort by average rating to Average rating
    3. Our new array constitutes our new sorting key-value too to display option to sort the product alphabetical or reverse alphabetical
  7. Finally we return the variable $sortby

Explanation: Callback’s Filter

  1. We used totally three filters namely woocommerce_get_catalog_ordering_args, woocommerce_default_catalog_orderby_options and woocommerce_catalog_orderby
  1. woocommerce_get_catalog_ordering_args is the filter action deal with sorting operation
    1. woocommerce_get_catalog_ordering_args filter official API documentation
  2. woocommerce_default_catalog_orderby_options and woocommerce_catalog_orderby is the filter action deal with display sorting selection
    1. woocommerce_default_catalog_orderby_options filter official API documentation
    2. woocommerce_catalog_orderby filter official API documentation

Explanation: Custom Template

  1. Our custom template constitutes a minimal change to clone of core template we will see detailed explanation
  1. While exploring the filter action woocommerce_default_catalog_orderby in official documentation which is present inside the function woocommerce_catalog_ordering
  2. As you skim down to the end of the function you will find at the last it calls the function wc_get_template with the first parameter as loop/orderby.php
  3. Based on our analysis we have to override the partial or sub template orderby.php which located inside the directory loop of the WooCommerce plugin templates directory (To understand the overriding concept read the article about template overriding)
  4. We copied the loop/orderby.php into our current theme in the following path woocommerce/loop/orderby.php
  5. Now we can start rewrite the HTML in our newly copied template orderby.php
  6. We enclosed our select tag inside the label tag and prefixed the select with the string value Sort By: (as you see now there is no repetition of sort by string inside the option)

Conclusion

  1. You learned to add new sorting to your existing product archive page
  2. To modify the existing sort option
  3. To modify the template which render the sort order select option
  4. Now you have a clear understanding about sort order dropdown
  5. We covered all the logic and modification related to the sort order dropdown now you are solid to modify in and around of products sort order