If you imported demo data #4 and discovered that there is no working filter on the front page – this article is for you.
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. Please create a ticket at our support portal to get these plugins!
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.
After you contact our support and get a download link, you will download a zip archive which you need to unzip. Once you unzip it, you will see a list of files and folders. 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. The content of the wp-content folder you will find in the download as well should be copied to the existing wp-content folder on the server where your site is located. Use FTP to transfer these files.
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 categories and subcategories. To make your filter look exactly like our demo, you need to add 4 top-level categories: Audi, Ford, Honda, Kia. Then, for each of these top-level categories, you need to add models (subcategories). 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 subcategories you need to add yet another level of subcategories, sub-subcategories, so to say. For Audi -> a3 you add 2012, 2015, 2018 sub-subcategories. For Audi -> a5 you also add 2012, 2015, 2018 sub-subcategories etc.
Once you create all the necessary categories for the taxonomy, you need to assign some products to these categories. Those categories which have no products assigned won’t be shown in the filter. To add products to categories, 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 categories, 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!