1.Overview

MWB Product Filter for WooCommerce allows the merchants to create filters based on product attributes on their product site. The latest update of this free WooCommerce filter plugin brings to you the facility to create filters using the meta fields. Using the products filter plugin, the merchant can create custom product filters. The customers can use these filters to sort and find relevant products quickly. The addition of the WooCommerce Product Filter enhances the user experience manifold. It will facilitate you to add price sliders, color filters in convenient shapes. You can also add custom CSS for filter classes

Features:

  • The merchant can create custom filters based on their industry type.
  • Create WooCommerce filters using meta fields.
  • Use the shortcode provided to place the filter appropriately.
  • You can place the reset button as per your choice.
  • If you have a lot of products, you can also upload a custom loader
  • Add the filters in different layouts such as sliders, lists, labels, dropdown, checkbox, etc
  • Add custom CSS for different filter classes.
  • Activate the product filter with a toggle button.

2.Installation

1. Automatic Installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser.

The steps are as follows:

  1. Log into your WordPress dashboard. Navigate to the Plugins menu and click Add New.
  2. Click on the Upload Plugin button.
  3. Click on the Browse button and navigate to the downloaded MWB Product Filter for the WooCommerce Zip file and click OK.
  4. Most importantly, you can install it by simply clicking Install Now.

2. Manual Installation

The manual installation of the plugin is another option to install the plugin to your WordPress environment. The manual installation method involves downloading Product Filter for WooCommerce and uploading it to your web server via your favorite FTP application.

The steps are as follows:

  1. Upload the MWB Product Filter for WooCommerce folder to the /wp-content/plugins/ directory.
  2. Activate the MWB Product Filter for WooCommerce plugin through the ‘Plugins’ menu in WordPress.

3.General Setting

  1. To use the plugin, you need to activate the plugin by turning on the toggle in General Settings.
  2. In the admin panel, click on MakeWebBetter→Product Filter for WooCommerce →General Settings.
  3. Activate the plugin by turning on the toggle switch.
  4. From the given dropdown menu, Select the position of the filter reset button. The options you get are- Use Shortcode, Above Products, Above Filters, Below Filters
  5. Copy the given shortcode from Shortcode for reset button and place the shortcode in the appropriate section.
  6. Select how you want to display the selected filters to your users from the Select the type of the filter dropdown menu. It consists of options: Highlight filter and Show them separately with cross icon.
  7. One of the most important features of the plugin is that you can create filters using the meta values of your products. In the General Settings tab, Select the product for meta value filter from the given list of products in the respective setting.
  8. Use the Shortcode given in this tab to place the shortcodeproduct filter widget according to your choice in the frontend.
  9. Click on the UPLOAD LOADER button to upload the custom icon as the loader while the filtered products load on your page.
product filter general setting
10. Click on the Save Settings button.
11. To place your product filters appropriately,

  • Copy the shortcode [product_filter_for_woo]
  • In the admin panel, go to Appearance→ Widgets→ Available Widgets.
  • Select Text and then choose from the dropdown menu, where you want to place the product filter plugin. The available options are Sidebar. You can also place the filter as your WooCommerce theme would allow.
  • Click on the Add Widget button.
  • Now, paste the shortcode in the added text-area widget.
product filter widgets

4.Filter Settings

1. To add new filters, first, you need to set the global attributes by executing the following steps:

  • To add, edit and remove attributes, go to Products→Attributes
  • Add a Name (example: ‘Brand’), and Slug (URL-friendly name). You can set the ordering from Default sort order and Enable Archives if needed.
  • Click on the Add Attribute setting.
  • Add attribute values by clicking on All Products→ Configure terms.
  • You can add as many values here separated by a ‘|’ and order them as per your need if you selected ‘Custom ordering’ when creating the attribute.
attributes setting

2. Now, add these created attributes to each of your products by the following steps:

  • From the admin panel, select Products→ All Products.
  • Select the product you want to add the attributes to from the panel
  • Go to the Attributes tab in the Product Data box
  • Choose the created attributes from the Custom product attribute dropdown menu and click on the Add button.
  • Add the values to the product as suitable for the product.
product data

3. Also, add meta values based on the meta fields on your website for the respective products.

4. Click on MakeWebBetter→ Product Filter for WooCommerce→ Filter Settings.

5. Click on the Add Filter button.

6. Fill in the Title of your product filter.

7. Select one from the options given in the Filter for setting. These two options are- Attributes and Custom.

  1. If you select Attributes, choose from the attributes that you wish to create the product filter for. (Example: brands)
  2. If you select Custom option, choose the meta field from the dropdown menu in the Select Field To Select Meta Values For Filtering setting. Next, enter the Meta Values for the product separated by a comma. 

Note: These meta values will be amongst the categories to choose from for the user in the frontend.

8. Select the layout of your filter from the Type of filters option. You get the following types of layouts in this plugin:

  • Lists– You can display the categories of your products/ services to your customers in a list format.
  • Labels- Using this format, you can display the categories in the horizontal layout. When you have fewer categories to label, this format will work best for you.
  • Colors- This format is best when you have to display colors instead of writing the name of the colors. You can display your color options in circular or rectangular shapes.
  • Dropdown- If your category is very long, you can opt for this format. It will enable your filter in the form of a dropdown menu.
  • Checkbox- Using the checkbox, you allow your customers to tick the boxes next to the category they want to opt for.
  • Slider- This format is best suited for the price filter. The users can simply slide a bar to set the price range which is suitable for them.

9. You get two options to apply the query type:

  • AND- Using this option, you give the user to opt for more than one attribute value for particular filters.
  • OR- Using this option, you give the user to opt for any one attribute value for particular filters.

10. Click on the Save Filter button. You can also delete a created filter under the operation column.

filter popup setting

5.Filter Classes

You can add different design features such as suitable margins, paddings, alignments, fonts, and colors in the front end using the fields by clicking on MakeWebBetter→ MWB Product Filter for WooCommerce→ Filter Classes pagination container, result in count container, all you can add the ‘scroll-to-top’ anchor by filling in the CSS class and HTML tags in the respective fields.

Select filter classes

1. Fill in the CSS class or id in the Product Container field for a suitable design. 

2. Fill in the CSS class or id in the Shop Pagination Container field for adjusting the number of products on a page.

3. Fill in the CSS class or id in the Result Count Container to display the result count in your WooCommerce shop.

4. You can apply a scroll-up anchor button by entering the HTML tag in the Scroll up to top anchor field.  

 

6.FAQs

Yes, the admin gets a shortcode [product_filter_for_woo] to use the filter functionality on the shop page.

Yes, on the shop page, the user is given a reset button to remove all the filters applied in one click.

Yes, the admin can add a filter for each and every product by applying the attributes to filter the products easily.

Filters will be visible to the customers/ users when you will turn on the toggle from-
MakeWebBetter→Product Filter for WooCommerce →General Setting.

The custom loader comes in-built with the plugin to improve the visual appearance when the user waits for the filtration to process.

Yes, you can manually integrate your products with Product Filter for WooCommerce by making use of the filter classes in the plugin backend settings.

Suggest Edit