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

WooCommerce provide 'woocommerce_before_shop_loop' hook for WooCommerce page like shop,category etc pages.
For example for all pages :

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 Category page only :

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 Shop page only :

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
Enjoy

Leave a Comment

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

Scroll to Top