In order to display elements on the filter to be similar the demo, you can follow my instruction below:
Step 1: From your Dashboard, access WooCommerce > Settings > Products Filter.
Step 2: Click the Extensions tab. In this tab, you need to check the Color box and Labels box.
Step 3: Next, you move back to the Structure tab and start setting up.
- In this box, you need to switch it to As ion range-slider.
- Click Addition Option
After press the Additional option button, you will see a pop-up window like this. Now you need to:
3. In the Show button section, switch it to Yes.
4. Enter the Title text
5. Click Apply to save your setting.
Step 4: In order to set up the Categories filter, you can:
1. Check the Product categories box.
2. Click the Additional Option.
3. In the Show title label, switch it to Yes.
4. Type your title.
5. Click Apply.
Note: If you want to hide a category, you can enter its ID to the box like the picture below. Therefore, that category will not be shown. E.g. I want to hide the Uncategories one, I get its ID and enter it to the box.
Step 5: Set the Tag filter.
1. Switch it to Label.
2. Check the Product tags box.
3. Click the Additional options
4. In the Show title label section, switch it to Yes.
5. Enter your title.
6. Click Apply.
Step 6: Set up Color filter.
1. Switch it to Color
2. Check the Product color.
3. Click the Additional options.
4. In the Show title label, switch it to Yes.
5. Enter your title.
6. Apply your settings.
7. Click Toggle color terms.
8. Select color.
Step 7: Set up Size filter.
1. Switch it to Label.
2. Check the Product size box.
3. Click Additional options
4. Switch it to Yes in the Show title label section.
5. Type your title.
6. Click Apply.
Step 8: Press Save Changes.