{"id":111941,"date":"2026-04-19T01:53:00","date_gmt":"2026-04-19T01:53:00","guid":{"rendered":"https:\/\/wpmet.com\/?post_type=docs&#038;p=111941"},"modified":"2026-04-19T01:53:01","modified_gmt":"2026-04-19T01:53:01","password":"","slug":"woocommerce-product-table","status":"publish","type":"docs","link":"https:\/\/wpmet.com\/doc\/woocommerce-product-table\/","title":{"rendered":"Woo Product Table"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The best way to show a product catalog is to create a WooCommerce product table that dynamically pulls data from the product.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of making users work, you bring everything into one place: prices, SKUs, stock status, and purchase options, all visible at once.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pre-requisites<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>TableKit Pro plugin: <a href=\"https:\/\/wpmet.com\/plugin\/tablekit\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get the plugin<\/a><\/li>\n\n\n\n<li>WooCommerce: <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">Download plugin<\/a><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure you have products added to WooCommerce before proceeding with the product table.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Create a product table in the block editor<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To create a product table, open a new page on the Gutenberg block editor. In the editor,<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Insert the TabelKit\u2019s <strong>Post Table<\/strong> block.<\/li>\n\n\n\n<li>You can either import templates or build from scratch.\n<ol class=\"wp-block-list\">\n<li><strong>Choose:<\/strong> To import a ready-made template.<\/li>\n\n\n\n<li><strong>Start Dummy:<\/strong> To start with a blank canvas.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/2_Create-a-product-table-in-WordPress.mp4\" playsinline><\/video><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Once the Post Table is inserted, go to the right sidebar, under the <strong>Content <\/strong>tab, and expand the <strong>Query<\/strong> <strong>Filter<\/strong> section.<\/li>\n\n\n\n<li>For <strong>Post Type<\/strong>, select <strong>Product.<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"866\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-10.png\" alt=\"\" class=\"wp-image-111955\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-10.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-10-767x415.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-10-1536x831.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-10-18x10.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-10-360x195.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now you have all the WooCommerce product data from your table. Now you can configure and customize the product table to show the data you want to present.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Configure Columns of the WooCommerce Product Table<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">With each column in your product table, you can present different types of product info. For example, in the following table, column 1 presents the <strong>product ID<\/strong>, column 2 presents the <strong>Product<\/strong> <strong>Title<\/strong>, column-3 presents <strong>Product Price<\/strong>, column 4 shows the <strong>product image,<\/strong> and column 5 includes the <strong>Add to Cart<\/strong> button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s create a table with this product information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add a column in the WooCommerce product table,<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <strong>Column<\/strong> <strong>Settings<\/strong> section under the Content tab.<\/li>\n\n\n\n<li>Click on the <strong>Add Item <\/strong>button.<\/li>\n\n\n\n<li>For the <strong>Field,<\/strong> select the product info you want to show in this column. For this case, we are selecting Product ID.<\/li>\n\n\n\n<li>The<strong> Label<\/strong> acts as the column header text. Add any label you want to show in the column heading.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1327\" height=\"823\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-8.png\" alt=\"\" class=\"wp-image-111953\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-8.png 1327w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-8-767x476.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-8-18x11.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-8-360x223.png 360w\" sizes=\"(max-width: 1327px) 100vw, 1327px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a process of adding columns to the products table to show specific information about a product.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Similarly, you can add other columns to show product info, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Product Title<\/li>\n\n\n\n<li>Product SKU<\/li>\n\n\n\n<li>Product Prices\u00a0<\/li>\n\n\n\n<li>Regular Price<\/li>\n\n\n\n<li>Sale Price<\/li>\n\n\n\n<li>Product Image<\/li>\n\n\n\n<li>Product Description<\/li>\n\n\n\n<li>Short Description<\/li>\n\n\n\n<li>Product Type<\/li>\n\n\n\n<li>Product Category\u00a0<\/li>\n\n\n\n<li>Stock Status<\/li>\n\n\n\n<li>Stock Quantity<\/li>\n\n\n\n<li>Add to Cart button<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u2026 and any custom field or Advanced Custom Field (ACF)<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay loop muted src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/Configure-Columns-of-the-WooCommerce-Product-Table.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Adding Product Title to The Table<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can show the Product title in a similar way you created a column.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Just click on the <strong>Add Item<\/strong> button \u2192 Set <strong>Product Title<\/strong> in the Selected Field \u2192 Add a <strong>Label<\/strong> as column header.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the product title, you can set a custom <strong>Character Limit<\/strong> and enable the <strong>Add Link<\/strong> option to link the product in the title.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1584\" height=\"869\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-11.png\" alt=\"\" class=\"wp-image-111956\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-11.png 1584w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-11-767x421.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-11-1536x843.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-11-18x10.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-11-360x197.png 360w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3: Settings of the WooCommerce Product Table<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Settings<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable Header:<\/strong> Turns the column heading row, like ID, Name, Title, Date, etc., on or off.<\/li>\n\n\n\n<li><strong>Enable Pagination:<\/strong> Activates the ability to break the results into multiple pages.<\/li>\n\n\n\n<li><strong>Enable Row Per Page:<\/strong> Displays a control that lets the user change how many items appear on each page.<\/li>\n\n\n\n<li><strong>Enable Result:<\/strong> Shows text indicating the total number of results and which range is currently visible, e.g., Showing 1 to 10 of 50 results.<\/li>\n\n\n\n<li><strong>Enable Pagination Control:<\/strong> Displays the page number navigation links e.g., Previous, 1, 2, 3, Next.<\/li>\n\n\n\n<li><strong>Enable Search:<\/strong> Adds a search bar allowing users to filter the table content dynamically.<\/li>\n\n\n\n<li><strong>Enable Individual Search:<\/strong> It adds a search field under each column header for targeted filtering of specific columns.<\/li>\n\n\n\n<li><strong>Enable Export Button:<\/strong> Provides a button to download the table data such as CSV, PDF, Excel file, etc.<\/li>\n\n\n\n<li><strong>Enable Sorting:<\/strong> Allows you to click the column headers to reorder the table content.<\/li>\n\n\n\n<li><strong>Fixed-Width Table Cells:<\/strong> Applies a styling property to ensure all table cells maintain a consistent, non-dynamic width.<\/li>\n\n\n\n<li><strong>Border Collapse:<\/strong> This allows you to control whether the borders of adjacent table cells merge into a single line or remain separate.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1461\" height=\"720\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-9.png\" alt=\"\" class=\"wp-image-111954\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-9.png 1461w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-9-767x378.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-9-18x9.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-9-360x177.png 360w\" sizes=\"(max-width: 1461px) 100vw, 1461px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 4: Product Table Pagination<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Previous First:<\/strong> This button takes you immediately to the very first page of the results.<\/li>\n\n\n\n<li><strong>Previous:<\/strong> It helps to navigate you one page backward in the sequence of results.<\/li>\n\n\n\n<li><strong>Next:<\/strong> This button navigates you one page forward in the sequence of results.<\/li>\n\n\n\n<li><strong>Next Last:<\/strong> Enabling this button, you can immediately go to the very last page of the results.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"343\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-7.png\" alt=\"\" class=\"wp-image-111952\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-7.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-7-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-7-360x161.png 360w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Row Per Page:<\/strong> Here, you can customize the label displayed next to the dropdown that controls the number of items per page.<\/li>\n\n\n\n<li><strong>Pagination Range:<\/strong> This feature allows you to customize the text string that displays the visible results range,e e.g., Showing 1 to 10 of 50 results. The Content field lets you change the text of the pagination range.<\/li>\n\n\n\n<li><strong>Pagination page of:<\/strong> It lets you customize the text string that displays the current page number versus the total page count, e.g., Page 1 of 5.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"341\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-12.png\" alt=\"\" class=\"wp-image-111957\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-12.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-12-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-12-360x160.png 360w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 5: Hide Columns<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This setting lets you select specific columns like ID, Name, Title, and Date to hide from the table display on the front end.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1354\" height=\"604\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-14.png\" alt=\"\" class=\"wp-image-111959\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-14.png 1354w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-14-767x342.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-14-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-14-360x161.png 360w\" sizes=\"(max-width: 1354px) 100vw, 1354px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 6: Customize the WooCommerce Product Table<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Common: The Style tab provides options for common visual adjustments like Alignment, Typography, Color, Background, Border, Box Shadow, and Padding.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1354\" height=\"605\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-16.png\" alt=\"\" class=\"wp-image-111961\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-16.png 1354w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-16-768x343.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-16-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-16-360x161.png 360w\" sizes=\"(max-width: 1354px) 100vw, 1354px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Header: It lets you visually style the column header row of the table. It offering controls for Alignment, Typography, Color, Background, Border, Border Radius, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1351\" height=\"603\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-13.png\" alt=\"\" class=\"wp-image-111958\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-13.png 1351w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-13-766x342.png 766w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-13-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-13-360x161.png 360w\" sizes=\"(max-width: 1351px) 100vw, 1351px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Column: These settings allow users to select specific columns such as ID, Name, Title, etc. from the table and apply unique styling to them, including setting the Background and text Color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1353\" height=\"604\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-15.png\" alt=\"\" class=\"wp-image-111960\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-15.png 1353w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-15-766x342.png 766w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-15-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-15-360x161.png 360w\" sizes=\"(max-width: 1353px) 100vw, 1353px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Cells: Here you get to style the main body of the table. This including Alignment, Typography, Color, Background, Border, Padding, etc., with separate options for applying styles to Even and Odd numbered rows.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"771\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-17.png\" alt=\"\" class=\"wp-image-111962\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-17.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-17-768x370.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-17-1536x740.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-17-18x9.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-17-360x173.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Caption: To style the table caption text, here you\u2019ll get to change color, font, alignment, background, padding, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"731\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-18.png\" alt=\"\" class=\"wp-image-111963\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-18.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-18-766x350.png 766w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-18-1536x702.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-18-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-18-360x164.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Export Button: You can style the Export button that opens the download options. The options are color, background, and border for Normal\/Hover states, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"766\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-20.png\" alt=\"\" class=\"wp-image-111965\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-20.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-20-767x367.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-20-1536x735.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-20-18x9.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-20-360x172.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Export Button Dropdown: This feature offers options like Padding, Margin, Background, text Color, etc. to style the menu containing the export options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"741\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-21.png\" alt=\"\" class=\"wp-image-111966\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-21.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-21-767x355.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-21-1536x711.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-21-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-21-360x167.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pagination: It manages the visual styling for the row count and navigation controls, offering options for icon\/text colors, background, gap, and more.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"739\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-19.png\" alt=\"\" class=\"wp-image-111964\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-19.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-19-766x354.png 766w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-19-1536x709.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-19-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-19-360x166.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Search: If you want to customize the appearance of the primary search input field and its container, use colors, background, border, radius, and other.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"768\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-22.png\" alt=\"\" class=\"wp-image-111967\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-22.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-22-767x368.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-22-1536x737.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-22-18x9.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-22-360x173.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Individual Search Button: It defines the aesthetics of the magnifying glass icon\/button used to initiate a search, covering its size, placement, color states Normal\/Hover\/Active, and more.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"766\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-25.png\" alt=\"\" class=\"wp-image-111970\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-25.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-25-767x367.png 767w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-25-1536x735.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-25-18x9.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-25-360x172.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Individual Search Options: Controls the look and feel of the column selection dropdown menu for focused searching, styling its color, background, border, margin, etc. across different states.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"769\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-23.png\" alt=\"\" class=\"wp-image-111968\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-23.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-23-768x369.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-23-1536x738.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-23-18x9.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-23-360x173.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sorting: Here, you can set the design attributes for the sort arrow icon located by the column headers, adjusting its size, spatial positioning (H\/V), and color on interaction.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"740\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-24.png\" alt=\"\" class=\"wp-image-111969\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-24.png 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-24-768x355.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-24-1536x710.png 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-24-18x8.png 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2026\/04\/image-24-360x167.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You have successfully mastered the features and styling controls of the GutenKit Post Table block. Start building dynamic and customized Post Tables today for maximum clarity and impact.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The best way to show a product catalog is to create a WooCommerce product table that dynamically pulls data from the product. Instead of making users work, you bring everything into one place: prices, SKUs, stock status, and purchase options, all visible at once. Pre-requisites Make sure you have products added to WooCommerce before proceeding [&hellip;]<\/p>\n","protected":false},"author":43,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"enableOnePageScrollInPage":false,"onePageScrollCss":"","onePageScrollSpeed":1000,"onePageScrollAnimation":"easeInOutQuad","onePageScrollShowDotNavigation":true,"onePageScrollNavigation":"scaleUp","onePageScrollNavigationPosition":"right","onePageScrollNavigationHorizontal":[],"onePageScrollNavigationVertical":[],"onePageScrollNavigationSpacing":[],"onePageScrollNavigationColor":"#00ff0d","onePageScrollNavigationColorHover":"#00ff0d","onePageScrollNavigationColorActive":"#00ff0d","onePageScrollNavigationIcon":[],"onePageScrollNavigationWidth":[],"onePageScrollNavigationWidthHover":[],"onePageScrollNavigationWidthActive":[],"onePageScrollNavigationHeight":[],"onePageScrollNavigationHeightHover":[],"onePageScrollNavigationHeightActive":[],"onePageScrollNavigationBorder":[],"onePageScrollNavigationBorderHover":[],"onePageScrollNavigationBorderActive":[],"onePageScrollNavigationBorderRadius":[],"onePageScrollNavigationBorderRadiusHover":[],"onePageScrollNavigationBorderRadiusActive":[],"onePageScrollNavigationTooltipTypography":[],"onePageScrollNavigationTooltipColor":"#ffffff","onePageScrollNavigationTooltipColorHover":"","onePageScrollNavigationTooltipBgColor":"#00ff0d","onePageScrollNavigationTooltipBgColorHover":"","onePageScrollNavigationTooltipPadding":[],"onePageScrollNavigationTooltipPaddingHover":[],"onePageScrollNavigationTooltipBorderRadius":[],"onePageScrollNavigationTooltipBorderRadiusHover":[],"pageSettingsCustomCss":"","footnotes":""},"doc_category":[1081,1135],"doc_tag":[1085],"knowledge_base":[1080],"class_list":["post-111941","docs","type-docs","status-publish","hentry","doc_category-getting-started-tablekit","doc_category-product-table","doc_tag-tablekit","knowledge_base-tablekit"],"year_month":"2026-06","word_count":1146,"total_views":"666","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"AbeerH","author_nicename":"abeer","author_url":"https:\/\/wpmet.com\/author\/abeer\/"},"doc_category_info":[{"term_name":"Getting Started with TableKit","term_url":"https:\/\/wpmet.com\/doc\/tablekit\/getting-started-tablekit\/"},{"term_name":"WooCommerce Product Table","term_url":"https:\/\/wpmet.com\/doc\/tablekit\/product-table\/"}],"doc_tag_info":[{"term_name":"TableKit","term_url":"https:\/\/wpmet.com\/docs-tag\/tablekit\/"}],"knowledge_base_info":[{"term_name":"TableKit","term_url":"https:\/\/wpmet.com\/doc\/tablekit\/","term_slug":"tablekit"}],"knowledge_base_slug":["tablekit"],"_links":{"self":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/docs\/111941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/comments?post=111941"}],"version-history":[{"count":3,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/docs\/111941\/revisions"}],"predecessor-version":[{"id":111974,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/docs\/111941\/revisions\/111974"}],"wp:attachment":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/media?parent=111941"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/doc_category?post=111941"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/doc_tag?post=111941"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/knowledge_base?post=111941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}