{"id":7056,"date":"2020-05-03T04:02:08","date_gmt":"2020-05-03T04:02:08","guid":{"rendered":"https:\/\/expertwebtechnologies.com\/?p=7056"},"modified":"2026-10-06T13:18:07","modified_gmt":"2026-10-06T13:18:07","slug":"show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection","status":"publish","type":"post","link":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/","title":{"rendered":"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection."},"content":{"rendered":"
\n

How To add category dropdown Before WooCommerce product loop?<\/h2>\n

WooCommerce product loop is generally on shop page and category page. on both pages WooCommerce provide hooks before the loop and after the loop.<\/p>\n

    \n
  1. “woocommerce_before_shop_loop”<\/b><\/li>\n
  2. “woocommerce_after_shop_loop”<\/b><\/li>\n<\/ol>\n

    For adding a category dropdpwn or other texonomy dropdown We will use “woocommerce_before_shop_loop”<\/b>.<\/p>\n

    For Both Product loop. (shop page and category page)<\/h3>\n
    function<\/span> CategorySwitcher<\/span>() {   \n\u00a0\u00a0wc_product_dropdown_categories<\/span>();\n\u00a0\u00a0$category_base=get_option<\/span>('woocommerce_permalinks'<\/span>)['category_base'<\/span>];\n\u00a0\u00a0wc_enqueue_js<\/span>( \"\n\u00a0\u00a0\u00a0('#product_cat'<\/span>).change<\/span>(function () {\n\u00a0\u00a0\u00a0\u00a0location.href = '\".site_url<\/span>().'\/'.$category_base.\"\/' + $(this).val<\/span>();\n\u00a0\u00a0\u00a0});\n\u00a0\u00a0\");\n}\nadd_action<\/span>('woocommerce_before_shop_loop'<\/span>,'CategorySwitcher'<\/span>,100<\/span>);\n<\/code><\/pre>\n
    For Only Category Archive Page.<\/h3>\n
    function<\/span> CategorySwitcher<\/span>() {   \n\u00a0\u00a0if ( is_product_category<\/span>() ) { \n\u00a0\u00a0\u00a0\u00a0wc_product_dropdown_categories<\/span>();\n\u00a0\u00a0}\n\u00a0\u00a0$category_base=get_option<\/span>('woocommerce_permalinks'<\/span>)['category_base'<\/span>];\n\u00a0\u00a0wc_enqueue_js<\/span>( \"\n\u00a0\u00a0\u00a0('#product_cat'<\/span>).change<\/span>(function () {\n\u00a0\u00a0\u00a0\u00a0location.href = '\".site_url<\/span>().'\/'.$category_base.\"\/' + $(this).val<\/span>();\n\u00a0\u00a0\u00a0});\n\u00a0\u00a0\");\n}\nadd_action<\/span>('woocommerce_before_shop_loop'<\/span>,'CategorySwitcher'<\/span>,100<\/span>);\n<\/code><\/pre>\n
    \"null\"<\/p>\n
    For Only Shop Page.<\/h3>\n
    function<\/span> CategorySwitcher<\/span>() {   \n\u00a0\u00a0if ( is_shop<\/span>() ) { \n\u00a0\u00a0\u00a0\u00a0wc_product_dropdown_categories<\/span>();\n\u00a0\u00a0}\n\u00a0\u00a0$category_base=get_option<\/span>('woocommerce_permalinks'<\/span>)['category_base'<\/span>];\n\u00a0\u00a0wc_enqueue_js<\/span>( \"\n\u00a0\u00a0\u00a0('#product_cat'<\/span>).change<\/span>(function () {\n\u00a0\u00a0\u00a0\u00a0location.href = '\".site_url<\/span>().'\/'.$category_base.\"\/' + $(this).val<\/span>();\n\u00a0\u00a0\u00a0});\n\u00a0\u00a0\");\n}\nadd_action<\/span>('woocommerce_before_shop_loop'<\/span>,'CategorySwitcher'<\/span>,100<\/span>);\n<\/code><\/pre>\n
    \"null\"<\/p>\n<\/div>\n
    Related reading:<\/strong><\/p>\n