How to Create a Product Page with Filters in WooCommerce?

---

If you are using our TuriTop Plugin for WooCommerce, you can take advantage of Yith's plugins, specifically the YITH WooCommerce Ajax Product Filter plugin, to create a page, listing all of your services, where you can filter them by events date. With this tool, you can even create other filters that will help your customers navigate what you offer and find their ideal option.

 

Keep in mind that this filter will not be compatible with filters created through other plugins. For example, filters created with Jet Smart Filters.

---

Instructions

Video tutorial - Coming soon!

Step 1: Download and Install the Plugin

First, you will need to download either the premium or the free version from Yith's site.

Once you have installed it, remember to activate the plugin.

 

Step 2: Add a New Preset

You will see in your site menu panel a new option called YITH. Click on it and select the option "Ajax Product Filter". Then click on " + Add preset":

 

Step 3: Configure the Preset and Add the Filters

To configure the preset, follow these steps:

1. Name your preset.
2. Click on "+ Add a new filter".
3. Name the new filter.
4. Select "TuriTop Date" under "Filter for".
5. Click on "Save Filter".
6. Click on "Save preset".

If the changes were correctly registered, you will see the following confirmation message:

Although we only support the date filter, if needed, you can add more filters to your preset. For example, to filter your WooCommerce products by categories, price, labels, etc. The premium version of the plugin offers many more options for configuring the filters.

 

Step 4: Synchronize your TuriTop Events

Search the TuriTop plugin from your site menu panel, access the "Synchronization Events" section, and click over "Sync next 90 days". This is the information that will feed your date filter.

 

Step 5: Create a Product Page and Add the Blocks needed

On this page, besides any customization you want to add, you will need to add 2 blocks:

Yith Ajax Filters Preset

First, add the "Yith Ajax Filters Preset" block to include the filter on the page.

After inserting the block, check its settings and select the preset previously created in step 3.

Keep in mind that, depending on the editor you are using this might look a little different. For example, using Elementor:

Top Rated Products

To add the list of products, make sure to insert the "Top Rated Products" block.

 

All done! You should have a page similar to the one displayed below and should be able to filter your services by date: