<p class="wp-block-paragraph">Enhance your WooCommerce store with the ultimate product table solution. The Product Table Builder plugin empowers you to create, customize, and manage product tables with ease, offering a wide range of features designed to improve your store’s user experience and functionality.</p>
<h2 class="wp-block-heading">Key Features</h2>
<ul class="wccom-tick-list-primary">
<li><strong>Drag-and-Drop Table Builder</strong>: Effortlessly create and organize your product tables with our intuitive drag-and-drop interface. No coding skills required.</li>
<li><strong>Customizable Table Elements</strong>: Tailor your product tables to suit your specific needs. Add, remove, and customize elements such as product name, price, SKU, image, and more.</li>
<li><strong>Appearance Customization</strong>: Personalize the look and feel of your tables to match your brand. Adjust colors, fonts, borders, and other visual elements.</li>
<li><strong>Advanced Query Builder</strong>: Use the query builder to filter and display products based on specific criteria, ensuring your customers see exactly what they’re looking for.</li>
<li><strong>Sorting and Table Pagination</strong>: Enable easy navigation through large product lists with sorting options and pagination controls.</li>
<li><strong>“Add to Cart” Functionality</strong>: Allow customers to add products to their cart directly from the table, streamlining the shopping experience.</li>
<li><strong>Responsive Design</strong>: Ensure your product tables look great on any device, providing a seamless shopping experience for all users.</li>
<li><strong>Import/Export Tables</strong>: Easily transfer tables between websites or save them for future use with our import/export feature.</li>
</ul>
<p></p>
<p></p>
<h2> </h2>
<h2>Drag-and-Drop WooCommerce Product Table Builder</h2>
<p>Create custom tables using comprehensive data from WooCommerce products. Drag and drop elements to build and customize your table, leveraging WooCommerce product data for a seamless and dynamic experience.</p>
<p><img class="alignnone size-medium wp-image-18734004007663" src="https://woocommerce.com/wp-content/uploads/2024/07/drag-drop_1c86a1.png?w=896" alt="Drag and Drop Product Table Builder" width="896" height="263" /></p>
<p></p>
<p></p>
<h2> </h2>
<h2>Individual Table Settings</h2>
<p>Enhance table settings to manage sorting and ordering of items seamlessly. Implement intuitive pagination for easy navigation through content. Include a convenient ‘Add All to Cart’ button for quick actions. Ensure the layout is mobile auto-responsive with a sleek card layout for an optimized user experience.</p>
<p><img class="alignnone size-full wp-image-18734004013405" src="https://woocommerce.com/wp-content/uploads/2024/07/global-settings.jpg" alt="global-settings" width="980" height="503" /></p>
<h2> </h2>
<h2>Appearance Settings</h2>
<p>Tailor the look and feel of your tables to perfectly align with your brand identity. You can adjust the color scheme, personalize background colors or images for both the entire table and individual cells, and choose from a wide range of font styles, sizes, and weights to ensure your text is consistent with your brand’s typography. Define the style, width, and color of borders, customize padding to control spacing, and apply hover styles to enhance interactivity. Additionally, adjust typography settings to fine-tune the visual appeal of your tables, ensuring a cohesive and professional appearance.</p>
<p><strong>You can </strong><strong>customize the appearance of the following type to enhance your tables:</strong></p>
<ul>
<li>Common Style</li>
<li>Header Style</li>
<li>Body Style</li>
<li>Body Link Style</li>
<li>Rating Style</li>
<li>All to Cart Button Style</li>
<li>Pagination Style</li>
<li>All to Cart Button Style</li>
</ul>
<p><img class="alignnone size-full wp-image-18734004013413" src="https://woocommerce.com/wp-content/uploads/2024/07/design-settings.jpg" alt="design-settings" width="980" height="508" /></p>
<h2> </h2>
<h2>Column Settings</h2>
<p><strong>Column Settings</strong> allow you to customize the appearance and behavior of your columns across different devices. You can adjust the <strong>Column Width</strong> to set the desired width, and use <strong>Column Width (Force)</strong> to enforce a specific width. The settings also include options to <strong>Hide in Desktop</strong>, <strong>Hide in Tablet</strong>, or <strong>Hide in Mobile</strong>, ensuring your columns are displayed only on selected devices. Additionally, you can add a <strong>Column Custom Class</strong> for further styling and customization.</p>
<p><img class="alignnone size-full wp-image-18734004013402" src="https://woocommerce.com/wp-content/uploads/2024/07/column-settings.jpg" alt="column-settings" width="980" height="506" /></p>
<h2> </h2>
<h2>Query Builder</h2>
<p><strong>Query Builder</strong> is a powerful tool for filtering your desired data. It allows you to create customized queries to filter tables based on various criteria such as <strong>Title</strong>, <strong>Price</strong>, <strong>ID</strong>, <strong>SKU</strong>, <strong>Description</strong>, <strong>Category</strong>, <strong>Tags</strong>, <strong>Status</strong>, <strong>Quantity</strong>, <strong>Rating</strong>, <strong>Rating Count</strong>, and many more. This ensures you can easily access and manage the specific data you need.</p>
<p><img class="alignnone size-full wp-image-18734004013408" src="https://woocommerce.com/wp-content/uploads/2024/07/query-builder_44cb5e.jpg" alt="query-builder" width="980" height="507" /></p>
<h2> </h2>
<h2>Element Settings</h2>
<p>Element Settings enable you to customize each element based on its data. For <strong>Title</strong>, you can add a link and set the target. For <strong>Price</strong>, you can add a custom currency, set the currency position, and choose to display the regular price. For <strong>Thumbnail</strong>, you can link it to the product and select the thumbnail size. For <strong>Rating</strong>, you have options to show the rating count or display the rating as a number only. These settings allow for detailed customization to tailor each element to your specific needs.</p>
<p><img class="alignnone wp-image-18734004007657 size-full" src="https://woocommerce.com/wp-content/uploads/2024/07/title-settings_a4810c.png" alt="Title Element Settings" width="728" height="406" /></p>
<p><img class="alignleft wp-image-18734004007656" src="https://woocommerce.com/wp-content/uploads/2024/07/thumbnail-settings_cd5630.png?w=723" alt="Thumbnail Element Settings" width="400" height="363" /></p>
<p><img class="alignleft wp-image-18734004007655" src="https://woocommerce.com/wp-content/uploads/2024/07/price-settings_b476a2.png?w=727" alt="Price Element Settings" width="400" height="363" /></p>
<h2> </h2>
<h2>Global Settings</h2>
<p>Global Settings provide overarching customization options for your interface. In <strong>Floating Cart Settings</strong>, you can adjust the Floating Cart Text Color, Floating Cart Background Color, and Floating Cart Position. The <strong>Label Settings</strong> allow you to define the labels used in your table. Additionally, you can set specific <strong>Message Settings</strong> such as No Item Selected Message, Minimum Quantity Message and others which will appear as pop-ups to guide users. These global adjustments help create a consistent and tailored user experience across your platform.</p>
<p><img class="alignnone size-full wp-image-18734004013640" src="https://woocommerce.com/wp-content/uploads/2024/07/settings-1.png" alt="" width="679" height="253" data-wp-editing="1" /><img class="alignnone size-full wp-image-18734004013639" src="https://woocommerce.com/wp-content/uploads/2024/07/settings-2.png" alt="" width="679" height="320" /> </p>
<h2> </h2>
<h2>Table Export/Import</h2>
<p>Easily transfer tables between websites or save them for future use with our import/export feature. This functionality ensures a seamless way to back up your data, migrate tables, and maintain consistency across multiple platforms or projects.</p>
<p><img class="alignnone size-full wp-image-18734004013621" src="https://woocommerce.com/wp-content/uploads/2024/07/export-import.png" alt="" width="980" height="304" /></p>
<p> </p>
<p></p>

