{"id":7056,"date":"2020-05-03T04:02:08","date_gmt":"2020-05-03T04:02:08","guid":{"rendered":"https:\/\/expertwebtechnologies.com\/?p=7056"},"modified":"2025-01-07T12:26:36","modified_gmt":"2025-01-07T12:26:36","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?<\/h1>\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)<\/h4>\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.<\/h4>\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.<\/h4>\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","protected":false},"excerpt":{"rendered":"
    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. “woocommerce_before_shop_loop” “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 […]<\/p>\n","protected":false},"author":1,"featured_media":8674,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,35,36],"tags":[],"class_list":["post-7056","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","category-woocommerce-hooks","category-wordpress"],"yoast_head":"\nWooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection. - EoXys IT<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection. - EoXys IT\" \/>\n<meta property=\"og:description\" content=\"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. “woocommerce_before_shop_loop” “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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/\" \/>\n<meta property=\"og:site_name\" content=\"EoXys IT\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-03T04:02:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-07T12:26:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"430\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shiv kumawat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shiv kumawat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/\"},\"author\":{\"name\":\"Shiv kumawat\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/40d1761e86a682708eeab9fd34dfd005\"},\"headline\":\"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection.\",\"datePublished\":\"2020-05-03T04:02:08+00:00\",\"dateModified\":\"2025-01-07T12:26:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/\"},\"wordCount\":88,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\",\"articleSection\":[\"Woocommerce\",\"Woocommerce Hooks\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/\",\"url\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/\",\"name\":\"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection. - EoXys IT\",\"isPartOf\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\",\"datePublished\":\"2020-05-03T04:02:08+00:00\",\"dateModified\":\"2025-01-07T12:26:36+00:00\",\"author\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/40d1761e86a682708eeab9fd34dfd005\"},\"breadcrumb\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#primaryimage\",\"url\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\",\"contentUrl\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\",\"width\":768,\"height\":430,\"caption\":\"Code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eoxysit.com\/blogs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/#website\",\"url\":\"https:\/\/eoxysit.com\/blogs\/\",\"name\":\"EoXys IT\",\"description\":\"Digitise your business\",\"alternateName\":\"Eoxys It\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eoxysit.com\/blogs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/40d1761e86a682708eeab9fd34dfd005\",\"name\":\"Shiv kumawat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2025\/03\/CEO-150x150.png\",\"contentUrl\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2025\/03\/CEO-150x150.png\",\"caption\":\"Shiv kumawat\"},\"description\":\"\\\"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.\u201d\",\"sameAs\":[\"https:\/\/eoxysit.com\/\"],\"url\":\"https:\/\/eoxysit.com\/blogs\/author\/shivkumawat1985\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection. - EoXys IT","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/","og_locale":"en_US","og_type":"article","og_title":"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection. - EoXys IT","og_description":"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. “woocommerce_before_shop_loop” “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 […]","og_url":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/","og_site_name":"EoXys IT","article_published_time":"2020-05-03T04:02:08+00:00","article_modified_time":"2025-01-07T12:26:36+00:00","og_image":[{"width":768,"height":430,"url":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","type":"image\/png"}],"author":"Shiv kumawat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Shiv kumawat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#article","isPartOf":{"@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/"},"author":{"name":"Shiv kumawat","@id":"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/40d1761e86a682708eeab9fd34dfd005"},"headline":"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection.","datePublished":"2020-05-03T04:02:08+00:00","dateModified":"2025-01-07T12:26:36+00:00","mainEntityOfPage":{"@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/"},"wordCount":88,"commentCount":0,"image":{"@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#primaryimage"},"thumbnailUrl":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","articleSection":["Woocommerce","Woocommerce Hooks","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/","url":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/","name":"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection. - EoXys IT","isPartOf":{"@id":"https:\/\/eoxysit.com\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#primaryimage"},"image":{"@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#primaryimage"},"thumbnailUrl":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","datePublished":"2020-05-03T04:02:08+00:00","dateModified":"2025-01-07T12:26:36+00:00","author":{"@id":"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/40d1761e86a682708eeab9fd34dfd005"},"breadcrumb":{"@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#primaryimage","url":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","contentUrl":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","width":768,"height":430,"caption":"Code"},{"@type":"BreadcrumbList","@id":"https:\/\/eoxysit.com\/blogs\/show-a-product-category-dropdown-and-redirect-to-single-category-upon-selection\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eoxysit.com\/blogs\/"},{"@type":"ListItem","position":2,"name":"WooCommerce : Display a Product Category Dropdown and Redirect To Single Category Upon Selection."}]},{"@type":"WebSite","@id":"https:\/\/eoxysit.com\/blogs\/#website","url":"https:\/\/eoxysit.com\/blogs\/","name":"EoXys IT","description":"Digitise your business","alternateName":"Eoxys It","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eoxysit.com\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/40d1761e86a682708eeab9fd34dfd005","name":"Shiv kumawat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/image\/","url":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2025\/03\/CEO-150x150.png","contentUrl":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2025\/03\/CEO-150x150.png","caption":"Shiv kumawat"},"description":"\"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.\u201d","sameAs":["https:\/\/eoxysit.com\/"],"url":"https:\/\/eoxysit.com\/blogs\/author\/shivkumawat1985\/"}]}},"_links":{"self":[{"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/posts\/7056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/comments?post=7056"}],"version-history":[{"count":0,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/posts\/7056\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/media\/8674"}],"wp:attachment":[{"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/media?parent=7056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/categories?post=7056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/tags?post=7056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}