You Are Here
PHPStackoverflow

A Tutorial to Display WooCommerce Product Category Dropdown Widget

PHP, Woocommerce, Wordpress

In recent times, every website has a category select box on its category pages. This is how your user can switch between the categories effortlessly. So, how to enable this quick switch on your website? Well, in this tutorial, you will learn about WooCommerce product category dropdown widget. So, you can quickly move from one category to another on your webpages. 

Further, you will learn how wc_product_dropdown_categories() function works. Basically, it is used to display category dropdown. Also, you will learn about the wc_enqueue_js() function. This function injects jQuery to enable category page redirect feature. 

Here is a live demo of my website:

Image shows categories switches to learn about WooCommerce product category dropdown widget

I hope that you have got a better picture by now. 

PHP Snippet: Display WooCommerce product category dropdown widget and Redirect Feature

You should enter the right permalinks while enabling category switchers. Otherwise, the website will show 404 errors to your users on clicking.

So, I will be using the default product category permalinks in the example script. More specifically, the permalink will be as follows, “/product-category/”. 

/**
 * @snippet Product Category Switcher @ Product Category Pages
 * @author PHP - Stackoverflow
 * @compatible WooCommerce 4.0
 */

add_action( 'woocommerce_before_shop_loop', 'phpsof_filter_by_tag', 31
);

function phpsof_filter_by_tag() {
        if ( is_product_category() ) {
                wc_product_dropdown_categories();
        }
        wc_enqueue_js( "
                $('#product_cat').change(function () {
                        location.href="https://www.phpsof.com/product-
category/" + $(this).val();
                });
        " );
}

Where can you add this snippet?

You need to add this snippet in the right place. This is how you will learn about WooCommerce product category dropdown widget.

You need to add this snippet at your child theme’s bottom functions.php file (delete “?>” if you have it there). CSS will go in your child theme style.css file. 

Is this snippet still in functionality?

PHP language constantly undergoes technological upgrades and features. So, you can verify whether this code works in case of you or not. If it does not work as expected, you can let me know in the comments with screenshots. This is how it would be easier to address your queries.

I have checked this code with the Storefront theme. The WooCommerce version is as listed above. Also, I have used a WordPress friendly hosting on PHP 7+.

If this article has helped you in coding operations, then let me know in the comments. 

Also Read, A Detailed Tutorial to WooCommerce Set Product Price Programmatically

A Guide to Add WooCommerce Order Status Dropdown Filter

Related Posts