Product filters play an important role in improving customer buying experience. Without product filters, your customers will see a long list of products, which disappoints them from ordering because there is no option for limiting them. On the other hand, if you offer various product filtering options in your online store, it makes the visitors return to your site for repeat purchases. One of the most important filters that most customers look for in online stores is the price range slider filter.
The advantage of displaying WooCommerce pt with WooCommerce price filter slider on the shopping page is that customers can filter those products that are within their budget. As a result, they find the products that they like and can afford. So, more easily they will choose some products to purchase from your shop.
For this reason, in this post, we introduce two practical methods for filtering WooCommerce products with price range slider. The first method is through HTML code, and the second method is using the WooCommerce product table pro plugin.
Creating price range slider filter by HTML code
If you want to have a list of products manually and display the price range slider to customers so that they can filter the desired products based on the price of the rows in the table, you can use the following code.
Using HTML, CSS, and JavaScript, This code creates a list of your products and also displays a price range slider filter.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
input[type="range"] {
width: 100%;
}
#price-range {
margin-top: 10px;
}
</style>
</head>
<body>
<h2>Product Table with Price Range Filter</h2>
<input type="range" id="price-range" min="0" max="100" step="1" value="0">
<p>Price Range: <span id="price-value">0</span></p>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Price ($)</th>
</tr>
</thead>
<tbody id="product-table">
<tr>
<td>Product 1</td>
<td>50</td>
</tr>
<tr>
<td>Product 2</td>
<td>75</td>
</tr>
<tr>
<td>Product 3</td>
<td>30</td>
</tr>
<tr>
<td>Product 4</td>
<td>90</td>
</tr>
</tbody>
</table>
<script>
const priceRange = document.getElementById('price-range');
const priceValue = document.getElementById('price-value');
const productTable = document.getElementById('product-table');
priceRange.addEventListener('input', () => {
priceValue.textContent = priceRange.value;
filterProductsByPrice(priceRange.value);
});
function filterProductsByPrice(maxPrice) {
const rows = productTable.getElementsByTagName('tr');
for (let i = 1; i < rows.length; i++) {
const cell = rows[i].getElementsByTagName('td')[1];
if (cell) {
const price = parseInt(cell.textContent);
if (price <= maxPrice) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
}
}
</script>
</body>
</html>Creating a product table with a price range slider filter by using WooCommerce product table plugin
The WooCommerce product table plugin is one of the most powerful WooCommerce plugins for creating a product table and adding various features like a price filter slider. Using the WooCommerce product table pro plugin, you can add all the filters needed for the store to the product table.
This plugin is designed with a responsive and flexible, as well as a simple user interface. It allows you to display a list of products in the table and show different categories and features such as price, colour, size, price range, in-stock quantity, and more in the table columns to the customers.
Now let’s see how easy is to create a product table with WooCommerce price filter slider in this plugin.
Step 1: Install the WooCommerce product table plugin
To use the WooCommerce product table pro plugin, first, you need to download and install it on your WordPress website.
Now, you can find iT Product Table in the WordPress dashboard with three options:
- All table
- Add new table
- Settings
To create a product table with WooCommerce price filter slider, click on the Add new table option, then scroll the page and click on the Get start button.
You can also choose one of the preset templates to design your product table.
Step 2: Add columns to your product table
By creating a new table, our plugin inserts all of your WooCommerce products into the table, automatically. However, you can go to the Query tab and customize which products to be displayed in the table.
Let’s suppose that you make a query from your products and you want to add some columns to your table to show the product features to the customers. To make this happen, you need to follow the below steps:
- Open the Columns tab.
- Press the Add a Column button at the middle of the page to see the new column box with two sections: Heading and Cell content.
- You can customize each one by pressing the Add Elements option and choosing one of the elements displayed in the left panel
After choosing the elements you need, it is also possible to customize the content and appearance of the element by editing the options in the General and Style tabs of Elements Setting panel.
There are more features for personalizing the columns of your table. For example, you can add new rows to one column to show different elements in separate rows of one column.
By repeating the steps mentioned above, you can easily add as many columns as you want to the table. For example, we tried to create a WooCommerce product table with the following columns:
- Checkbox: Let customers mark as many products as they need a cart directly from the product table,
- Title: To show the product title to the customers.
- Image: To display the featured image of the product in the table column.
- Variation: to let customers compare different attributes of the products directly on the shopping page,
Note: For displaying variations using the WooCommerce product table pro plugin, you need to add Attribute element to the cell. Then, in the General tab, choose one of the attributes from the list and set other configurations.
So, if you want to show different variations like size, color, brand, and more, you have to add an Attribute element for them, individually. In this way, each attribute will be displayed in separate columns on the product table.
- Quantity: To enable customers to increase or decrease the product quantities and add them to their carts.
- Price: when you are creating a WooCommerce product table with a price filter slider, displaying this column is essential. By adding this column, customers can see the regular or sale prices of products that are in the filtered range.
After adding the columns, you can press on the Eye icon on the top of the table, to see a preview of your product table.
Step 3: Add price range slider filter to product table
The next step, which is the purpose of preparing this tutorial for you, is to add the price range slider using the WooCommerce product table pro plugin. The good news is that you can show customized filtering options in each navigation bar of your table, like the sidebar, header, or footer.
Following the below simple instruction allow you to easily show the price range slider filter to your customers in the product table:
- Go to the Navigation tab.
- In one of the navigation bars – sidebar in this example, find the Add Element option and click on it to see the list of elements in the left panel. Now, review the elements and choose Price Filter among them.
Customize price range slider filter
As soon as you add a price filter to the sidebar, you have access to the General tab to customize the content displayed in this filtering option to the customers.
Let’s review the customizable items of Price Filter:
Heading
By editing this item, you can change the title of the price slider filter in the table. By default, the title is Price Range. However, you can change it by:
- Clicking on the Trash icon of the current text.
- Pressing Add Element.
- And choosing one of the below elements:
- Media image: To display an image instead of title.
- Space: To add a space between elements.
- Dot: To use “.” As a separator between two elements.
- Text: To show a customized message as the title.
- Tooltip: To show a tooltip as the filter title.
- HTML: To add an HTML code for customizing the filter title.
- Icon: To display an icon in the filter title.
In this example, we selected Text Element and inserted Filter by Price Range in the textbox to be shown as the price slider filter title:
“Show any” option label
This item is designed to let you customize the label of Show any in the filter box. When customers choose this item, no filtering is applied to the products, and they can see all products in the table.
You can customize this label by following the instructions that we described for the heading field.
Filter Options
This is the most important part of the price filtering box in the table, allowing you to show different price ranges to customers.
By default, the price ranges are defined as below:
- $0-50
- $51-100
- Over $100
However, you can remove these defaults by pressing the Trash icon and try to add new ones based on your need.
To add a new price range, first, you need to click on the Add an option button to see the Min and Max prices box on the top. This box contains three parts:
- Min price: Insert the minimum price range here.
- Max price: Insert the maximum price range here.
- Label: Set a title for this price range – editing the price label is the same as editing the heading field we have described before.
By repeating these steps, you can add as many price ranges as you want to the Price range filter slider.
Other customizations
There are two more items for customizing the price range slider filters, which are:
- Enable custom Min & Max input options: If you mark this option, customers can specify the max and min prices by inserting numbers in related boxes.
- Keep filter open by default if it is in sidebar: if you mark this option, the price range filter slider will always be displayed to the customers as a radio box if you have added the Price Filter element to the sidebar.
This is how the default price range slider filter is shown in the product table:
Step 4: Show WooCommerce product table with price filter slider in shopping page using Shortcode
Finally, to replace the WooCommerce shopping page with this product table, you need to:
- Save the table after adding a name on the text box above the table.
- Click on the Shortcode icon to copy it.
- Open a new page in WordPress and paste the Shortcode in.
- Go to WooCommerce settings > Products and choose the new page from the list of Shop page field.
Now, if you open the shopping page of your website, you can see WooCommerce product table with price range filter slider as below:
Conclusion
To have a professional online store and satisfy your customers, you need to add some extra features like a price filter slider, quick search, multi-add selected products to the cart, and more to the shopping page. For this purpose, your ultimate solution is to use a professional tool such as WooCommerce product table to display products in a table and add different filters that allow users to access their required products quickly. Adding a price range slider filter is only one of the features provided to users in this plugin.
