{"id":41629,"date":"2022-12-07T15:00:55","date_gmt":"2022-12-07T14:00:55","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=41629"},"modified":"2022-12-06T15:36:56","modified_gmt":"2022-12-06T14:36:56","slug":"how-to-set-up-search-filters-in-woocommerce","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-set-up-search-filters-in-woocommerce\/","title":{"rendered":"How to Set Up Search Filters in WooCommerce"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]As your <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-start-an-online-store\/\">online store<\/a> starts growing, more likely than not, the number of products you have for sale will start to increase. And when that happens, it might become difficult to have all these products easily accessible to your potential customers. This is the moment when most online shop owners turn to WooCommerce search filters for help.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Say that you run a women\u2019s clothing and accessory store that offers new trendy products each season. Combine that with different items that you might want to present \u2013 trousers, skirts, leggings, bags, glasses, what have you. Then, you\u2019d also have to showcase articles with different materials, colors, price ranges, and the list goes on. See how the number of products and their variations can balloon quite easily and become too unwieldy to browse. And that\u2019s precisely why <strong>search filters are such a great solution if you have too many products in your catalog.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Luckily, if you own a <a href=\"https:\/\/qodeinteractive.com\/magazine\/woocommerce-tutorial\/\">WooCommerce-powered store<\/a>, it\u2019s quite easy to set up search filters for your products. And while there is a default filter WooCommerce functionality available that contains some of the most common filtering options, to get a much wider range of options and more possibilities to display your filters in general, <strong>we recommend that you use a suitable search filter plugin<\/strong>. So this time around, we will show you <strong>how to easily add and customize search filters in WooCommerce using a free plugin<\/strong>, so make sure to read on to learn all the steps needed:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-woocommerce-search-filters\">What Are WooCommerce Search Filters and How Are They Useful<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#setting-up-woocommerce-search-filters-using-plugin\">Setting Up WooCommerce Search Filters Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-search-filter-to-your-site\">Adding the Search Filter to Your Site<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-ecommerce-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-woocommerce-search-filters\"><\/a>What Are WooCommerce Search Filters and How Are They Useful<\/h2>\n<p>[\/vc_column_text][vc_column_text]Generally speaking, <strong>search filters represent a useful search functionality that\u2019s specifically focused on your products<\/strong>. By adding this type of functionality to your store, your visitors will be able to easily navigate through the different kinds of products you put up. That\u2019s because product filters allow them to narrow down their search until they are only able to find and see the products they are specifically interested in. And there are many different ways in which you can use these filters \u2013 you can filter products by price, categories, tags, rating, and even attributes like size, colors, gender, material, etc.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]By helping people easily find products that meet their specific criteria, you greatly improve their user experience and also enhance their entire shopping process. Naturally, this can only lead to more customers actually wanting to buy your products. Moreover, due to the smooth product browsing experience, you can also <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-build-and-maintain-customer-trust\/\">strengthen your customers\u2019 trust<\/a> and get them to return to your store to shop for more products again.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, without further ado, let\u2019s see how you can easily include this product search functionality into your WooCommerce store and greatly improve the user experience of your customers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"setting-up-woocommerce-search-filters-using-plugin\"><\/a>Setting Up WooCommerce Search Filters Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you plan to implement search filters into your WooCommerce store, a great way to do so is to use a plugin called <a href=\"https:\/\/wordpress.org\/plugins\/woo-product-filter\/\" target=\"_blank\" rel=\"noopener\">Product Filter<\/a> (by WooBeWoo). This freemium plugin will let your customers easily filter your products by different criteria, like price, tags, attributes, categories, etc.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]What\u2019s great about this plugin is that all available criteria are fully customizable, allowing you to set filters for your products in any way that best fits your (and your customers\u2019) needs. You also get to display your filters in a variety of different ways \u2013as a radio button list, checkbox list, a dropdown, etc. Plus, as you add your filters, you get to see all changes in an instant thanks to the <strong>live preview functionality.<\/strong> Adding filters to your pages is also quite simple to do \u2013 you can insert them using a shortcode or even add them to your page\u2019s sidebar with the help of a widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing the plugin<\/a> and activating it, you should access <em>Woo Product Filter &gt;&gt; Add New Filter<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Enter the desired name for your filter, then click <em>Save<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"527\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-New-Filter.jpg\" class=\"attachment-full size-full\" alt=\"Add New Filter\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-New-Filter.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-New-Filter-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-New-Filter-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-New-Filter-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you do so, you will instantly get to select all the filters you wish to add to your search filter element.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You just need to select a desired filter from the dropdown and then click on Add.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Some of the available options include Price\/Price Range, Sort by, Sort by product categories\/tags, Attribute, Rating, On Sale, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-Filters.jpg\" class=\"attachment-full size-full\" alt=\"Add Filters\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-Filters.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-Filters-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-Filters-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Add-Filters-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For example, if you add a price filter, you get to change the title of this filter and add a description. Then, you can also adjust a whole other set of useful settings that become available once you open the dropdown using the arrow.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"501\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Price.jpg\" class=\"attachment-full size-full\" alt=\"Price\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Price.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Price-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Price-768x397.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Price-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Some of the options here include the ability to <strong>show input fields for the price, choose the way you want the currency to be shown as well as its position, set min\/max prices<\/strong> (an option available in the pro version of the plugin), and more.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The entire time you\u2019re customizing your filter option, you <strong>get to see a preview on the right side of the screen.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This screen will have new items added to it as you insert more filters. For example, here\u2019s what your filter can look like once you add a rating filter as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"479\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Rating.jpg\" class=\"attachment-full size-full\" alt=\"Rating\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Rating.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Rating-300x148.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Rating-768x380.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Rating-620x306.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For demonstration purposes, we\u2019ve decided to add a few more filters, like \u2018featured\u2019, \u2018stock status\u2019, and \u2018product categories\u2019.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"428\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Filters-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Filters Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Filters-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Filters-Preview-300x133.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Filters-Preview-768x339.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Filters-Preview-620x274.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you customize each filter to your liking, you can <strong>access the \u201coptions\u201d tab where you can further customize the way you want your filters to be displayed<\/strong> on your site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, you can choose whether you want to display your filters on all WooCommerce pages, on your Shop page only, on your product page, etc. Also, you can decide whether you want to display filters on all devices, or on desktop\/mobile only, set the number of products you want to be displayed, <a href=\"https:\/\/qodeinteractive.com\/magazine\/live-ajax-search-in-wordpress\/\">enable Ajax<\/a>, and so on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"642\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Options.jpg\" class=\"attachment-full size-full\" alt=\"Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Options-300x199.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Options-768x509.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Options-620x411.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There is also the <em>Design<\/em> tab, allowing you to set things like desired filter width, add custom CSS\/JS styling, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"615\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Design.jpg\" class=\"attachment-full size-full\" alt=\"Design\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Design.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Design-300x190.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Design-768x487.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Design-620x393.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re satisfied with all your changes, make sure to <strong>hit the <em>Save<\/em> button<\/strong> located at the top right corner of the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"615\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Save.jpg\" class=\"attachment-full size-full\" alt=\"Save\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Save.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Save-300x190.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Save-768x487.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Save-620x393.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-search-filter-to-your-site\"><\/a>Adding the Search Filter to Your Site<\/h2>\n<p>[\/vc_column_text][vc_column_text]Once you are done with setting up your search product filter, all that\u2019s left for you to do is add it to your page. There are a few different ways in which you can do this.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To insert your filter with a shortcode, <strong>simply copy the shortcode located above all your filter options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"609\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Copy-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Copy Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Copy-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Copy-Shortcode-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Copy-Shortcode-768x483.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Copy-Shortcode-620x390.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, access the page you wish to add your filters to and <strong>paste the shortcode in the \u201cshortcode\u201d block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shortcode-Added.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shortcode-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shortcode-Added-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shortcode-Added-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shortcode-Added-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Hit Preview to see what your product filter looks like<\/strong> on your page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"396\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Single-Filter.jpg\" class=\"attachment-full size-full\" alt=\"Shop Single Filter\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Single-Filter.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Single-Filter-300x123.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Single-Filter-768x314.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Single-Filter-620x253.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also easily add your price filters to a widget area using the price filter widget.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, <strong>head to <em>Appearance &gt;&gt; Widgets<\/em> and find and select the <em>Woo Product Filter<\/em> widget<\/strong>. Then add it to the desired widget area.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"684\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Woo Product Filter Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget-300x212.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget-768x542.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget-620x438.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget-Added.jpg\" class=\"attachment-full size-full\" alt=\"Woo Product Filter Widget Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget-Added-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget-Added-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Woo-Product-Filter-Widget-Added-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To learn more on how to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-new-block-based-widget-editor-in-wordpress\/\">add block widgets in WordPress<\/a>, make sure to check out our article that covers the same subject.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, here\u2019s what our product filter widget looks like on our Shop page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"457\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Page-Filter-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Shop Page Filter Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Page-Filter-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Page-Filter-Preview-300x141.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Page-Filter-Preview-768x362.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/12\/Shop-Page-Filter-Preview-620x292.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]WooCommerce search filters can be a great addition to any eCommerce site as they can only help make your store appear more professional, organized, and user-friendly as a whole. As a result, you can only earn a favorable reputation among your customers and increase the number of sales in the long run.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]One of the easiest ways to set up search filters on your WooCommerce site is to do so with a suitable plugin. We recommend using the plugin called Product Filter as it not only comes with great options that are available for free, but it\u2019s also highly flexible when it comes to customizing and styling your filters in any way you like. After following our instructions on how to install and create your filter, make sure to check out all other available options until you find the filter combination that works best for your store.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to add and customize WooCommerce search filters on your store and improve the user experience of your customers while they&#8217;re browsing your products.<\/p>\n","protected":false},"author":2,"featured_media":41656,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[332,36,99],"class_list":["post-41629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-filters","tag-ux","tag-woocommerce"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/41629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=41629"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/41629\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/41656"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=41629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=41629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=41629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}