1.Overview

MWB Product Filter for WooCommerce allows the merchants to create filters based on product attributes on their product site. Using the plugin, the merchant can create custom product filters. The customers can use these filters to sort and find relevant products quickly.

Features:

  • The merchant can create custom filters based on their industry type.
  • Use the shortcode provided to place the filter appropriately.
  • Custom loader on the frontend screen when the filter is applied
  • Add the filters in different layouts.
  • Activate 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 Setting.
2. In the admin panel, click on MakeWebBetter→MWB Product Filter for WooCommerce →General Setting.
3. Activate the plugin by turning on the toggle switch.Filter General Setting

4. Click on the Save Settings button.
5. 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. Now, click on MakeWebBetter→MWB Product Filter for WooCommerce→ Filter Settings.

4. Click on the Add Filters button.

select filter type

5. Fill in the Title of your product filters.

6. Choose from the attributes that you wish to create the product filters for. (Example: brands)

7. 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 square and circle 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.

8. 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.

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

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