{"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-07-07T06:23:19","modified_gmt":"2026-07-07T06:23:19","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 to the WooCommerce Shop Page Using a Custom Plugin"},"content":{"rendered":"\n<p>WooCommerce is one of the most flexible eCommerce platforms, allowing store owners to customize nearly every aspect of their online store. Among the many customization options available, product filtering plays a crucial role in helping customers quickly find the products they want, resulting in a smoother shopping experience and improved conversions.<\/p>\n\n\n\n<p>Although WooCommerce provides built-in filtering widgets, they may not always meet the specific requirements of every store. For example, you might want to display a custom filter only on the shop page, customize its appearance, or filter products based on a specific product attribute. In these situations, creating a custom product filter offers greater flexibility and control over your store&#8217;s functionality.<\/p>\n\n\n\n<p>In this tutorial, you&#8217;ll learn how to create a custom product filter for the WooCommerce shop page using a lightweight custom plugin. As an example, we&#8217;ll build a filter that allows customers to browse products by the <strong>Color<\/strong> attribute. The same approach can also be extended to other product attributes such as <strong>Size<\/strong>, <strong>Brand<\/strong>, or <strong>Material<\/strong>, making it easy to tailor the filtering experience to your store&#8217;s requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Add a Custom Product Filter?<\/h2>\n\n\n\n<p>A custom product filter helps customers quickly narrow down products based on specific attributes, making it easier to find exactly what they need. This not only improves the overall shopping experience but also helps store owners present their products more effectively.<\/p>\n\n\n\n<p>Some of the key benefits of adding a custom product filter include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Improve product discoverability<\/strong> by helping customers quickly locate relevant products.<\/li>\n\n\n\n<li><strong>Enhance the shopping experience<\/strong> with an intuitive and user-friendly filtering system.<\/li>\n\n\n\n<li><strong>Reduce bounce rates<\/strong> by allowing visitors to find products faster instead of leaving the store.<\/li>\n\n\n\n<li><strong>Increase conversion rates<\/strong> by simplifying the product selection process and reducing purchase friction.<\/li>\n\n\n\n<li><strong>Customize filters based on your business needs<\/strong>, such as filtering by Color, Size, Brand, Material, or any other WooCommerce product attribute.<\/li>\n<\/ul>\n\n\n\n<p>By implementing attribute-based filters, customers can browse your product catalog more efficiently, leading to a faster, more convenient, and personalized shopping experience.<\/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 WooCommerce plugin that will contain all the code required for the product filter. Using a custom plugin instead of adding code to your theme&#8217;s <code>functions.php<\/code> file is considered a best practice because the functionality remains intact even if you switch themes, making it easier to maintain and reuse.<\/p>\n\n\n\n<p>Navigate to the <code>wp-content\/plugins\/<\/code> directory of your WordPress installation and create a new folder with a unique name, for example, <code>custom-product-filter<\/code>. Inside this folder, create a PHP file with the same name as the folder:<\/p>\n\n\n\n<p><\/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 an effective way to improve product discovery and enhance the shopping experience. By implementing the filter through a custom plugin, you keep your code organized, maintainable, and easy to extend.<\/p>\n\n\n\n<p>Using the approach demonstrated in this tutorial, you can easily create attribute-based filters for <strong>Color<\/strong>, <strong>Size<\/strong>, <strong>Brand<\/strong>, or any other WooCommerce product attribute to meet your store&#8217;s specific requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"support\">Need Help or Have Suggestions?<\/h2>\n\n\n\n<p>Having trouble or looking to enhance this functionality? Our team is here to help!<\/p>\n\n\n\n<p>You can reach us anytime:<\/p>\n\n\n\n<p>\ud83d\udc49 Support Portal: <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/?utm_source=chatgpt.com\">Create a Support Ticket<\/a><br>\ud83d\udce7 Email: <a>support@webkul.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WooCommerce is one of the most flexible eCommerce platforms, allowing store owners to customize nearly every aspect of their online store. Among the many customization options available, product filtering plays a crucial role in helping customers quickly find the products they want, resulting in a smoother shopping experience and improved conversions. Although WooCommerce provides built-in <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-07-07T06:23:19+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=\"4 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 to the WooCommerce Shop Page Using a Custom Plugin\",\"datePublished\":\"2023-05-26T12:04:17+00:00\",\"dateModified\":\"2026-07-07T06:23:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/\"},\"wordCount\":700,\"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-07-07T06:23:19+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 to the WooCommerce Shop Page Using a Custom Plugin\"}]},{\"@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-07-07T06:23:19+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":"4 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 to the WooCommerce Shop Page Using a Custom Plugin","datePublished":"2023-05-26T12:04:17+00:00","dateModified":"2026-07-07T06:23:19+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-woocommerce-custom-product-filter-on-shop-page\/"},"wordCount":700,"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-07-07T06:23:19+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 to the WooCommerce Shop Page Using a Custom Plugin"}]},{"@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":42,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/380798\/revisions"}],"predecessor-version":[{"id":547837,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/380798\/revisions\/547837"}],"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}]}}