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

Conversational AI in ECommerce: The Next Era of Online Shopping in 2025

  Conversational AI in ECommerce: The Next Era of Online Shopping in 2025 Welcome to the AIFirst Online Storefront By…

Shafeeq Khan
November 28, 2025

AI-Driven Learning Management Systems: Unlocking the Future of Digital Training in 2025

  AI-Driven Learning Management Systems:Unlocking the Future of Digital Training in 2025 Digital Learning Transformed by Artificial Intelligence The world…

Shafeeq Khan
November 5, 2025

Smarter Learning for a Smarter Era: How AI Is Transforming Learning Management Systems (LMS) in 2025

  Smarter Learning for a Smarter Era: How AI IsTransforming Learning Management Systems(LMS) in 2025 From Static Systems to Intelligent…

Shafeeq Khan
October 3, 2025
, ,

Leave a Reply

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