{"id":24378,"date":"2023-11-14T15:22:12","date_gmt":"2023-11-14T15:22:12","guid":{"rendered":"https:\/\/ithemelandco.com\/?p=24378"},"modified":"2025-10-16T11:52:21","modified_gmt":"2025-10-16T11:52:21","slug":"woo-product-table-price-range-slider-filter","status":"publish","type":"post","link":"https:\/\/ithemelandco.com\/blog\/woo-product-table-price-range-slider-filter\/","title":{"rendered":"Create an interactive WooCommerce product table with price range slider filter"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why do WooCommerce online stores need a product price filter?<\/h2>\n\n\n\n<p>WooCommerce price filter is a guiding feature, helping customers find their ideal choices among a vast range of products. Considering the fact that most customers have little interest in performing manual searches to locate their required products on your online shop, it is very important to provide them price filter slider to give them no excuse for leaving your store. In addition to customer satisfaction, price filter WooCommerce has more advantages including:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Improve customer buying experience&nbsp;<\/h3>\n\n\n\n<p>Filters are a key tool for any WooCommerce site, as customers can simply get tired of combing through numerous website pages searching for the product they need, and filters make this task much easier.&nbsp; The price filter makes it easier to find products by allowing users to select products by WooCommerce price range, which significantly speeds up the time it takes to find the desired option.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show your respect to customers&nbsp;<\/h3>\n\n\n\n<p>When customers see multifunctional filters like filter by price on your online shop, they understand that respect their requirements. Such feelings convince them to have a positive reaction and order goods from your site.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Improve conversions rate<\/h3>\n\n\n\n<p>Providing WooCommerce filter by price, and other fields like category, attributes, etc. facilitates the purchasing journey for customers and makes the process hassle-free and less time-consuming. Enhancing customer satisfaction and giving the ability to the customers to find exactly what they are looking for, result in increasing conversion rates and boosting your sales.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating price range slider filter by HTML code<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Using HTML, CSS, and JavaScript, This code creates a list of your products and also displays a price range slider filter.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&nbsp; &nbsp; &lt;style&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; table {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;\n&nbsp; &nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; &nbsp; th, td {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #ddd;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 8px;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;\n&nbsp; &nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; &nbsp; th {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #f2f2f2;\n&nbsp; &nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; &nbsp; input&#091;type=\"range\"] {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;\n&nbsp; &nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; &nbsp; #price-range {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 10px;\n&nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;Product Table with Price Range Filter&lt;\/h2&gt;\n\n&nbsp; &nbsp; &lt;input type=\"range\" id=\"price-range\" min=\"0\" max=\"100\" step=\"1\" value=\"0\"&gt;\n&nbsp; &nbsp; &lt;p&gt;Price Range: &lt;span id=\"price-value\"&gt;0&lt;\/span&gt;&lt;\/p&gt;\n\n&nbsp; &nbsp; &lt;table&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;thead&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Product Name&lt;\/th&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Price ($)&lt;\/th&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/thead&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;tbody id=\"product-table\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Product 1&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;50&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Product 2&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;75&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Product 3&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;30&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;Product 4&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;90&lt;\/td&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/tr&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/tbody&gt;\n&nbsp; &nbsp; &lt;\/table&gt;\n\n&nbsp; &nbsp; &lt;script&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; const priceRange = document.getElementById('price-range');\n&nbsp; &nbsp; &nbsp; &nbsp; const priceValue = document.getElementById('price-value');\n&nbsp; &nbsp; &nbsp; &nbsp; const productTable = document.getElementById('product-table');\n\n&nbsp; &nbsp; &nbsp; &nbsp; priceRange.addEventListener('input', () =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; priceValue.textContent = priceRange.value;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filterProductsByPrice(priceRange.value);\n&nbsp; &nbsp; &nbsp; &nbsp; });\n\n&nbsp; &nbsp; &nbsp; &nbsp; function filterProductsByPrice(maxPrice) {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const rows = productTable.getElementsByTagName('tr');\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let i = 1; i &lt; rows.length; i++) {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const cell = rows&#091;i].getElementsByTagName('td')&#091;1];\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (cell) {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const price = parseInt(cell.textContent);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (price &lt;= maxPrice) {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows&#091;i].style.display = '';\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows&#091;i].style.display = 'none';\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add the default WooCommerce price filter widget to your shop page<\/h2>\n\n\n\n<p>WooCommerce price filter lets you display a price filter slider on the shop page and enables customers to set low and high prices to filter the list of products. In this way, they can quickly find products within their budget.<\/p>\n\n\n\n<p>WooCommerce price slider can appear either by <span style=\"text-decoration: underline\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/wordpress-block-editor\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress block editor<\/a><\/span> or <span style=\"text-decoration: underline\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/manage-wordpress-widgets\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Widgets<\/a><\/span>. Continue reading to learn how to add product price filters in WooCommerce with both methods.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method #1: Insert WooCommerce price slider by block editor (Gutenberg)<\/h3>\n\n\n\n<p>To add a WooCommerce price range filter by block editor, you need to use WooCommerce in conjunction with Gutenberg (Block Editor). Let\u2019s review how to use blocks for displaying the WooCommerce price filter in 3 simple steps:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Insert All Products&nbsp;block<\/h4>\n\n\n\n<p>The filter by price in the WooCommerce block only works when you have added&nbsp;the <strong>All Products <\/strong>WooCommerce block to your shop page. Otherwise, the filtering feature won\u2019t work.<\/p>\n\n\n\n<p>So, your first task is to open the <strong>Block Editor<\/strong>&nbsp;and click on the&nbsp;<strong>All Products<\/strong>&nbsp;block under the WooCommerce section.<\/p>\n\n\n\n<p>Adding this block results in listing all products in a grid view which is designed with a 3\u00d73 layout. However, you can set how many rows and columns that grid list includes, and configure the order in which products display.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/insert-all-products-block.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1240\" height=\"849\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/insert-all-products-block.png\" alt=\"Insert All Products\u00a0block in WordPress Shop page\" class=\"wp-image-29644\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/insert-all-products-block.png 1240w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/insert-all-products-block-500x342.png 500w\" sizes=\"(max-width: 1240px) 100vw, 1240px\" \/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Add WooCommerce price filter block&nbsp;<\/h4>\n\n\n\n<p>Once you add the <strong>All Products<\/strong> block, it is time to add the <strong>filter by price <\/strong>WooCommerce block on top of the product grid:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/add-price-filter-block.png\"><img decoding=\"async\" width=\"986\" height=\"473\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/add-price-filter-block.png\" alt=\"Add price filter block to WooCommerce products\" class=\"wp-image-29645\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/add-price-filter-block.png 986w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/add-price-filter-block-500x240.png 500w\" sizes=\"(max-width: 986px) 100vw, 986px\" \/><\/a><\/figure>\n\n\n\n<p>You can search <strong>Filter <\/strong>on the search box and then select <strong>Filter by Price<\/strong> to place this block on the shop page. Then use the <strong>Up <\/strong>and <strong>Down <\/strong>arrows to bring it above the list:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/price-filter-block-result.png\"><img decoding=\"async\" width=\"1112\" height=\"748\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/price-filter-block-result.png\" alt=\"Price filter block result in WooCommerce shop page\" class=\"wp-image-29646\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/price-filter-block-result.png 1112w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/price-filter-block-result-500x335.png 500w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><\/a><\/figure>\n\n\n\n<p>The element automatically sets the lowest and highest price range for the slider. You can change these prices by inserting your preferred price in the low and high textboxes.<\/p>\n\n\n\n<p>There are also some configuration settings available in the right panel allowing you to configure how the WooCommerce price slider looks and works.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&nbsp;Step 3: Configure WooCommerce price slider block settings&nbsp;<\/h4>\n\n\n\n<p>After adding the filter by price WooCommerce block, you can customize it as follows:<\/p>\n\n\n\n<p>In the <strong>Setting <\/strong>panel (the gear icon), you have access to the below configuration:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose either <strong>Editable <\/strong>or <strong>Text <\/strong>price options. If you choose the <strong>Text<\/strong> option, customers can only use the slider to filter products. Otherwise, the <strong>Editable<\/strong> option enables them to insert the price manually in the text boxes.<\/li>\n\n\n\n<li>Enable\/disable show input fields inline with the slider.<\/li>\n\n\n\n<li>Enable\/disable showing the \u201c<strong>Apply Filter Button<\/strong>\u201d. Enabling this option means users need to confirm the price range they set by pressing the <strong>Apply Filter <\/strong>button.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/configure-price-slider-block-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1110\" height=\"539\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/configure-price-slider-block-settings.png\" alt=\"Configure price slider block settings in WooCommerce shop page\" class=\"wp-image-29647\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/configure-price-slider-block-settings.png 1110w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/configure-price-slider-block-settings-500x243.png 500w\" sizes=\"(max-width: 1110px) 100vw, 1110px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the <strong>Color <\/strong>panel,&nbsp; you can choose one of the preset colors to set for the slider and text of the price filter:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/change-color-price-slider-block.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1133\" height=\"438\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/change-color-price-slider-block.png\" alt=\"Change color slider block in WooCommerce shop page\" class=\"wp-image-29648\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/change-color-price-slider-block.png 1133w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/change-color-price-slider-block-500x193.png 500w\" sizes=\"(max-width: 1133px) 100vw, 1133px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Finally, you can change the&nbsp;heading of the WooCommerce price filter by clicking on the heading and customizing the configuration items in the right panel like Color, Font, size, etc.:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/change-heading-price-slider-block.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1120\" height=\"771\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/change-heading-price-slider-block.png\" alt=\"Change heading slider block in WooCommerce shop page\" class=\"wp-image-29649\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/change-heading-price-slider-block.png 1120w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/change-heading-price-slider-block-500x344.png 500w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" \/><\/a><\/figure>\n\n\n\n<p>The final result looks like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/filter-by-price-result.png\"><img loading=\"lazy\" decoding=\"async\" width=\"999\" height=\"593\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/filter-by-price-result.png\" alt=\"Filter by price result in WooCommerce shop page\" class=\"wp-image-29650\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/filter-by-price-result.png 999w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/filter-by-price-result-500x297.png 500w\" sizes=\"(max-width: 999px) 100vw, 999px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Method #2: Use the Widget to add a filter by price in WooCommerce&nbsp;<\/h3>\n\n\n\n<p>The <strong>Price Filter<\/strong> widget is a simple way to add a price filter slider to the sidebar of the default WooCommerce shop page. Once you install and activate WooCommerce, the <span style=\"text-decoration: underline\"><a href=\"https:\/\/woocommerce.com\/document\/woocommerce-pages\/\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce shop pages<\/a><\/span> will be added to your website automatically. However, you can set another page as the WooCommerce shop page by navigating to the address below:<\/p>\n\n\n\n<p><strong>WordPress&nbsp;Dashboard &gt; WooCommerce &gt; Settings &gt; Products<\/strong><\/p>\n\n\n\n<p>Then you can open the <strong>Shop Page<\/strong> field dropdown list and choose one of the published pages in your website as the default shop page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/select-shop-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1012\" height=\"508\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/select-shop-page.png\" alt=\"Select shop page in WooCommerce settings products\" class=\"wp-image-29651\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/select-shop-page.png 1012w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/select-shop-page-500x251.png 500w\" sizes=\"(max-width: 1012px) 100vw, 1012px\" \/><\/a><\/figure>\n\n\n\n<p>Now, you are ready to add a WooCommerce price filter to the sidebar by following the below steps:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Choose the right widget area in the sidebar<\/h3>\n\n\n\n<p>To enable the right widget area in the sidebar, first, you need to go to the <strong>WordPress &nbsp;Dashboard &gt; Pages &gt; All pages.<\/strong><\/p>\n\n\n\n<p>Then find the default WooCommerce shop page, hover over it, and press <strong>Edit <\/strong>bottom.<\/p>\n\n\n\n<p>According to the WordPress theme you are using, you can change the template of this page in such a way that the sidebar is displayed on the page. This is done in two ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If a special template is defined in your theme for pages that have a sidebar, you can select it from the <strong>Page Attribute<\/strong> meta box. For this navigate to the <strong>Page Attribute<\/strong> meta box, find the <strong>Template<\/strong> field, and finally select <strong>Sidebar Template<\/strong> from available options.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/page-attribute-metabox.png\"><img loading=\"lazy\" decoding=\"async\" width=\"605\" height=\"686\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/page-attribute-metabox.png\" alt=\"Page attribute meta box in WordPress\" class=\"wp-image-29653\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/page-attribute-metabox.png 605w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/page-attribute-metabox-500x567.png 500w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In some WordPress themes, there are settings for each page that you can define the widget area you want for the sidebar. If your template has this possibility, use it to define the sidebar and the widget area displayed in the sidebar.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/choose-widget-area-sidebar.png\"><img loading=\"lazy\" decoding=\"async\" width=\"579\" height=\"307\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/choose-widget-area-sidebar.png\" alt=\"Choose the right widget area in the WordPress sidebar page\" class=\"wp-image-29654\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/choose-widget-area-sidebar.png 579w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/choose-widget-area-sidebar-500x265.png 500w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Enable the WooCommerce price filter widget<\/h3>\n\n\n\n<p>The next step is adding the WooCommerce price filter to the Widget area in the sidebar by following these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>navigating to <strong>WordPress Dashboard &gt; Appearance (1) &gt;&nbsp; Widgets (2)<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Open your desire widget area. WooCommerce sidebar in this example (3).<\/li>\n\n\n\n<li>Drag&nbsp;the<strong> Filter Products by Price&nbsp;<\/strong>widget and drop it into the widget area that you selected in the previous step (4).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/enable-price-filter-widget.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1831\" height=\"687\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/enable-price-filter-widget.png\" alt=\"Enable the WooCommerce price filter widget\" class=\"wp-image-29655\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/enable-price-filter-widget.png 1831w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/enable-price-filter-widget-500x188.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/enable-price-filter-widget-1536x576.png 1536w\" sizes=\"(max-width: 1831px) 100vw, 1831px\" \/><\/a><\/figure>\n\n\n\n<p>The price filter WooCommerce has no special configurations and the WooCommerce price filter widget will be displayed on the shop page based on your Theme configurations. It may look like a sidebar slider like below :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/woocommerce-price-filter-sidebar.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1346\" height=\"618\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/woocommerce-price-filter-sidebar.jpg\" alt=\"Price filter sidebar result in WooCommerce shop page\" class=\"wp-image-29656\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/woocommerce-price-filter-sidebar.jpg 1346w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/07\/woocommerce-price-filter-sidebar-500x230.jpg 500w\" sizes=\"(max-width: 1346px) 100vw, 1346px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Limitations of WooCommerce price slider filter<\/h3>\n\n\n\n<p>The WooCommerce price slider can be used as a basic option for improving the appearance and functionality of your shop page. However, it has some limitations that make you use a WooCommerce price filter plugin, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Slow loading: <\/strong>The filter by price WooCommerce widget doesn\u2019t use AJAX. So, customers must wait to reload the page every time they set a new price.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Limited customization option:<\/strong> The configuration settings available for the WooCommerce price filter widget need to be more flexible. You are not able to modify the size or tweak other features to make the filtering feature more attractive.<\/li>\n\n\n\n<li><strong>It\u2019s rather tricky to use:<\/strong> From a technical perspective, the WooCommerce price widget lacks intuitiveness. The price slider does not display boxes showing the price ranges selected by shoppers, making the ranges less visually accessible and diminishing the overall filtering experience.<\/li>\n<\/ul>\n\n\n\n<p>For all of these reasons, It makes sense to think about using the WooCommerce price filter plugin allowing you to create a great experience for your customers when ordering from your shop.<\/p>\n\n\n\n<p>In the next part, we want to introduce the WooCommerce product table plugin as one of the best solutions for creating eye-catching and efficient WooCommerce stores. The tools and options available in this plugin allow you to show all of your products in a table view and add as many filters as you need to different navigation bars.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a product table with a price range slider filter by using WooCommerce product table plugin<\/h2>\n\n\n\n<p>The <span style=\"text-decoration: underline\"><a href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=pt-with-price-filter\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce product table plugin<\/a><\/span> 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Now let\u2019s see how easy is to create a product table with WooCommerce price filter slider in this plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install the WooCommerce product table plugin&nbsp;<\/h3>\n\n\n\n<p>To use the WooCommerce product table pro plugin, first, you need to download and install it on your WordPress website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-templates-table.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1893\" height=\"887\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-templates-table.png\" alt=\"select templates table in plugin WooCommerce\" class=\"wp-image-24382\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-templates-table.png 1893w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-templates-table-500x234.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-templates-table-1536x720.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-templates-table-1000x469.png 1000w\" sizes=\"(max-width: 1893px) 100vw, 1893px\" \/><\/a><\/figure>\n\n\n\n<p>Now, you can find <strong>iT Product Table<\/strong> in the WordPress dashboard with three options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>All table<\/strong><\/li>\n\n\n\n<li><strong>Add new table<\/strong><\/li>\n\n\n\n<li><strong>Settings&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>To create a product table with WooCommerce price filter slider, click on the <strong>Add new table<\/strong> option, then scroll the page and click on the <strong>Get start<\/strong> button.<\/p>\n\n\n\n<p>You can also choose one of the preset templates to design your product table.<\/p>\n\n\n\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center main-cta-cnt has-background is-layout-flex wp-container-core-columns-is-layout-4a33225c wp-block-columns-is-layout-flex\" style=\"background-color:#3d67ff;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-4f39da6d wp-block-group-is-layout-constrained\" style=\"padding-top:15px\">\n<p class=\"single-cta-heading has-white-color has-text-color has-link-color wp-elements-b497876dbe00d7a51b8cb487822eff09\" style=\"font-size:26px;font-style:normal;font-weight:800\">TABLEiT &#8211; Product Table for WooCommerce<\/p>\n\n\n\n<p class=\"single-cta-desc has-white-color has-text-color has-link-color wp-elements-836979f021e649a55d05283990387527\" style=\"font-size:16px\">The easy way to create an interactive product table with price range slider filter in WooCommerce <\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button main-cta-button\"><a class=\"wp-block-button__link has-text-color has-background wp-element-button\" href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=pt-with-price-filter\" style=\"border-style:none;border-width:0px;border-radius:40px;color:#ffffff;background-color:#0fba5e;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;font-style:normal;font-weight:500\" target=\"_blank\" rel=\"noreferrer noopener\">Buy Plugin<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-white-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/advanced-product-table-for-woocommerce\/\" style=\"border-style:none;border-width:0px;border-radius:40px;color:#3d67ff;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;font-style:normal;font-weight:500\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Free Version<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"355\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png\" alt=\"TABLEiT - Product Table for WooCommerce plugin by ithemeland\" class=\"wp-image-48727\" style=\"width:440px;height:auto\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png 532w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner-500x335.png 500w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add columns to your product table<\/h3>\n\n\n\n<p>By creating a new table, our plugin inserts all of your WooCommerce products into the table, automatically. However, you can go to the <strong>Query<\/strong> tab and customize which products to be displayed in the table.<\/p>\n\n\n\n<p>Let&#8217;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:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <strong>Columns<\/strong> tab.&nbsp;<\/li>\n\n\n\n<li>Press the <strong>Add a Column<\/strong> button at the middle of the page to see the new column box with two sections: <strong>Heading<\/strong> and <strong>Cell content<\/strong>.&nbsp;<\/li>\n\n\n\n<li>You can customize each one by pressing the <strong>Add Elements<\/strong> option and choosing one of the elements displayed in the left panel<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-columns-to-product-table.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1866\" height=\"817\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-columns-to-product-table.png\" alt=\"add columns to product table in WooCommerce\" class=\"wp-image-24383\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-columns-to-product-table.png 1866w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-columns-to-product-table-500x219.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-columns-to-product-table-1536x673.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-columns-to-product-table-1000x438.png 1000w\" sizes=\"(max-width: 1866px) 100vw, 1866px\" \/><\/a><\/figure>\n\n\n\n<p>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 <strong>General <\/strong>and <strong>Style <\/strong>tabs of <strong>Elements Setting<\/strong> panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-general-and-style-tab-to-checkbox-element.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1890\" height=\"436\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-general-and-style-tab-to-checkbox-element.png\" alt=\"set general and style tab to checkbox element in columns table\" class=\"wp-image-24385\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-general-and-style-tab-to-checkbox-element.png 1890w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-general-and-style-tab-to-checkbox-element-500x115.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-general-and-style-tab-to-checkbox-element-1536x354.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-general-and-style-tab-to-checkbox-element-1000x231.png 1000w\" sizes=\"(max-width: 1890px) 100vw, 1890px\" \/><\/a><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Checkbox<\/strong>: Let customers mark as many products as they need a cart directly from the product table,<\/li>\n\n\n\n<li><strong>Title<\/strong>: To show the product title to the customers.<\/li>\n\n\n\n<li><strong>Image<\/strong>: To display the featured image of the product in the table column.<\/li>\n\n\n\n<li><strong>Variation<\/strong>: to let customers compare different attributes of the products directly on the shopping page,<\/li>\n<\/ul>\n\n\n\n<p><strong>Note<\/strong>: For displaying variations using the WooCommerce product table pro plugin, you need to add <strong>Attribute<\/strong> element to the cell. Then, in the <strong>General<\/strong> tab, choose one of the attributes from the list and set other configurations.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-size-in-style-tab.png\"><img loading=\"lazy\" decoding=\"async\" width=\"265\" height=\"691\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-size-in-style-tab.png\" alt=\"set size in style tab in columns table\" class=\"wp-image-24386\" \/><\/a><\/figure>\n\n\n\n<p>So, if you want to show different variations like size, color, brand, and more, you have to add an <strong>Attribute <\/strong>element for them, individually. In this way, each attribute will be displayed in separate columns on the product table.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Quantity<\/strong>: To enable customers to increase or decrease the product quantities and add them to their carts.<\/li>\n\n\n\n<li><strong>Price<\/strong>: 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.<\/li>\n<\/ul>\n\n\n\n<p>After adding the columns, you can press on the <strong>Eye<\/strong> icon on the top of the table, to see a preview of your product table.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-attribute-element-to-products.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1546\" height=\"293\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-attribute-element-to-products.png\" alt=\"result attribute element to products in table\" class=\"wp-image-24387\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-attribute-element-to-products.png 1546w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-attribute-element-to-products-500x95.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-attribute-element-to-products-1536x291.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-attribute-element-to-products-1000x190.png 1000w\" sizes=\"(max-width: 1546px) 100vw, 1546px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add price range slider filter to product table<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Following the below simple instruction allow you to easily show the price range slider filter to your customers in the product table:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the <strong>Navigation<\/strong> tab.&nbsp;<\/li>\n\n\n\n<li>In one of the navigation bars \u2013 sidebar in this example, find the <strong>Add Element<\/strong> option and click on it to see the list of elements in the left panel. Now, review the elements and choose <strong>Price Filter<\/strong> among them.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-price-range-slider-filter.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1857\" height=\"699\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-price-range-slider-filter.png\" alt=\"add price range slider filter to product table\" class=\"wp-image-24393\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-price-range-slider-filter.png 1857w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-price-range-slider-filter-500x188.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-price-range-slider-filter-1536x578.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-price-range-slider-filter-1000x376.png 1000w\" sizes=\"(max-width: 1857px) 100vw, 1857px\" \/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Customize price range slider filter<\/h4>\n\n\n\n<p>As soon as you add a price filter to the sidebar, you have access to the <strong>General<\/strong> tab to customize the content displayed in this filtering option to the customers.<\/p>\n\n\n\n<p>Let\u2019s review the customizable items of <strong>Price Filter<\/strong>:<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Heading<\/strong><\/h5>\n\n\n\n<p>By editing this item, you can change the title of the price slider filter in the table. By default, the title is <strong>Price Range<\/strong>. However, you can change it by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clicking on the <strong>Trash<\/strong> icon of the current text.<\/li>\n\n\n\n<li>Pressing <strong>Add Element.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-trash-icon-of-current-text.png\"><img loading=\"lazy\" decoding=\"async\" width=\"254\" height=\"276\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-trash-icon-of-current-text.png\" alt=\"select trash icon of current text in style tab\" class=\"wp-image-24394\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>And choosing one of the below elements:\n<ul class=\"wp-block-list\">\n<li><strong>Media image<\/strong>: To display an image instead of title.<\/li>\n\n\n\n<li><strong>Space<\/strong>: To add a space between elements.<\/li>\n\n\n\n<li><strong>Dot<\/strong>: To use <strong>\u201c.\u201d<\/strong> As a separator between two elements.<\/li>\n\n\n\n<li><strong>Text<\/strong>: To show a customized message as the title.<\/li>\n\n\n\n<li><strong>Tooltip<\/strong>: To show a tooltip as the filter title.<\/li>\n\n\n\n<li><strong>HTML<\/strong>: To add an HTML code for customizing the filter title.<\/li>\n\n\n\n<li><strong>Icon<\/strong>: To display an icon in the filter title.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-element.png\"><img loading=\"lazy\" decoding=\"async\" width=\"263\" height=\"215\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-element.png\" alt=\"add element in table\" class=\"wp-image-24395\" \/><\/a><\/figure>\n\n\n\n<p>In this example, we selected <strong>Text Element<\/strong> and inserted <strong>Filter by Price Range<\/strong> in the textbox to be shown as the price slider filter title:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-text-element-and-inserted-filter-by-price-range.png\"><img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"211\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-text-element-and-inserted-filter-by-price-range.png\" alt=\"select text element and inserted filter by price range in the textbox\" class=\"wp-image-24396\" \/><\/a><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u201cShow any\u201d option label<\/strong><\/h5>\n\n\n\n<p>This item is designed to let you customize the label of <strong>Show any<\/strong> 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.<\/p>\n\n\n\n<p>You can customize this label by following the instructions that we described for the heading field.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Filter Options<\/strong><\/h5>\n\n\n\n<p>This is the most important part of the price filtering box in the table, allowing you to show different price ranges to customers.&nbsp;<\/p>\n\n\n\n<p>By default, the price ranges are defined as below:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>$0-50<\/strong><\/li>\n\n\n\n<li><strong>$51-100<\/strong><\/li>\n\n\n\n<li><strong>Over $100<\/strong><\/li>\n<\/ul>\n\n\n\n<p>However, you can remove these defaults by pressing the <strong>Trash <\/strong>icon and try to add new ones based on your need.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-filter-options-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"260\" height=\"666\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/set-filter-options-section.png\" alt=\"set filter options section in table\" class=\"wp-image-24397\" \/><\/a><\/figure>\n\n\n\n<p>To add a new price range, first, you need to click on the <strong>Add an option<\/strong> button to see the <strong>Min<\/strong> and <strong>Max<\/strong> prices box on the top. This box contains three parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Min price<\/strong>: Insert the minimum price range here.<\/li>\n\n\n\n<li><strong>Max price<\/strong>: Insert the maximum price range here.<\/li>\n\n\n\n<li><strong>Label<\/strong>: Set a title for this price range \u2013 editing the price label is the same as editing the heading field we have described before.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>By repeating these steps, you can add as many price ranges as you want to the Price range filter slider.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-add-an-option-button.png\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"478\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-add-an-option-button.png\" alt=\"select add an option button in filter options section\" class=\"wp-image-24398\" \/><\/a><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Other customizations<\/strong><\/h5>\n\n\n\n<p>There are two more items for customizing the price range slider filters, which are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable custom Min &amp; Max input options<\/strong>: If you mark this option, customers can specify the max and min prices by inserting numbers in related boxes.<\/li>\n\n\n\n<li><strong>Keep filter open by default if it is in sidebar<\/strong>: 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 <strong>Price Filter<\/strong> element to the sidebar.<\/li>\n<\/ul>\n\n\n\n<p>This is how the default price range slider filter is shown in the product table:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-price-range-slider-filter.png\"><img loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"348\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-price-range-slider-filter.png\" alt=\"result price range slider filter in product table\" class=\"wp-image-24399\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Show WooCommerce product table with price filter slider in shopping page using Shortcode<\/h3>\n\n\n\n<p>Finally, to replace the WooCommerce shopping page with this product table, you need to:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Save the table after adding a name on the text box above the table.<\/li>\n\n\n\n<li>Click on the <strong>Shortcode<\/strong> icon to copy it.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-shortcode-icon.png\"><img loading=\"lazy\" decoding=\"async\" width=\"282\" height=\"47\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-shortcode-icon.png\" alt=\"select shortcode icon in table\" class=\"wp-image-24400\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open a new page in WordPress and paste the Shortcode in.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/paste-shortcode-in-new-page-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"678\" height=\"207\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/paste-shortcode-in-new-page-1.png\" alt=\"paste shortcode in new page WordPress\" class=\"wp-image-24402\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/paste-shortcode-in-new-page-1.png 678w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/paste-shortcode-in-new-page-1-500x153.png 500w\" sizes=\"(max-width: 678px) 100vw, 678px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>WooCommerce settings &gt; Products<\/strong> and choose the new page from the list of <strong>Shop page <\/strong>field<strong>.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-new-page-from-list-of-shop-page-field.png\"><img loading=\"lazy\" decoding=\"async\" width=\"935\" height=\"503\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-new-page-from-list-of-shop-page-field.png\" alt=\"select new page from list of shop page field in WooCommerce\" class=\"wp-image-24403\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-new-page-from-list-of-shop-page-field.png 935w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-new-page-from-list-of-shop-page-field-500x269.png 500w\" sizes=\"(max-width: 935px) 100vw, 935px\" \/><\/a><\/figure>\n\n\n\n<p>Now, if you open the shopping page of your website, you can see WooCommerce product table with price range filter slider as below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-price-range-filter-slider.png\"><img loading=\"lazy\" decoding=\"async\" width=\"593\" height=\"378\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-price-range-filter-slider.png\" alt=\"result price range filter slider in product table WooCommerce\" class=\"wp-image-24404\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-price-range-filter-slider.png 593w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-price-range-filter-slider-500x319.png 500w\" sizes=\"(max-width: 593px) 100vw, 593px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center main-cta-cnt has-background is-layout-flex wp-container-core-columns-is-layout-4a33225c wp-block-columns-is-layout-flex\" style=\"background-color:#3d67ff;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-4f39da6d wp-block-group-is-layout-constrained\" style=\"padding-top:15px\">\n<p class=\"single-cta-heading has-white-color has-text-color has-link-color wp-elements-b497876dbe00d7a51b8cb487822eff09\" style=\"font-size:26px;font-style:normal;font-weight:800\">TABLEiT &#8211; Product Table for WooCommerce<\/p>\n\n\n\n<p class=\"single-cta-desc has-white-color has-text-color has-link-color wp-elements-836979f021e649a55d05283990387527\" style=\"font-size:16px\">The easy way to create an interactive product table with price range slider filter in WooCommerce <\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button main-cta-button\"><a class=\"wp-block-button__link has-text-color has-background wp-element-button\" href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=pt-with-price-filter\" style=\"border-style:none;border-width:0px;border-radius:40px;color:#ffffff;background-color:#0fba5e;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;font-style:normal;font-weight:500\" target=\"_blank\" rel=\"noreferrer noopener\">Buy Plugin<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link has-white-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/advanced-product-table-for-woocommerce\/\" style=\"border-style:none;border-width:0px;border-radius:40px;color:#3d67ff;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;font-style:normal;font-weight:500\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Free Version<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"355\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png\" alt=\"TABLEiT - Product Table for WooCommerce plugin by ithemeland\" class=\"wp-image-48727\" style=\"width:440px;height:auto\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png 532w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner-500x335.png 500w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1990,"featured_media":24409,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,73],"tags":[],"class_list":["post-24378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-woocommerce"],"featured_image_url":"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-an-interactive-product-table-500x335.jpg","excerpt_plain":"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 [&hellip;]","_embedded":{"wp:term":[[{"term_id":50,"name":"Tutorials","slug":"tutorials","term_group":0,"term_taxonomy_id":50,"taxonomy":"category","description":"Follow and learn the latest educational articles about WordPress plugins and WooCommerce here","parent":0,"count":256,"filter":"raw"},{"term_id":73,"name":"WooCommerce","slug":"woocommerce","term_group":0,"term_taxonomy_id":73,"taxonomy":"category","description":"Do you use WooCommerce to manage your online store? We suggest you read this category of WooCommerce articles.","parent":50,"count":205,"filter":"raw"}]]},"_links":{"self":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/24378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/users\/1990"}],"replies":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/comments?post=24378"}],"version-history":[{"count":1,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/24378\/revisions"}],"predecessor-version":[{"id":48982,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/24378\/revisions\/48982"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/media\/24409"}],"wp:attachment":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/media?parent=24378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/categories?post=24378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/tags?post=24378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}