Content of the page

Creating simple woocommerce products filtering

Content of the article

So now we have enough information about how to create simple filters which works with taxonomies and meta data on the same time. Lets consider woocommerce now.

So the task - create filter for woocommerce products by product category, product attributes and by price. Lets go:

Creating filter-sections

  • Go to the filters-sections and create new section there: 
  • Enter title '~Taxonomies', click Prepend Filter Item, name it as ~Taxonomies and select type taxonomy. DO NOT FORGET TO select filter-category for this filter-section as on the screen above. '~' - this sign before the sections title means that title of this filter-section will not be displayed on the front of the site! Sometimes it is necessary...
  • Lets keep in this section only taxonomy mark, so click Save.
  • Click 'Add New Filter Section'
  • Click 'Prepend Filter Item'
  • Name new filter-item as "Price"
  • Click 'Toggle'
  • Set 'Item Type' as range slider
  • 'From^To' set thinking about your product min and max prices, in our case lets set 0^2000
  • Set 'Prefix' as $ for USD as an example (money sign)
  • Use 'Postfix' for EUR if you need this
  • 'Prettify' - set 'Yes'
  • Item description - its is only price, I do not think you are need description for this element here  😉
  • Check filter-category you need, in this current example it is 'my shop 1' (see screen above)
  • Press Save
  • Press Toggle button again  on our price filter-item
  • Rename filter-item meta key to medafi_price for example. Meta key always must begin from 'medafi_' prefix. Click 'change meta key'. Wait....
  • Press Toggle again
  • Now we have situation when we need meta reflection, because price for ours filters is exists already. So check check box under 'Reflect value from meta key'
  • Write there '_price'
  • Press Save button
  • So now we have something like this: 

Lets mark all woocommerce products by MDTF filter-category

  • We have to mark all woocommerce products by MDTF filter-category. Do not forget before it check slug 'product' in the plugins settings 
  • We have 2 ways to do it: manually and by script
  • Manually - go to each product and select filter-category there: 
  • But we can avoid first way, because all data already ready for searching: price,taxonomies and attributes. + We can have 1000 products! So better do it by script!
  • So lets do it automatically:
    • go to the filter-category page (term) and remember its ID: 
    • it is 56 in our case
    • go to the plugin settings and set 56 in "Enter filter-category ID" field, then select 'product' and click 'Assign': 
    • that is all - all products from now marked by our filter-category (56)
  • Now we have to set widget on the front of the site to start filtering

Lets set the widget

  • Go to the widgets and and drop into any sidebar you want MDTF widget: 
  • Meta Data Filter Category - select filter-category we want to use, in this example it is 'my shop 1'
  • Slug - select 'product'
  • Hide meta values filter options/Hide taxonomies values filter options - do not check it. This checkboxes are necessary if we do searching only by taxonomies (check Hide meta values filter options) OR by meta data only (check Hide taxonomies values filter options). We are going to make filtering as by taxonomies so by meta fields on the same time.
  • Results output page link - leave it empty, and this options will be taken from the plugins settings. Set magic word 'self' if you want to make searching on the same page (with shortcode [mdf_products]).
  • Results output template - leave it empty, and this options will be taken from the plugins settings (Search Result Page). Or if you need to write set custom template there.  Set magic word 'self' if you are going to make searching on the same page.
  • Custom reset link/url - set link where to redirect customer after he presses 'Reset' button on the front. Set magic word 'self' if you are making searching on the same page OR link to the site shop page.
  • Custom text for search results - text which shows how many products/posts were found. %s is count, always must be in <span> tag. Example: Found <span>%s</span> items
  • Show found items count text - shows 'Custom text for search results' if checked
  • Meta options:

    • Show near checkbox count of posts - show near each meta checkbox how many variations can be found if to check it
    • Show count of posts in select option - show near each meta drop-down how many variations can be found if to select it
    • Show count of posts in range slider - show near each meta range-slider how many variations can be found if to drag it
    • Dynamic post items recount - dynamic variations recount near each meta items. If you have weak server unchek it, because each recount is 1 MySQL query which takes resources of the server
    • Hide items where count of items is 0 - hide filter-items which has zero variations.
    • Show filter button after each block - show search action button after each filter-section on the front 
  • Taxonomies options:

    • Here you can check taxonomies which you want to use in the filter: 
    • As you can see from the screen woocommerce product attributes are taxonomies too, so it is not the problem at all to filter by them too
    • Each Taxonomy has its own options about which you can read here
    • Show count of posts/custom - as in the meta show count - the same - show count of variations which can be found if check this option
    • Dynamic post items recount - dynamic variations recount near each meta items. If you have weak server unchek it, because each recount is 1 MySQL query which takes resources of the server
    • Dynamic post items recount - dynamic variations recount near each meta items. If you have weak server unchek it, because each recount is 1 MySQL query which takes resources of the server
  • Show reset button - if you need you can set reset button for your customers. Very convenient thing for your customers, better check it
  • Auto submit form - if you check this option the search will start instantly after user change (select,check) something in the search form of this widget. If to uncheck this option you will see AJAX options 
  • AJAX Auto recount - recount search form combinations count of each filter-item
  • AJAX items output - uses in couple with 'AJAX Auto recount' only. Means that you can output posts using AJAX. Works from the box for woocommerce only, for post type filtering needs using of special shortcode [mdf_results_by_ajax]
  • Title for Any - word which is displayed for filter-items which are not selected (drop-down)
  • Title for filter button - text which is displayed on the filter button
  • Additional taxonomies conditions - this is the special feature in the widget if you want to set taxonomies conditions in the search form. For example you want on one page make searching of products which belongs to product_cat with term ID 96, and the filter should show count of combinations of all positions relatively to this term ID 96. You should write there next expression: product_cat=96. For more terms write condition using comma: product_cat=96,3. If you want to use more taxonomies in the same condition write something like this: product_cat=96,3^boutiques=77,88 - using special sign '^' (SHIFT+6 in Windows). If its uses with shortcode [mdf_custom] or [mdf_products]  the same conditions should be set there too for synchronizing
  • Sort panel - Allows you to make sorting in the search results. Read more here about it

This is all. Now you can start searching of your woocommerce products ...