Product Table

Product Table Feature

The Product Table feature lets you display your products in a structured, fully customizable table, making it easy for customers to browse, compare key details, and add multiple items to their cart. With flexible column options, variant handling, inventory display, and description control, this feature is ideal for wholesale stores, B2B, large catalogs, or any business that wants to simplify product selection and ordering.

Add New Or Manage Existing Product Tables

Get started by creating or managing product tables tailored to your store. You can set up multiple tables, each with its own unique settings for columns, inventory display, variant options, description length, and more. For example, show all products, specific products, or products from selected collections, and decide which product details appear in each table. This makes it easy to create separate tables for different product groups or pages, giving you full control over how your catalog is displayed.

Add Title And Set The Status

In the individual product table interface, whether creating a new table or editing an existing one, you’ll find settings to set up all the details. The first sections are for adding a Product Table Title for admin reference and setting the status to enabled or disabled.

Choose Which Products To Include In The Product Table

You can quickly include products in your product table by showing all products, selecting specific products, or choosing products from collections using the centralized settings. Go to the Product Table tab in the B2B for SureCart settings and select which products should be displayed in each table.

Configure Product Table Columns

Setting up the columns for your product table is simple and fully customizable. You can decide exactly which details to display, how they’re labeled, and the order they appear in. Each column can be shown, hidden, or fine-tuned to match your preferred layout and shopping experience.

When you open the Product Table Columns section, you’ll see a clean list of all available columns in a compact format. Each column shows its name, drag handle for rearranging, and an icon to remove it if needed. This view makes it easy to quickly review which columns are active and how your table is structured at a glance.

To customize a column’s individual settings, simply expand it. Every column has its own dedicated options, allowing you to control everything from display labels to unique behaviors like linking, truncation, or button text.

Here’s a quick overview of what you can adjust for each type of column:

• Featured Image: Show or hide the product’s main image in the table.
• Name: Customize the label text and optionally make the product name link to the product page. You can also choose whether the link opens in a new tab.
• Description: Limit long product descriptions by setting a maximum character length (150 by default) and optionally show a “Read More” link that directs customers to the full product page.
• Price: Display the product’s SureCart price, automatically synced with your store data.
• Inventory: Show the current stock level quantity or availability status like “In Stock” for each product.
• SKU: Display product SKUs, including variant-specific SKUs when applicable.
• Variants: Allow shoppers to choose between product variants, such as size or color, depending on your selected display method.
• Quantity Selector: Include a quantity input field so buyers can order multiple units directly from the table.
• Add To Cart Button: Customize the button label that appears in this column for immediate ordering.

Together, these options give you full control over how your product information is displayed, making the table flexible for any type of store — from retail catalogs to wholesale order lists.

Customize How Customers See And Interact With Your Product Table

The Product Table Settings allow you to control how customers view and interact with your products. You can display variants and prices in a way that’s clear and intuitive, provide filters to quickly find the right items, and make it easy to add multiple products to the cart at once.

Sort Products Quickly With Clickable Column Headers

The product table includes sortable columns for key product details, such as Name, Price, SKU, and Inventory. Customers can click on a column header to reorder the table rows in ascending or descending order based on that attribute, making it easier to browse, compare, and find the right products. Sorting works seamlessly alongside filters, search, and pagination, giving shoppers a fast, interactive way to explore your catalog.

Variant And Price Display

The product table allows flexible display of both SureCart product prices and variants. Each can be shown either in a dropdown inside their respective columns or as separate rows, giving you complete control over how customers view and select options.

Dropdown Display

When the dropdown method is used, all available Prices or Variants appear inside a single dropdown in the Price or Variants column. Selecting an option automatically updates other relevant details, such as SKU, stock, and price, for that product in the table. This ensures customers always see the correct information without reloading the page.

Separate Rows Display

When the separate rows method is used, each Price or Variant is displayed as its own row in the product table. Each row has its own Add To Cart button, SKU, stock, and price, making it easy for customers to view and select specific options directly from the table.

Search And Filters

Customers can quickly find the products they’re looking for using the search bar above the table. The product table also includes filters for Collections and up to three variant attributes (such as Color, Size, or Material). SureCart allows each product to have up to three variant types, so the table combines all products’ variants into three dropdowns. Each filter dropdown dynamically lists all unique values available across the products in the table. Selecting one or more filter options immediately updates the table to show only matching products or variants, without reloading the page. A reset button allows customers to clear all filters and the search input, returning to the full product list.

Bulk Selection

Customers can select multiple products at once using the row selection checkboxes. This makes it easy to perform bulk actions, such as adding all selected items to the cart in a single step. Bulk selection works seamlessly with both variant and price options, ensuring the correct details are applied for each item.

Pagination

Pagination divides the product table into multiple pages, making it easier for customers to browse large product lists. You can set how many rows appear per page, providing control over the table’s layout. When pagination is disabled, all products are displayed in a continuously scrolling table, allowing customers to view the entire list at once.

Sticky Table Header

Long product lists can make it difficult for customers to remember which column represents which product detail. With the sticky table header enabled, the header row of the product table remains fixed at the top of the screen as users scroll. This ensures that column labels stay visible at all times, making browsing large product lists much easier and more intuitive.

You can also adjust the offset from the top of the page to avoid overlapping with a fixed site header or the WordPress admin bar. This keeps the table neatly aligned and fully readable, even on sites with sticky menus or toolbars.

Inquiry Form & Role-Based Visibility Integration

The Product Table feature works seamlessly with other settings in B2B for SureCart, giving you more control over how products are displayed and interacted with.

When used with the Inquiry Forms feature, you can replace Add to Cart buttons with Add to Form buttons, letting customers send quote requests or product inquiries instead of placing direct orders. Each product added to the inquiry form appears in a customizable submission form for your team to review and respond to.

In addition, the Product Table fully supports role-based visibility controls in our Wholesale Prices and Product Restrictions feature, allowing you to hide or show products, prices, or cart options depending on the visitor’s user role. This makes it easy to build separate experiences for retail shoppers, wholesale buyers, or logged-out visitors — all from the same store setup.

Together, these integrations help you create flexible, purpose-driven product tables that adapt to any catalog or quote-based store configuration.

CSS Classes For Custom Product Table Styling

The product table automatically includes a full set of CSS classes, giving you complete control over its appearance. These classes can be used to style every part of the table, from the wrapper and header to individual rows, cells, and columns, ensuring the design matches your store’s layout and branding.

By default, each table element is assigned a SurelyWP namespaced class for easy targeting and to avoid conflicts with your theme or other plugins. Every table also uses a unique ID based on its shortcode, such as surelywp-b2b-product-table-1, to allow multiple tables on the same site to be styled independently. Developers and advanced users can also enter their own custom classes in the settings to override or extend these defaults.