Create an interactive WooCommerce product table with price range slider filter

create an interactive product table
Table of Contents

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>
        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;
    <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>

                <th>Product Name</th>
                <th>Price ($)</th>
        <tbody id="product-table">
                <td>Product 1</td>
                <td>Product 2</td>
                <td>Product 3</td>
                <td>Product 4</td>

        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;

        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';

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.

select templates table in plugin WooCommerce

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.

WooCommerce product table pro

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:

  1. Open the Columns tab. 
  2. 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
  3. You can customize each one by pressing the Add Elements option and choosing one of the elements displayed in the left panel
add columns to product table in WooCommerce

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.

set general and style tab to checkbox element in columns table

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. 

set size in style tab in columns table

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.

result attribute element to products in 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:

  1. Go to the Navigation tab. 
  2. 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.
add price range slider filter to product table

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:


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.
select trash icon of current text in style tab
  • 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.
add element in table

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:

select text element and inserted filter by price range in the textbox
“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.

set filter options section in table

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. 

select add an option button in filter options section
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:

result price range slider filter in 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.
select shortcode icon in table
  • Open a new page in WordPress and paste the Shortcode in.
paste shortcode in new page WordPress
  • Go to WooCommerce settings > Products and choose the new page from the list of Shop page field.
select new page from list of shop page field in WooCommerce

Now, if you open the shopping page of your website, you can see WooCommerce product table with price range filter slider as below:

result price range filter slider in product table WooCommerce
WooCommerce product table pro


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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Shopping cart
Sign in

No account yet?

We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.

Start typing to see products you are looking for.