WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection.

Code

How To add category dropdown Before WooCommerce product loop?

WooCommerce product loop is generally on shop page and category page. on both pages WooCommerce provide hooks before the loop and after the loop.

  1. “woocommerce_before_shop_loop”
  2. “woocommerce_after_shop_loop”

For adding a category dropdpwn or other texonomy dropdown We will use “woocommerce_before_shop_loop”.

For Both Product loop. (shop page and category page)

function CategorySwitcher() {   
  wc_product_dropdown_categories();
  $category_base=get_option('woocommerce_permalinks')['category_base'];
  wc_enqueue_js( "
   ('#product_cat').change(function () {
    location.href = '".site_url().'/'.$category_base."/' + $(this).val();
   });
  ");
}
add_action('woocommerce_before_shop_loop','CategorySwitcher',100);

For Only Category Archive Page.

function CategorySwitcher() {   
  if ( is_product_category() ) { 
    wc_product_dropdown_categories();
  }
  $category_base=get_option('woocommerce_permalinks')['category_base'];
  wc_enqueue_js( "
   ('#product_cat').change(function () {
    location.href = '".site_url().'/'.$category_base."/' + $(this).val();
   });
  ");
}
add_action('woocommerce_before_shop_loop','CategorySwitcher',100);

null

For Only Shop Page.

function CategorySwitcher() {   
  if ( is_shop() ) { 
    wc_product_dropdown_categories();
  }
  $category_base=get_option('woocommerce_permalinks')['category_base'];
  wc_enqueue_js( "
   ('#product_cat').change(function () {
    location.href = '".site_url().'/'.$category_base."/' + $(this).val();
   });
  ");
}
add_action('woocommerce_before_shop_loop','CategorySwitcher',100);

null

Shiv kumawat

Executive Director & CEO

"Shiv kumawat is the Executive Director and CEO of Eoxys It Solution LLP and the strategic mind behind the company"s growth. His expertise in operational efficiency and team leadership empowers his colleagues to excel and innovate.”

Latest Posts

On-Device AI Mobile Apps 2026 73% Cloud Cost Savings

  On-Device AI Mobile Apps 2026 73% Cloud Cost Savings The $14M GDPR Problem You’re Solving   Fintech firms: Cloud…

Shafeeq Khan
February 18, 2026

Generative AR Shopping Apps 2026 67% Conversion Boost

  AI Agent Mobile Apps 2026 $2.3M ARR in 90 Days (Complete Guide) The 73% Cart Abandonment Problem You’re Solving…

Shafeeq Khan
January 31, 2026

AI Agent Mobile Apps 2026 $2.3M ARR in 90 Days (Complete Guide)

  AI Agent Mobile Apps 2026 $2.3M ARR in 90 Days (Complete Guide) The $2.3M ARR Problem You’re Solving  …

Shafeeq Khan
January 30, 2026
, ,

Leave a Reply

Your email address will not be published. Required fields are marked *