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

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

 

Related Blogs

Request A Quote

Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.