Display Category Dropdown with Auto-Redirect on WooCommerce Shop Page

Add category dropdown navigation to WooCommerce shop using woocommerce_before_shop_loop action hook displaying above product loop. Generate dropdown with wc_product_dropdown_categories function creating select element with all product categories, retrieve category base slug from WooCommerce permalink settings with get_option, implement JavaScript with wc_enqueue_js listening to dropdown change events, redirect to selected category using location.href with dynamic category URL construction, conditionally display only on shop page with is_shop or category archives with is_product_category, build category URLs combining site_url, category base, and selected value, and provide intuitive category navigation improving product discovery.

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

Woocommerce Woocommerce Hooks Wordpress

Display a Product Category Dropdown and Redirect To Single Category Upon Selection. Tutorial/Guide

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);

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);

 

๐Ÿ’ก Have a Coding Problem?

Search our archives or reach out to our team for solutions and expert advice.