If you imported demo data #4 and discovered that there is no working filter on the front page – this article is for you. You can also watch a video tutorial on the matter.
First of all you need to install and activate the theme itself and all the recommended plugins it comes with. Among others, the bundled plugins, which should be downloaded separately from the theme, need to be installed.
For the filter to work 2 plugins are necessary: the free WCK Custom Fields and Custom Post Types plugin and the paid WooCommerce Products Filter (WOOF) plugin, which you get for free in a bundle with the theme, and which should be downloaded separately.
Follow this link to have recent Woocommerce Product Filter Premium plugins. Woocommerce-product-filder.zip is the bundled (paid, but free to you) plugin that needs to be installed and activated through your WordPress Dashboard in Plugins -> Add new -> Upload Plugin.
Make sure that all plugins you installed are activated. To check this in your WordPress Dashboard go to Plugins -> Installed Plugins and make sure they all are active.
After this you need to create a custom taxonomy. In our demo filter we call it vehicles, so if you want to install demo data and create a working demo filder, you should create vehicles taxonomy as well. To do this, in your WordPress Dashboard go to WCK -> Taxonomy Creator, call the taxonomy vehicles, check the products checkbox, set True for Hierarchical and press add entry.
Once the taxonomy was created, you need to create terms for this taxonomy manually. To do this you need to go to Products -> Vehicles (or whatever you called the taxonomy you just created) and add new terms and subterms. To make your filter look exactly like our demo, you need to add 4 top-level terms: Audi, Ford, Honda, Kia. Then, for each of these top-level terms, you need to add models (subterms). For Audi: a3, a5, a6, a8. For Ford: Fiesta, Mondeo, Scorpio. For Honda: Civic, CR-H, CRV. For Kia: Rio, Soul, Sportage. Then, for each of these subterms you need to add yet another level of subterms, sub-subterms, so to say. For Audi -> a3 you add 2012, 2015, 2018 sub-subterms. For Audi -> a5 you also add 2012, 2015, 2018 sub-subterms etc.
Once you create all the necessary terms for the taxonomy, you need to assign some products to these terms. Those terms which have no products assigned won’t be shown in the filter. To add products to exact terms, go to editing a product, find the taxonomy you just created in the lower right column of the product’s backend, and check the necessary checkboxes for the product. For example, we check Audi, then we check a3, then we check 2012 and 2015 and save changes by updating the product:
Once you are done assigning products to the newly created terms, you need to adjust some settings for the filter. Go to WooCommmerce -> Settings -> Products Filter tab -> Extensions tab and check the Hierarchy Dropdown checkbox, press save changes:
Then go to the Structure tab, check the Vehicles checkbox, select Hierarchy dropdown in the dropdown list, hit save changes:
Then press the additional options button and fill the input taxonomy custom label field. In our demo filter it should be Maker+Model+Year. Set show chain always to YES and hit apply button:
Go to the Options tab and fill the settings according to this example screenshot / Go do the Design tab and fill the settings according to this example screenshot as well:
The filter should now appear on your home page. If it hasn’t – please create a support ticket here.
If you want to also display the filter on your shop page, you need to go to WooCommerce -> Settings -> Products Filter -> Options -> switch Set Filter Automatically to YES:
On the home page, the filter is being added with the help of the following shortcode placed in an Elementor widget:
[woof sid="home_page" tax_only="vehicles" autosubmit="1" ajax_redraw="1" is_ajax="1"]
Find more tips within official plugin’s documentation page!