{"id":24893,"date":"2023-11-25T08:53:33","date_gmt":"2023-11-25T08:53:33","guid":{"rendered":"https:\/\/ithemelandco.com\/?p=24893"},"modified":"2026-05-25T08:10:42","modified_gmt":"2026-05-25T08:10:42","slug":"woocommerce-product-table-with-sorting","status":"publish","type":"post","link":"https:\/\/ithemelandco.com\/blog\/woocommerce-product-table-with-sorting\/","title":{"rendered":"Create a WooCommerce Product Table With Sorting option in 3 Easy Steps"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Product sorting can make a big difference in how customers browse a WooCommerce store. When shoppers can sort products by price, attributes, custom fields, stock, or other product details, they can find the right item faster instead of scrolling through long product lists.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce has basic product sorting options, but they are not always enough when you want to build a custom product table with sortable columns. For example, you may want customers to sort products by color, size, price, SKU, rating, custom fields, or any other product data that matters in your store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, you\u2019ll learn how to create a WooCommerce product table with sorting using<a href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=product-table-with-sorting\" target=\"_blank\" rel=\"noreferrer noopener\"> TABLEiT &#8211; Product Table for WooCommerce<\/a>. We\u2019ll show you how to add sortable columns, sort products by attributes, create custom sorting options, and publish the table on your shop page without writing code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to create a product table with sorting by using WooCommerce product table plugin?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=product-table-with-sorting\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce product table plugin<\/a> is one of the advanced WooCommerce plugins that provide you with all the essential features you need to create eye-catching and responsive tables. This plugin has an easy and intuitive user interface with which you can easily create your own tables and add various features such as sorting, filtering, and a quick search box.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s see how to create a custom WooCommerce product table with sorting by attributes and beyond in three simple steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install WooCommerce product table plugin<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first step for using the WooCommerce product table plugin is to download and install it on your WordPress website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By activating the plugin, a new item was added to the WordPress dashboard called the <strong>IT Product Table. <\/strong>To start working with this awesome plugin, you need to click on this tab and go to the <strong>Add New Table <\/strong>page.<\/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-new-table-section.png\"><img decoding=\"async\" width=\"177\" height=\"155\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-add-new-table-section.png\" alt=\"click add new table in product table menu\" class=\"wp-image-24894\"\/><\/a><figcaption class=\"wp-element-caption\">Add new table using TABLEiT plugin<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">On this page, some preset templates allow you to quickly create your product table with some default columns set in the templates.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, you can ignore them and press <strong>Get Start <\/strong>at the bottom of the page to create your table from scratch.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By clicking on <strong>Get Start<\/strong>, all of the WooCommerce products will be imported to the plugin automatically. So, if you want to show some specific categories or products to your customers, go to the <strong>Query<\/strong> tab and make a new query to be displayed in your table. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, you are ready to create a custom WooCommerce product table with a sorting option in the next step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Create a custom WooCommerce product table with sorting option<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The easy to use interface of the WooCommerce product table plugin enables you to create your product table in a few minutes. Let\u2019s review the simple steps you need to follow to customize the columns of your table:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the <strong>Columns<\/strong> tab and press the <strong>Add New Columns<\/strong> button in the middle of the page to create a new column in your table.<\/li>\n\n\n\n<li>For this new column, you can customize the <strong>Header<\/strong> and <strong>Cell Content<\/strong> by adding elements to the new box that just appeared on the page.&nbsp;<\/li>\n\n\n\n<li>To add elements for both <strong>Header<\/strong> and <strong>Cell Content<\/strong> simply click on the <strong>Add Element<\/strong> option to see a list of elements in the left panel.<\/li>\n\n\n\n<li>Choose one of the <strong>Elements<\/strong> and try to customize it by changing the items in the <strong>General<\/strong> and <strong>Style<\/strong> tabs of the <strong>Element Setting Panel.<\/strong><\/li>\n\n\n\n<li>Repeat the above mentioned steps to add as many columns as you need to your table.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s suppose that you have created a sample product table like below, and you want to add sorting options to it.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-food-table-1024x516.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1225\" height=\"516\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-food-table.png\" alt=\"result food table in WooCommerce product table plugin\" class=\"wp-image-24895\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-food-table.png 1225w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-food-table-500x211.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-food-table-1000x421.png 1000w\" sizes=\"(max-width: 1225px) 100vw, 1225px\" \/><\/a><figcaption class=\"wp-element-caption\">Simple table example<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To do this, you can use two different methods that we are going to completely describe them in the following:<\/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-8a83d729 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-5980c20d 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 wp-block-paragraph\" 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-34a60ce88ce797c15ae3c2d4fb2a2431 wp-block-paragraph\" style=\"font-size:16px\">The easy way to create custom WooCommerce product table with sorting by attributes<\/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=product-table-with-sorting\" 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 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<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 1: Enable products sorting in each table column<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first method for adding sort options in the product table is displaying the sorting option on each column. You definitely see the Up and Down arrow keys in the Header of some columns allowing you to sort the data of one specific column on each page in ascending or descending orders.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can display this sorting option on one or more columns of your table by following the below instructions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On the <strong>Heading<\/strong> section of the column, click on the <strong>Add Elements<\/strong> to see the list of elements in the left panel.<\/li>\n\n\n\n<li>Choose the <strong>Sorting<\/strong> element from the list.<\/li>\n\n\n\n<li>Customize the <strong>Sorting<\/strong> option based on the element you have chosen in the <strong>Cell Content<\/strong> tab.<\/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\/enable-sorting.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1878\" height=\"661\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting.png\" alt=\"Enable products sorting in each table columns\" class=\"wp-image-24897\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting.png 1878w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting-500x176.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting-1536x541.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting-1000x352.png 1000w\" sizes=\"(max-width: 1878px) 100vw, 1878px\" \/><\/a><figcaption class=\"wp-element-caption\">Add sorting element to your column<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s make some examples to see how you should customize the sorting element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a custom WooCommerce product table with sorting by attributes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To add sorting by attributes and let your customers sort the product based on the attribute items in the table, first, you need to add one of the <strong>Attributes<\/strong> like <strong>Color<\/strong> in the <strong>Cell content<\/strong> to show the data in the table. Then, after adding the <strong>Sorting<\/strong> element to the <strong>Header<\/strong>, you need to open the dropdown list of <strong>Sort by<\/strong> field and choose one of the below options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Attribute as text<\/strong>: If the values related to the attribute are displayed as text in the table like Red, blue, Large, Small, etc.<\/li>\n\n\n\n<li><strong>Attribute as number<\/strong>: If the values related to the attribute are displayed as a number in the table like 2, 100, etc.<\/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\/create-custom-product-table-with-sorting-by-attributes.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1876\" height=\"684\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-attributes.png\" alt=\"Create a custom WooCommerce product table with sorting by attributes\" class=\"wp-image-24898\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-attributes.png 1876w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-attributes-500x182.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-attributes-1536x560.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-attributes-1000x365.png 1000w\" sizes=\"(max-width: 1876px) 100vw, 1876px\" \/><\/a><figcaption class=\"wp-element-caption\">Customize sorting by attribute<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Create a custom WooCommerce product table with sorting by custom field<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">One of the amazing features of the WooCommerce product table is supporting all custom fields that you have added to the WooCommerce. If you add any custom field to the <strong>Cell content<\/strong> of the column, it is possible to choose one of the below options for the <strong>Sorting Element<\/strong> in the <strong>Header<\/strong> to let your customers sort the products based on the custom field values:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Custom field as number<\/li>\n\n\n\n<li>Custom field as text<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">As we described before, you need to choose the right option based on the values of the <strong>Custom Field<\/strong> in the column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-custom-field.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1844\" height=\"755\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-custom-field.png\" alt=\"Create a custom WooCommerce product table with sorting by custom field\" class=\"wp-image-24899\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-custom-field.png 1844w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-custom-field-500x205.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-custom-field-1536x629.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-custom-field-1000x409.png 1000w\" sizes=\"(max-width: 1844px) 100vw, 1844px\" \/><\/a><figcaption class=\"wp-element-caption\">Sort by custom field: as text<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Create a custom WooCommerce product table with sorting by price<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sorting by price is the most popular sorting option that almost all customers use to see which products are affordable for them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can simply create a column and add the <strong>Price<\/strong> element to the <strong>Cell Content<\/strong>, then add <strong>Sorting<\/strong> from the list of <strong>Heading<\/strong> elements and choose <strong>Price<\/strong> from the list of <strong>Sort by<\/strong> field in the <strong>General<\/strong> tab to add this sorting option to 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\/create-custom-product-table-with-sorting-by-price-1024x458.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1488\" height=\"458\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-price.png\" alt=\"Create a custom WooCommerce product table with sorting by product price\" class=\"wp-image-24900\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-price.png 1488w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-price-500x154.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/create-custom-product-table-with-sorting-by-price-1000x308.png 1000w\" sizes=\"(max-width: 1488px) 100vw, 1488px\" \/><\/a><figcaption class=\"wp-element-caption\">Sort by price element<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, if you want to observe how these sorting options are displayed in the table, click on the <strong>Eye<\/strong> icon on the top right corner of the screen.&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-preview-icon.png\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"60\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-preview-icon.png\" alt=\"select preview icon in WooCommerce product table plugin\" class=\"wp-image-24901\"\/><\/a><figcaption class=\"wp-element-caption\">Click on preview button<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As illustrated below, the Up and Down arrows are displayed next to the Price, Color, and Custom field columns allowing your customers to sort the products on each page based on them:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-by-attributes-and-custom-field-and-price.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1295\" height=\"490\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-by-attributes-and-custom-field-and-price.png\" alt=\"Result sorting by product attributes and custom field and price in WooCommerce table\" class=\"wp-image-24902\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-by-attributes-and-custom-field-and-price.png 1295w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-by-attributes-and-custom-field-and-price-500x189.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-by-attributes-and-custom-field-and-price-1000x378.png 1000w\" sizes=\"(max-width: 1295px) 100vw, 1295px\" \/><\/a><figcaption class=\"wp-element-caption\">Table preview<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2: Enable WooCommerce product sorting on all query<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The second method is to show sorting options in one of the navigation bars in the product table and let the customers sort all products in the table by choosing the sorting option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To make this happen in the WooCommerce product table plugin, following the below steps is required:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the <strong>Navigation<\/strong> tab.<\/li>\n\n\n\n<li>Press <strong>Add Element<\/strong> in one of the <strong>Navigation<\/strong> bars including Header, Footer, and Sidebar to see the list of elements in the left panel.<\/li>\n\n\n\n<li>Choose <strong>Sort by<\/strong> element from the list.<\/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\/enable-sorting-on-all-query.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1908\" height=\"905\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting-on-all-query.png\" alt=\"Enable Sorting on all query in WooCommerce table\" class=\"wp-image-24903\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting-on-all-query.png 1908w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting-on-all-query-500x237.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting-on-all-query-1536x729.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/enable-sorting-on-all-query-1000x474.png 1000w\" sizes=\"(max-width: 1908px) 100vw, 1908px\" \/><\/a><figcaption class=\"wp-element-caption\">Add sort element to header<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customize the <strong>Sort by<\/strong> element in the <strong>General<\/strong> tab as follows:<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Display type<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">There are two options in the <strong>Display type<\/strong> field: Dropdown and Row.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-display-type.png\"><img loading=\"lazy\" decoding=\"async\" width=\"345\" height=\"452\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-display-type.png\" alt=\"select display type for sorting field in table\" class=\"wp-image-24904\"\/><\/a><figcaption class=\"wp-element-caption\">Set sort element diplay type<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you choose <strong>Dropdown<\/strong>, a list of all sorting options will be displayed to the customers in a dropdown and they can choose one of them to sort the products.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-display-type.png\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"866\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-display-type.png\" alt=\"result display type for sorting field in WooCommerce product table plugin\" class=\"wp-image-24905\"\/><\/a><figcaption class=\"wp-element-caption\">Sort as dropdown<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you choose <strong>Rows<\/strong>, the sorting options are displayed in separate rows in the navigation bar and customers can choose one of them to sort the products.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-display-type-in-separate-rows.png\"><img loading=\"lazy\" decoding=\"async\" width=\"458\" height=\"778\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-display-type-in-separate-rows.png\" alt=\"result display type in separate rows WooCommerce product table plugin\" class=\"wp-image-24906\"\/><\/a><figcaption class=\"wp-element-caption\">Sort display as rows<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Sort Options&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Sort Options<\/strong> of <strong>General<\/strong> tab, you can press <strong>Add an Option<\/strong> button to add as many sorting options as you need to the table.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-sort-options.png\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"454\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-sort-options.png\" alt=\"select sort options for sorting field in product table\" class=\"wp-image-24907\"\/><\/a><figcaption class=\"wp-element-caption\">Add sort options<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">By adding a new option, a new box will appear with the below sections:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-option-in-sort-options-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"316\" height=\"222\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-option-in-sort-options-section.png\" alt=\"add new option for sort options section in product table\" class=\"wp-image-24908\"\/><\/a><figcaption class=\"wp-element-caption\">New options in sort settings<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Label<\/strong>: The title of the sorting option that you can write manually.<\/li>\n\n\n\n<li><strong>Order by<\/strong>: choose one of the sorting options from the list to let customers sort the products based on.&nbsp;<\/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\/label-and-order-by-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"307\" height=\"570\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/label-and-order-by-section.png\" alt=\"label and order by section in sort field\" class=\"wp-image-24910\"\/><\/a><figcaption class=\"wp-element-caption\">Sort option settings<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Keep Filter open by default if it is in the sidebar<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This item is useful if you add the <strong>Sort By<\/strong> element to the sidebar area. If you mark this item, the sorting options will be always displayed to the customers on the sidebar. Otherwise, there is a toggle that customers should click on to see the sorting options.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Use Shortcode to show the WooCommerce product table on the shopping page&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, when you create your custom WooCommerce product table with sorting by attributes and other options, you can save it by inserting a name on the text box on the top of the table and pressing the <strong>Save <\/strong>button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then to show this table on the <strong>Shopping<\/strong> page to your customers, try to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the <strong>Shortcode<\/strong> by clicking on the <strong>Shortcode<\/strong> icon.<\/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-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"74\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-shortcode-icon-1.png\" alt=\"select shortcode icon in WooCommerce table\" class=\"wp-image-24911\"\/><\/a><figcaption class=\"wp-element-caption\">Click on copy shortcode button<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open a new page in WordPress and paste the shortcode.<\/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-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"825\" height=\"381\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/paste-shortcode-in-new-page-2.png\" alt=\"paste shortcode in new page WordPress\" class=\"wp-image-24912\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/paste-shortcode-in-new-page-2.png 825w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/paste-shortcode-in-new-page-2-500x231.png 500w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/a><figcaption class=\"wp-element-caption\">Add table shprtcode in a page<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the <strong>WooCommerce &gt; Settings &gt; Products<\/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-setting-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"173\" height=\"304\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-setting-section.png\" alt=\"select setting section in WooCommerce menu\" class=\"wp-image-24913\"\/><\/a><figcaption class=\"wp-element-caption\">go to WC settings<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose the new page from the list of <strong>Shop<\/strong> Page.<\/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.png\"><img loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"484\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-new-page-from-list.png\" alt=\"select new page from list of Shop Page WooCommerce\" class=\"wp-image-24914\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-new-page-from-list.png 868w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/select-new-page-from-list-500x279.png 500w\" sizes=\"(max-width: 868px) 100vw, 868px\" \/><\/a><figcaption class=\"wp-element-caption\">Choose new page as default shop page<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is how the product table with the sorting options is displayed to your customer if you add the sorting options to the sidebar:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-option.png\"><img loading=\"lazy\" decoding=\"async\" width=\"887\" height=\"852\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-option.png\" alt=\"Result sorting option in WooCommerce product table\" class=\"wp-image-24915\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-option.png 887w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/11\/result-sorting-option-500x480.png 500w\" sizes=\"(max-width: 887px) 100vw, 887px\" \/><\/a><figcaption class=\"wp-element-caption\">sort options result in table<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to download the WooCommerce product table plugin?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The WooCommerce product table plugin is an advanced WooCommerce plugin that allows you to display your product page to users using very beautiful tables. Creating customer friendly product tables with various features such as filtering, sorting, adding multiple products to a cart at the same time, etc. can definitely help you attract more customers and boost your sales.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>To download the product table plugin and create a customized product table with sorting option, <a href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=product-table-with-sorting\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/p><\/blockquote><\/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-8a83d729 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-5980c20d 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 wp-block-paragraph\" 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-34a60ce88ce797c15ae3c2d4fb2a2431 wp-block-paragraph\" style=\"font-size:16px\">The easy way to create custom WooCommerce product table with sorting by attributes<\/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=product-table-with-sorting\" 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 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 class=\"wp-block-paragraph\">Adding sorting options to a WooCommerce product table helps customers compare products faster and make better buying decisions. Instead of browsing products in a fixed order, shoppers can sort the table by the information that matters most to them, such as price, attributes, custom fields, or product details.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default WooCommerce sorting options are useful for simple shop pages, but they can be limited when you need a table layout or more control over sortable product data. If your store has many products, custom attributes, technical specifications, or wholesale-style ordering, a sortable product table can create a much better shopping experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With <a href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=product-table-with-sorting\" target=\"_blank\" rel=\"noreferrer noopener\">TABLEiT &#8211; Product Table for WooCommerce<\/a>, you can build custom product tables, add sorting to selected columns, create Sort By options, display product data clearly, and place the table on any page with a shortcode. This gives store owners and WooCommerce developers a flexible way to improve product browsing without relying on the default shop layout.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column blog-faq-section is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">1. How do I sort products in WooCommerce?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce lets you sort products by default options such as popularity, rating, latest, and price. You can also manually change product order from the product list or customize sorting options depending on your store setup.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Can I create a WooCommerce product table with sorting?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. With <strong>TABLEiT<\/strong>, you can create a product table and add sorting options to columns such as price, attributes, custom fields, and other product data.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. How can I sort WooCommerce products by attribute?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To sort WooCommerce products by attribute, the attribute should be displayed in the product table as a column. Then you can enable sorting for that column so customers can sort products by values like size, color, weight, or other attributes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4. What is WooCommerce custom product sorting?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce custom product sorting means changing how products are ordered beyond the default sorting options. This can include sorting by custom fields, attributes, SKU, price, stock status, or other product information.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5. Can I manually sort products in WooCommerce?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. WooCommerce allows manual product sorting, but it can become time-consuming for large catalogs. A sortable product table gives customers more control because they can choose how they want to sort products on the frontend.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">6. What sorting options should I add to a WooCommerce product table?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Useful sorting options include price, product name, SKU, stock status, rating, category, attributes, and custom fields. The best options depend on what customers need to compare before buying.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">7. Is product sorting useful for large WooCommerce stores?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Product sorting is especially useful for stores with many products because it reduces browsing time and helps customers find relevant products faster.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Product sorting can make a big difference in how customers browse a WooCommerce store. When shoppers can sort products by price, attributes, custom fields, stock, or other product details, they can find the right item faster instead of scrolling through long product lists. WooCommerce has basic product sorting options, but they are not always enough [&hellip;]<\/p>\n","protected":false},"author":1990,"featured_media":24918,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,73],"tags":[],"class_list":["post-24893","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\/product-table-with-sorting-by-attributes-500x335.jpg","excerpt_plain":"Product sorting can make a big difference in how customers browse a WooCommerce store. When shoppers can sort products by price, attributes, custom fields, stock, or other product details, they can find the right item faster instead of scrolling through long product lists. WooCommerce has basic product sorting options, but they are not always enough [&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\/24893","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=24893"}],"version-history":[{"count":2,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/24893\/revisions"}],"predecessor-version":[{"id":51210,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/24893\/revisions\/51210"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/media\/24918"}],"wp:attachment":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/media?parent=24893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/categories?post=24893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/tags?post=24893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}