WOOF - WooCommerce Products Filter

WOOF - Easy&Flexible!

This documentation is basic! More info see on the plugin site: products-filter.com

Thanks you for buying WOOF. We hope it will give for your site more power and more fun for your clients =)

  1. Go to your codecanyon account on page download to get the plugin bundle
  2. Unpack downloaded codecanyon bundle zip
  3. In your wordpress site go to: https://YOUR_SITE.com/wp-admin/plugin-install.php?tab=upload
  4. Press there button 'View'
  5. Find unzipped codecanyon folder, open it, find there woocommerce-products-filter.zip and select it
  6. Press 'Install Now' link
  7. Wait a little
  8. After installation finish press 'Activate Now' link
  9. For the best working with the plugin set permalinks for your site: https://YOUR_SITE.com/wp-admin/options-permalink.php
    Common Settings -> Post Name (/%postname%/) or any another
    Product permalink base -> Shop base with category (/shop/%product_cat%/) or any another
  10. Press 'Settings':
    OR go to: https://YOUR_SITE.com/wp-admin/adminwc-settings&tab.php?page=wc-settings&tab=woof

Settings of the plugin you can find by link: https://YOUR_SITE.com/wp-admin/admin.php?page=wc-settings&tab=woof
Settings of the plugin has 6 tabs

  1. Structure

    • backend
    • All this items names as filter-elements: taxonomies filter-elements and by-filter-elements
    • In each row of taxonomies filter-elements you can see 5 items
    • First item is image, you can drag it and change the ordering of elements on the front
    • Second item is drop-down by which you can change view of selected taxonomy terms on front. There is 7 types in the box: radio, checkbox, drop-down, multi drop-down, color, label, hierarchy drop-down
    • Look your attention on the color type. If select it and press 'Save' - you will see for each your color terms color-pickers and textinput for image url, by which you can set background for color-checkboxes on the front of the site.
      Note: You can define description for each color in its term description textarea.
    • Third item is textinput. You can exclude some terms from your filters using this element. Fot this you just need write their ID there using comma. For example: 25,77,103
    • Fourth item is button. You can press it and you will found some additional options for the current taxonomy filter-element
    • backend
      • Show title label: You can hide taxonomy label if you need it.
      • Taxonomy custom label: if you want to rename taxonomy label name on the site front
      • Max height of the block: useful thing when you display taxonomy terms as checkboxes or radios and its has a lot of terms. You can set here max-height and your block visually will not be super big, 0 means no max-height
      • Dispaly items in a row: Works for radio and checkboxes only. Allows show radio/checkboxes in 1 row!
    • Fifth item: checkbox - check it if you want present current taxonomy or by-item on the site front
    • With by-filter-elements all is more simple: drag-and-drop, name, drop-down for on/off and button with additional options (not necessary)
  2. Options

    • Set filter automatically: Set filter automatically on the shop page
    • Autosubmit: Start searching just after changing any of the elements on the search form
    • Show count: Show count of items near taxonomies terms on the front
    • Dynamic recount: Show count of items near taxonomies terms on the front dynamically. Must be switched on "Show count" option
    • Hide empty terms: Hide empty terms. Must be enabled "Dynamic recount" mode.
    • Try to ajaxify the shop: Select "Yes" if you want to TRY make filtering in your shop by AJAX. Not compatible for 100% of all wp themes.
    • Hide childs in checkboxes and radio: Hide childs in checkboxes and radio. Near checkbox/radio which has childs will be plus icon to show childs.
    • Hide woof top panel buttons: Red buttons on the top (filter navigation) of the shop page when searching is done
    • Lets checked terms will be on the top: Selected terms will always be displayed on the top (for parent-terms only, child will be on the top but under parent-term as it was)
    • Filter button text: Filter button text in the search form.
    • Reset button text: Reset button text in the search form. Note - if you want to hide this button just write there 'none'
  3. Design

    • Radio and checkboxes skin: coloring skins for the filter checkboxes and radio on the front
      Note - if you do not want to use icheck js library for your checkboxes/radio select 'none' for this option!
    • Overlay skin: animation while filtering is going
      There is 2 first skins is basic, another is experimental and works with svg. Script is took from here: https://jxnblk.github.io/loading
    • Loading word: if 'Overlay skin' selected as default, this word will appears on the site front while filtering is going
    • Overlay image background: background for animation while filtering going
    • Use chosen: Use chosen javascript library on the front of your site for drop-downs.
    • Use beauty scroll: Use beauty scroll when you apply max height for taxonomy block on the front
    • Plainoverlay color: color for animation while filtering going
    • Range-slider skin: Ion-Range slider js lib skin for range-sliders of the plugin
    • Hide auto filter by default: works when "Set filter automatically" is "Yes". If you set "Yes" for this option filter on the shop page will be hidden by default, and your customers will have to press button to make it visible
    • Auto filter close/open image: Image which displayed instead of filter while it is closed if option "Hide auto filter by default" selected as "Yes". Write "none" there if you want to use text only!
    • Auto filter close/open text: Text which displayed instead filter while it is closed if "Hide auto filter by default" is selected as "Yes"
    • Image for subcategories - open - Image when you select in tab Options "Hide childs in checkboxes and radio". By default it is green cross.
    • Image for subcategories - close - Image when you select in tab Options "Hide childs in checkboxes and radio". By default it is green minus.
    • Toggle block type - Type of the toogle on the front for block of html-items as: radio, checkbox .... Works only if the block title is not hidden!
    • Image for block toggle [opened] - Any image for opened html-items block 20x20
    • Image for block toggle [closed] - Any image for closed html-items block 20x20
    • Custom front css styles file link - For developers who want to rewrite front css of the plugin. You should know CSS for such modifications!
  4. Advanced

    Here is 2 tabs: Code and Options
    • Code:
      • Custom CSS code: If you want to customize the plugin style/layout and not lost your changes after update
      • JavaScript code after AJAX is done: If you are developer and want to do smth after AJAX products loading - drop your script there
      • Init plugin on the next site pages only: This option excludes initialization of the plugin on all pages of the site except links and link-masks in that textarea. One row - one link (or link-mask)! Example of link: https://site.com/ajaxed-search-7. Example of link-mask: product-category! Leave it empty to allow the plugin initialization on all pages of the site!
      • WPML taxonomies labels translations: very useful thing when you are using WPML plugin and want to set translation for your taxonomies labels on the front for each language!
        Look please how to translate labels for different languages (english is default in the example):
    • Options:
      • Search slug: If you do not like search key "swoof" in the search link you can replace it by your own word. But be care to avoid conflicts with any themes and plugins, + never define it as symbol "s". Not understood? Simply do not touch it!
      • Products per page: Products per page when searching is going only. Set here -1 to prevent pagination managing from here!
      • Optimize loading of WOOF JavaScript files: This option place WOOF JavaScript files on the site footer. Use it for page loading optimization. Be care with this option, and always after enabling of it test your site frontend!
      • Override no products found content: place in which you can paste text or/and any shortcodes which will be displayed when customer will not find any products by his search criterias
      • Hide terms count text: If you want to show relevant tags and tags count on the categories pages you should activate show count, dynamic recount and hide empty terms in the tab Options. But if you do not want show count text near each term - set Yes here and its will be hidden by CSS.
      • Listen catalog visibility: listening of "catalog visibility" - the option in each products backend page in 'Publish' sidebar widget. backend
      • Disable swoof influence: Sometimes code 'wp_query->is_post_type_archive = true' does not necessary. Try to disable this and try woof-search on your site. If all is ok - leave its disabled. For DEV: Disabled code by this option you can find in index.php by mark "disable_swoof_influence".
      • Cache dynamic recount number for each item in filter: Useful thing when you already started your site and enabled use dynamic recount. Its make recount very fast! Of course if you added new posts which have to be in the search results you have to clean this cache OR you can set time period for auto cleaning using drop-down near 'clear cache' button to make dynamic recount information actual!
      • Cache terms: Useful thing when you already set your site IN THE PRODUCTION MODE - its getting terms for filter faster without big MySQL queries! If you actively adds new terms every day or week you can set cron period for cleaning. Another way set: 'not clean cache automatically'!
      • Show blocks helper button: Show helper button for shortcode [woof] on the front when activated option 'Set filter automatically'.
      • Custom extensions folder: Custom extensions folder path which relative to 'wp-content' folder where you can add your own extensions.
  5. Extensions

    Extensions: default and custom extensions for products filtering functionality.

  6. Info

    Just useful information and link to the plugin demo site.

After you set the settings and saved them you have 3 ways to set the filter on the front:

Instead of (also with) reading this documentation you can watch video tutorials here: https://products-filter.com/video-tutorials/

The plugin has 2 basic shortcodes:
[woof sid="auto_shortcode" autohide=0 taxonomies=product_cat:9]
[woof_products per_page=8 columns=3 is_ajax=0 taxonomies=product_cat:9 custom_tpl='woof_tpls/woo_tpl_1.php'] where woof_tpls is folder inside wp theme folder or its child folder

Shortocode [woof] generates search form and has next options:

Shortcode [woof_products] has next options:

Additional useful shortcodes:


If you logged in in the site as admin, and you want to customize for example wide of columns in [woof] shortcode which has sid you can apply helper button for it as on the screens!
So it can help you in your defferent css customizations for your site!

Custom Taxonomies

If you need for example custom taxonomy as 'Location' - no problems, you can create it using next plugin:
The Plugin Demo Site And WOOF will be working well with it. Just look the plugins demo site with it!

Hierarchy drop-down

From v.2.1.3 it was added ability to create special drop-downs for construction of terms as:
parent->child->sub child->sub sun child-> ....
For example you want to create filtering by Locations. For this you can create custom taxonomy Location and add terms by next logic:
EXAMPLE: https://demo.products-filter.com/working-with-hierarchy-drop-down/
Then in first tab for taxonomy Location select 'Hierarchy drop-down' and in advanced options in 'Taxonomy custom label' write 'Country+City+District' and set 'Show chain always' as Yes. On the front you will get next:
The same logic for Maker+Model in cardealer for example

Hint: When WOOF-search IS going on the site in tag body appears CSS class 'woof_search_is_going'. Happens only in non-ajax mode.

Main reccomendation is for dynamic recount -> this feature takes a lot of resources because each recount can take more that 1 sql query to database and this can make site slow. So there is ways to make it fast:

The plugin has some features which can help you in the customization of the plugin functionality:

From version 2.1.3 added ability to create any extensions for WOOF. But using examples in folder 'ext/' of the plugin and option Advanced -> Options -> Custom extensions folder it is possible create new or improved existed extensions for current project without any risk to lose code

In version 2.1.4 API for extension is finished and ready for production. Its possible to create extensions with its own settings in tab Extensions.

v.2.1.8 - Statistic

In version 2.2.1 added important Extension as Meta Data, and from this moment it is possible filter products by meta data

The plugin tested for compatibility with the next plugins:

All words wrapped in wordpress function '_e' or '__'. So it is possible localize it for any language.
For this you are need create .po file and edit it with poedit.

Get more info here.