When you are offering tons of products in your WooCommerce store using a single page, it should have a filter option. Adding a filterable product list helps for that. Now, you can do that easily using ShopEngine’s ‘Filterable Product List’ widget.
How to Add Filterable Product List? #
It’s easy to do. All you need is to drag and drop the widget on the targeted page. Follow the following steps to add the list –
Step 1: Create a Shop Page #
Create a Shop Page as described here.
Step 2: Drag and Drop the Widget #
Now, in the widget library, search for ‘Filterable Product List’
You will see the widget in the list. Drag and drop the widget on the page.
Now you will see a layout with the products as shown in the following image.
Step 3: Customize the Widget #
Customize the widget’s layout from the options panel. Click on the edit icon on the top right of the widget layout.
You will have a list of options.
- Products Per Page: Choose how many products do you want to share per page.
- Columns: Choose the number of columns for the product page.
- Order: Select the product order in descending order or ascending order.
- Order By: Choose the product order based on product ID, title, name, Date, Popular.
Step 4: Add New Item In the List #
If you want, you can add new items in the filterable product list widget. To add a new item, simply click on ‘Add Item’ and select the type.
Step 5: Change the Settings for Filterable Products #
Using the settings option of the widget, you can customize the layout more.
- Flash Sale: Using this option, you can choose to show or hide the flash sale.
- Show Categories: You can show the categories to filter the products.
- Show Description: It allows to show or hide products’ description.
- Rating: Hide or show the rating for products.
- Regular Price: Show the regular price or offer price.
- OFF Tag Badge: If there is off on products, it allows to show that.
- Button Group: Hide or add buttons.
- Enable Custom Ordering: You can show a custom order option with it.
Once the edit is complete, update the page.