Product Table Builder

<p>Create, customize, and manage product tables effortlessly with an intuitive drag-and-drop interface and advanced query builder.</p>

<p><span style="font-weight: 400">WooCommerce list view plugin helps you transform your default product catalog page into an engaging product listing page with list/grid views. Add a toggle button on shop pages to switch listing pages between list and grid view. </span></p>
<p><span style="font-weight: 400">Make it easier for customers to bulk purchase or buy multiple products with the WooCommerce product list view plugin. Enlist specific products or categories with additional product information in the list/grid view. It helps customers to add products to the cart, select quantities, or purchase multiple products with a single click. </span></p>
<p><span style="font-weight: 400">A wide array of businesses can use the plugin, from wholesale to restaurants and technical products. For example, restaurants can allow customers to order multiple dishes with simple clicks, and computer shops can prompt customers to choose specifications when customizing their machines.</span></p>
<div class="woo-sc-box normal">Increase visibility of your products by enabling customers to help your customers to select the number of products they want to see on the shop page with the <strong><a href="https://woocommerce.com/products/product-per-page-for-woocommerce/">WooCommerce product per page plugin</a></strong>.</div>
<h2>Key Features of the List View Plugin for WooCommerce</h2>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Users can see products in a List, or Grid view with a toggle button.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Order multiple products and variations with a single click.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Show product listing separately on selected pages.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display specific products or categories on the listing page.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Use a shortcode to display the listing page and cart widget.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Quickly find products with the instant search bar.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display listings based on categories in the grid view.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Load list upon scroll, load more button, or pagination.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Select custom colors for table components.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Add multiple headings on the listing page and sort their order</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Personalize the load more button.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Mobile Responsive.</span></li>
</ul>
<h3><strong>Enable Product Listings for Better UX</strong></h3>
<p><span style="font-weight: 400">Let customers order multiple products and variations from a single listing page. Display products in a list/grid view or switch between the views with a toggle switch.</span></p>
<p><strong>List View:</strong></p>
<p><img class="aligncenter wp-image-8494004 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/list.gif" alt="Enable Product Listings for Better UX - List View" width="600" height="376" /></p>
<p><strong>Grid View:</strong></p>
<p><img class="aligncenter wp-image-8494005 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/grid.gif" alt="Enable Product Listings for Better UX - Grid View" width="600" height="376" /></p>
<h3><b>Display products in a list or grid view</b></h3>
<p><span style="font-weight: 400">Use the WooCommerce list view plugin to showcase your products in either list or grid view on the listing page. Switch between list and grid view using the dropdown. This gives customers more information and the ability to select product quantity and add to the cart in bulk.</span></p>
<p><img class="aligncenter wp-image-18734003497354 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/6-7.png" alt="Display products in a list or grid view" width="860" height="227" /></p>
<h3><b>Enlist Products Based on Categories in the Grid View</b></h3>
<p><span style="font-weight: 400">Display products based on their categories in the grid view with the WooCommerce product list template plugin. This way customers can easily browse through all products under a specific category and select quantities to place orders.</span></p>
<p><img class="aligncenter wp-image-8494161 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/Category-Wise.png" alt="Enlist Products Based on Categories in the Grid View" width="752" height="893" /></p>
<h3><b>Add listing & cart widgets anywhere using a shortcode</b></h3>
<p><span style="font-weight: 400">The WooCommerce product list template plugin generates a shortcode to display the product listing and cart widget. Admin can paste the shortcode on any page where they want to display the cart widget or listing page.</span></p>
<p><img class="aligncenter wp-image-18734003497355 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/7-6.png" alt="Add listing & cart widgets anywhere using a shortcode" width="1176" height="255" /></p>
<h3><b>Find products with the search bar</b></h3>
<p><span style="font-weight: 400">An instant search bar is displayed at the top of the listing page so that customers can quickly find any product. Users can type the product name in the search bar, which will be filtered at the top of the product listing.</span></p>
<p><img class="aligncenter wp-image-8494066 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/Customers-Can-Use-the-Search-Bar-Too-2.png" alt="Find products with the search bar" width="787" height="547" /></p>
<h3><b>Multiple Product loading options</b></h3>
<p><span style="font-weight: 400">The wooCommerce product listing page template plugin has three different product loading choices. You can display additional products through:</span></p>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Scroll down </span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Load more button</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Pagination</span></li>
</ul>
<p><img class="aligncenter wp-image-18734003497348 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/5-7.png" alt="Multiple Product loading options" width="760" height="424" /></p>
<h3><b>Customize the product listing table</b></h3>
<p><span style="font-weight: 400">The wooCommerce product table view plugin offers store owners extensive customization options. Admin can customize the color or font size to match their website’s theme.</span></p>
<div class="woo-sc-box normal">If you want to easily display, filter, and sort product varations, install the <strong><a href="https://woocommerce.com/products/product-variations-table-for-woocommerce/">WooCommerce variations table plugin</a></strong> on your store.</div>
<p><img class="aligncenter wp-image-18734003497346 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/4-7.png" alt="Customize the product listing table" width="684" height="568" /></p>
<h3><b>Add multiple headings on the listing page</b></h3>
<p><span style="font-weight: 400">Customize the product listing page and display additional information by including multiple headings. You can display vital product information with headings such as stock, weight, SKUs, length, subtotal, etc.</span></p>
<p><img class="aligncenter wp-image-18734003497247 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/1-13.png" alt="Add multiple headings on the listing page" width="855" height="999" /></p>
<h3><b>Hide out-of-stock products from the listing page</b></h3>
<p><span style="font-weight: 400">Display only the in-stock products on the listing page to avoid any confusion. Improve the users’ buying experience by hiding out-of-stock products and minimizing customer support over out-of-stock products.</span></p>
<p><img class="aligncenter wp-image-18734003497248 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/2-5.png" alt="Hide out-of-stock products from the listing page" width="717" height="159" /></p>
<h3><b>Customize listing page headings by sorting the order</b></h3>
<p><span style="font-weight: 400">Rearrange the headings of the listing page to create a customized listing table. Prioritize headings that are more important depending on the information you want to provide to the customer.</span></p>
<p><img class="aligncenter wp-image-18734003497249 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/3-13.png" alt="Customize listing page headings by sorting the order" width="863" height="402" /></p>
<h3>Create separate listing pages for each category using shortcodes</h3>
<p><span style="font-weight: 400">Improve the user experience of your eCommerce store by displaying categories as separate listing pages by only using shortcodes. Admin can select specific categories to show on the listing page and a shortcode will be generated for each category(s)</span></p>
<p><img class="aligncenter wp-image-18734003497314 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/image_2024_04_03T06_10_51_953Z.png" alt="Create separate listing pages for each category using shortcodes" width="1030" height="393" /></p>
<h3><b>Configure the load more button</b></h3>
<p><span style="font-weight: 400">With the WooCommerce custom product list page plugin, you can customize the “Load More” button. Admin can configure button text, background color, hove, border, and text color.</span></p>
<p><img class="aligncenter wp-image-18734003497359 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/8-6.png" alt="Configure the load more button" width="656" height="657" /></p>
<p> </p>
<h2>Compatibility</h2>
<p>Our plugins are designed to be highly versatile and also compatible with the most commonly used themes, browsers, builders, and mobile views. We understand the importance of flexibility and integration when it comes to enhancing your website’s functionality. Our plugins can effortlessly integrate with the following:</p>
<h3>Themes Compatibility</h3>
<ul>
<li>Store Front</li>
<li>Avada</li>
<li>Flatsome</li>
<li>Porto</li>
<li>Woodmart</li>
<li>WooCommerce default theme</li>
<li>Divi</li>
</ul>
<h3>Builders</h3>
<ul>
<li>Elementor</li>
<li>Bakery</li>
<li>Divi</li>
</ul>
<h3>Also Compatible with</h3>
<ul>
<li>PHP 8</li>
<li>Mobile Layouts</li>
</ul>
<h3>Get Started</h3>
<ol>
<li>Purchase <strong>Product Listing Page with List & Grid View</strong> from WooCommerce.com.</li>
<li>Download and install the extension.</li>
<li>Activate the extension.</li>
<li>Go to <strong>WooCommerce > Product Listing Page </strong> to configure this plugin.</li>
<li>Read the full installation guide <a href="https://woocommerce.com/document/2-0/product-listing-page-with-list-grid-view/">here</a>.</li>
</ol>

Product Listing Page with List and Grid View

<p>Display WooCommerce products in a list/grid view, allowing customers to order multiple products or bulk purchases!</p>

Product Table Builder vs Product Listing Page with List and Grid View