{"id":380798,"date":"2023-05-26T12:04:17","date_gmt":"2023-05-26T12:04:17","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=380798"},"modified":"2026-01-23T12:06:45","modified_gmt":"2026-01-23T12:06:45","slug":"how-to-woocommerce-custom-product-filter-on-shop-page","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/","title":{"rendered":"How to Add a Custom Product Filter on the WooCommerce Shop Page?"},"content":{"rendered":"\n<p>WooCommerce is a highly flexible eCommerce platform that allows store owners to customize almost every aspect of their online store. One of the most important features for improving user experience is <strong>product filtering<\/strong>.<\/p>\n\n\n\n<p>While WooCommerce provides basic filtering options by default, these may not always be sufficient for advanced store requirements. In such cases, creating a <strong>custom product filter<\/strong> becomes the best solution.<\/p>\n\n\n\n<p>In this guide, we\u2019ll show you <strong>how to add a custom product filter on the WooCommerce shop page<\/strong> using a lightweight custom plugin. As an example, we\u2019ll create a <strong>Color-based product filter<\/strong> using WooCommerce product attributes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Add a Custom Product Filter?<\/h2>\n\n\n\n<p>Custom product filters help you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Improve product discoverability<\/li>\n\n\n\n<li>Enhance user experience<\/li>\n\n\n\n<li>Reduce bounce rate<\/li>\n\n\n\n<li>Increase conversion rates<\/li>\n\n\n\n<li>Tailor filters according to your business needs<\/li>\n<\/ul>\n\n\n\n<p>By adding attribute-based filters (such as color, size, brand, etc.), customers can quickly find the products they\u2019re looking for.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Create a Custom Plugin<\/h2>\n\n\n\n<p>The first step is to create a custom <a href=\"https:\/\/store.webkul.com\/woocommerce-plugins.html\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce plugin<\/a> to house the custom product filter code. You can create a new folder in the \u201cwp-content\/plugins\/\u201d directory and give it a unique name. Inside this folder, create a new PHP file and give it the same name as the folder. This file will serve as the main plugin file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Add the Code for the Custom Product Filter<\/h2>\n\n\n\n<p>The next step is to add the code for the custom <a href=\"https:\/\/webkul.com\/blog\/layered-navigation-woocommerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">product filter in WooCommerce<\/a>. In this example, we will create a filter that allows users to filter products by color. Add the following code to the main plugin file:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\n\/**\n * Plugin Name: Custom Product Filter\n * Description: Adds a custom product attribute filter to the WooCommerce shop page\n * Version: 1.0.0\n * Author: Webkul\n *\/\n\ndefined( &#039;ABSPATH&#039; ) || exit;\n\n\/**\n * Display custom product filter dropdown on shop page\n *\/\nadd_action( &#039;woocommerce_before_shop_loop&#039;, &#039;wk_custom_product_filter&#039; );\n\nfunction wk_custom_product_filter() {\n\n\tif ( ! is_shop() ) {\n\t\treturn;\n\t}\n\n\t$taxonomy = &#039;pa_color&#039;;\n\n\tif ( ! taxonomy_exists( $taxonomy ) ) {\n\t\treturn;\n\t}\n\n\t$terms = get_terms(\n\t\tarray(\n\t\t\t&#039;taxonomy&#039;   =&gt; $taxonomy,\n\t\t\t&#039;hide_empty&#039; =&gt; true,\n\t\t)\n\t);\n\n\tif ( empty( $terms ) || is_wp_error( $terms ) ) {\n\t\treturn;\n\t}\n\n\t$current_color = isset( $_GET&#091;&#039;product_color&#039;] )\n\t\t? sanitize_text_field( wp_unslash( $_GET&#091;&#039;product_color&#039;] ) )\n\t\t: &#039;&#039;;\n\t?&gt;\n\n\t&lt;form method=&quot;get&quot; class=&quot;wk-custom-filter-form&quot;&gt;\n\t\t&lt;select name=&quot;product_color&quot;&gt;\n\t\t\t&lt;option value=&quot;&quot;&gt;&lt;?php esc_html_e( &#039;Filter by Color&#039;, &#039;textdomain&#039; ); ?&gt;&lt;\/option&gt;\n\n\t\t\t&lt;?php foreach ( $terms as $term ) : ?&gt;\n\t\t\t\t&lt;option value=&quot;&lt;?php echo esc_attr( $term-&gt;slug ); ?&gt;&quot; &lt;?php selected( $current_color, $term-&gt;slug ); ?&gt;&gt;\n\t\t\t\t\t&lt;?php echo esc_html( $term-&gt;name ); ?&gt;\n\t\t\t\t&lt;\/option&gt;\n\t\t\t&lt;?php endforeach; ?&gt;\n\t\t&lt;\/select&gt;\n\n\t\t&lt;?php\n\t\t\/\/ Preserve existing query params (orderby, pagination, etc.)\n\t\tforeach ( $_GET as $key =&gt; $value ) {\n\t\t\tif ( &#039;product_color&#039; === $key ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif ( is_array( $value ) ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\techo &#039;&lt;input type=&quot;hidden&quot; name=&quot;&#039; . esc_attr( $key ) . &#039;&quot; value=&quot;&#039; . esc_attr( sanitize_text_field( wp_unslash( $value ) ) ) . &#039;&quot;&gt;&#039;;\n\t\t}\n\t\t?&gt;\n\n\t\t&lt;button type=&quot;submit&quot;&gt;\n\t\t\t&lt;?php esc_html_e( &#039;Apply Filter&#039;, &#039;textdomain&#039; ); ?&gt;\n\t\t&lt;\/button&gt;\n\t&lt;\/form&gt;\n\n\t&lt;?php\n}\n\n\/**\n * Modify WooCommerce product query based on selected filter\n *\/\nadd_action( &#039;pre_get_posts&#039;, &#039;wk_custom_product_filter_query&#039; );\n\nfunction wk_custom_product_filter_query( $query ) {\n\n\tif ( is_admin() || ! $query-&gt;is_main_query() || ! is_shop() ) {\n\t\treturn;\n\t}\n\n\tif ( empty( $_GET&#091;&#039;product_color&#039;] ) ) {\n\t\treturn;\n\t}\n\n\t$color = sanitize_text_field( wp_unslash( $_GET&#091;&#039;product_color&#039;] ) );\n\n\t$tax_query = (array) $query-&gt;get( &#039;tax_query&#039; );\n\n\t$tax_query&#091;] = array(\n\t\t&#039;taxonomy&#039; =&gt; &#039;pa_color&#039;,\n\t\t&#039;field&#039;    =&gt; &#039;slug&#039;,\n\t\t&#039;terms&#039;    =&gt; $color,\n\t);\n\n\t$query-&gt;set( &#039;tax_query&#039;, $tax_query );\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Save and Activate the Plugin<\/h2>\n\n\n\n<p>Once you have added the code to the main plugin file, save the file and activate the plugin in the WordPress admin panel. To activate the plugin, go to the \u201cPlugins\u201d menu and find the plugin you just created. Click \u201cActivate\u201d to activate the plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Test the Custom Product Filter<\/h2>\n\n\n\n<p>After activating the plugin, go to the shop page and test the custom product filter. You should see a new dropdown menu that allows users to filter products by color. When a user selects a color, the page will reload and display only products that match the selected color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" width=\"1114\" height=\"669\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png\" alt=\"woocommerce product filter shop page\" class=\"wp-image-381683\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png 1114w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter-300x180.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter-250x150.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter-768x461.png 768w\" sizes=\"(max-width: 1114px) 100vw, 1114px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Adding a custom product filter to the WooCommerce shop page is a simple yet powerful way to improve your store\u2019s usability and performance. By using a custom plugin approach, you ensure clean code, better maintainability, and future scalability.<\/p>\n\n\n\n<p>With the example shared above, you can quickly build attribute-based filters tailored to your store\u2019s requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"support\">Need Help or Have Suggestions?<\/h2>\n\n\n\n<p>Still facing issues or want to enhance this functionality further?<br>Feel free to raise a support ticket or share your feedback with us:<\/p>\n\n\n\n<p>\ud83d\udc49 <strong>Support Portal:<\/strong> <a href=\"https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/\">https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><br>\ud83d\udce7 <strong>Email:<\/strong> support@webkul.com<\/p>\n\n\n\n<p>Thanks for reading \u2014 and happy coding! \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WooCommerce is a highly flexible eCommerce platform that allows store owners to customize almost every aspect of their online store. One of the most important features for improving user experience is product filtering. While WooCommerce provides basic filtering options by default, these may not always be sufficient for advanced store requirements. In such cases, creating <a href=\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":509,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1773],"tags":[5604,878,14197,14196],"class_list":["post-380798","post","type-post","status-publish","format-standard","hentry","category-woocommerce","tag-custom-filter","tag-product-filter","tag-woocommerce-custome-product-filter","tag-woocommerce-product-filter"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add WooCommerce Custom Product Filter on Shop Page<\/title>\n<meta name=\"description\" content=\"How to add a WooCommerce custom product filter on the shop page: You can simply add a custom filter on the shop page through this blog.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add WooCommerce Custom Product Filter on Shop Page\" \/>\n<meta property=\"og:description\" content=\"How to add a WooCommerce custom product filter on the shop page: You can simply add a custom filter on the shop page through this blog.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T12:04:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-23T12:06:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png\" \/>\n<meta name=\"author\" content=\"Er. Shakir Husain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Er. Shakir Husain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\"},\"author\":{\"name\":\"Er. Shakir Husain\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/cff292dde21ecd12ec1566e175dd2de6\"},\"headline\":\"How to Add a Custom Product Filter on the WooCommerce Shop Page?\",\"datePublished\":\"2023-05-26T12:04:17+00:00\",\"dateModified\":\"2026-01-23T12:06:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\"},\"wordCount\":487,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png\",\"keywords\":[\"Custom Filter\",\"product filter\",\"woocommerce custome product filter\",\"woocommerce product filter\"],\"articleSection\":[\"WooCommerce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\",\"name\":\"How to Add WooCommerce Custom Product Filter on Shop Page\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png\",\"datePublished\":\"2023-05-26T12:04:17+00:00\",\"dateModified\":\"2026-01-23T12:06:45+00:00\",\"description\":\"How to add a WooCommerce custom product filter on the shop page: You can simply add a custom filter on the shop page through this blog.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png\",\"width\":1114,\"height\":669,\"caption\":\"shop-product-filter\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add a Custom Product Filter on the WooCommerce Shop Page?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/cff292dde21ecd12ec1566e175dd2de6\",\"name\":\"Er. Shakir Husain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23a8112353e77f8889dd56a0bd6435c229cde4d472a4b064c9209f78b81f22e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23a8112353e77f8889dd56a0bd6435c229cde4d472a4b064c9209f78b81f22e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Er. Shakir Husain\"},\"description\":\"Shakir Hussain, a WordPress wizard, specializes in MySQL, Marketplace REST APIs, WooCommerce Migration, and Development. His skills in e-commerce solutions and connectors with eBay and Shopify drive tailored seamless business growth.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/shakir-hussain421\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add WooCommerce Custom Product Filter on Shop Page","description":"How to add a WooCommerce custom product filter on the shop page: You can simply add a custom filter on the shop page through this blog.","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:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/","og_locale":"en_US","og_type":"article","og_title":"How to Add WooCommerce Custom Product Filter on Shop Page","og_description":"How to add a WooCommerce custom product filter on the shop page: You can simply add a custom filter on the shop page through this blog.","og_url":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-05-26T12:04:17+00:00","article_modified_time":"2026-01-23T12:06:45+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png","type":"","width":"","height":""}],"author":"Er. Shakir Husain","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Er. Shakir Husain","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/"},"author":{"name":"Er. Shakir Husain","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/cff292dde21ecd12ec1566e175dd2de6"},"headline":"How to Add a Custom Product Filter on the WooCommerce Shop Page?","datePublished":"2023-05-26T12:04:17+00:00","dateModified":"2026-01-23T12:06:45+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/"},"wordCount":487,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png","keywords":["Custom Filter","product filter","woocommerce custome product filter","woocommerce product filter"],"articleSection":["WooCommerce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/","url":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/","name":"How to Add WooCommerce Custom Product Filter on Shop Page","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png","datePublished":"2023-05-26T12:04:17+00:00","dateModified":"2026-01-23T12:06:45+00:00","description":"How to add a WooCommerce custom product filter on the shop page: You can simply add a custom filter on the shop page through this blog.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/shop-product-filter.png","width":1114,"height":669,"caption":"shop-product-filter"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add a Custom Product Filter on the WooCommerce Shop Page?"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/cff292dde21ecd12ec1566e175dd2de6","name":"Er. Shakir Husain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23a8112353e77f8889dd56a0bd6435c229cde4d472a4b064c9209f78b81f22e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23a8112353e77f8889dd56a0bd6435c229cde4d472a4b064c9209f78b81f22e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Er. Shakir Husain"},"description":"Shakir Hussain, a WordPress wizard, specializes in MySQL, Marketplace REST APIs, WooCommerce Migration, and Development. His skills in e-commerce solutions and connectors with eBay and Shopify drive tailored seamless business growth.","url":"https:\/\/webkul.com\/blog\/author\/shakir-hussain421\/"}]}},"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/380798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/509"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=380798"}],"version-history":[{"count":34,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/380798\/revisions"}],"predecessor-version":[{"id":523486,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/380798\/revisions\/523486"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=380798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=380798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=380798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}