Custom WooCommerce Product Sorting Dropdown

WooCommerce provides a default sorting mechanism for products in the shop archive. However, sometimes you may need to customize the sorting options to enhance the user experience. In this tutorial, we will create a custom product sorting dropdown and integrate it into WooCommerce using PHP and JavaScript.

Steps to Implement Custom Product Sorting

1. Add a Custom Sorting Dropdown

The following function adds a sorting dropdown above the product list. The dropdown includes options such as sorting by popularity, price, and date.

function custom_woocommerce_product_sorting() {
    ?>
    <select name="SortBy" id="SortBy">
        <option value="menu_order">Sort</option>
        <option value="popularity">Best selling</option>
        <option value="title-asc">Alphabetically, A-Z</option>
        <option value="title-desc">Alphabetically, Z-A</option>
        <option value="price-asc">Price, low to high</option>
        <option value="price-desc">Price, high to low</option>
        <option value="date-asc">Date, old to new</option>
        <option value="date-desc">Date, new to old</option>
    </select>

    <script>
        document.getElementById("SortBy").addEventListener("change", function() {
            let params = new URLSearchParams(window.location.search);
            params.set("orderby", this.value);
            window.location.search = params.toString();
        });
    </script>
    <?php
}
add_action('woocommerce_before_shop_loop', 'custom_woocommerce_product_sorting', 20);

2. Explanation of the Code

• The function custom_woocommerce_product_sorting() generates an HTML <select> element with sorting options.
• A JavaScript event listener detects when the user selects an option and updates the page’s query parameters accordingly.
• The WooCommerce hook woocommerce_before_shop_loop ensures that the dropdown appears above the product list.

3. Add a Shortcode for Sorting Dropdown

If you want to display the sorting dropdown anywhere else on your site, you can create a shortcode using the following code:

function custom_product_sorting_shortcode() {
    ob_start();
    custom_woocommerce_product_sorting();
    return ob_get_clean();
}
add_shortcode('product_sorting', 'custom_product_sorting_shortcode');

4. Usage of the Shortcode

To display the sorting dropdown in a custom location, simply add the following shortcode to any page or template:

[product_sorting]

Conclusion

With this simple customization, you can provide your customers with an easy-to-use product sorting feature, improving their shopping experience. This method ensures seamless integration without modifying WooCommerce core files.