If you imported demo data #6 and discovered that there is no working filter on the front page – this article is for you. You can also watch the video tutorial on the matter below:
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.
First of all, follow this link to have WCK Custom Fields Creator plugin. WCK-custom-fields-creator.zip is free plugin that needs to be installed and activated through your WordPress Dashboard in Plugins -> Add new -> Upload Plugin.
Once it’s done, 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 -> Tire Sizes (or whatever you called the taxonomy you just created) and add new terms and sub-terms. To make your filter look exactly like our demo, you need to add 4 top-level terms: 145, 155, 165, 185. Then, for each of these top-level terms, you need to add Aspect Ratio (sub-terms). For 145: 65, 66, 67. For 155: 60, 80. For 165: 60. For 185: 60, 65, 70, 75, 80. Then, for each of these sub-terms you need to add yet another level of sub-terms, sub-terms, so to say. For 145 -> 65 you add 15 sub-terms. For 145 -> 66 you also add 14, 16, 17 sub-terms etc.
Once you create all the necessary terms for the taxonomy, you need to assign some products to these taxonomy terms. Those terms which have no products assigned won’t be shown in the filter. To add products to 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 65, then we check 66, then we check 14, 15, 16 and 17 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 Select Width+Select Aspect Ratio+Select Diameter. 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=”tire_sizes” autosubmit=”1″ ajax_redraw=”1″ is_ajax=”1″]
Find more tips within official plugin’s documentation page!