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

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

Top 12 AI App Development Trends 2026 Build $10M ARR Apps Agencies Are Charging $500K To Create

  Top 12 AI App Development Trends 2026 Build $10M ARR Apps Agencies Are Charging $500K To Create Trend #1…

Shafeeq Khan
January 26, 2026
, ,

Leave a Reply

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